The CodeWolf

Part – 11 Grid in CSS, Part 1/2

Hello to everyone! The last week has been very very hectic for me. I started working on a major project where I work and also began a major project for my own side hustle!

Between that, drinking enormous amount of coffee and drowning in endless coding sprees, I don’t know how I managed to get time to write a blog this week.

But here it is! The CSS Grid. If data structures feel the hardest to master in programming, in CSS, the CSS Grid comes pretty close to that! But, worry not! I have thoroughly understood how learning grid in css can be simplified and how you can start hacking! A two part blog on CSS grid covers all the things you need to know to implement this amazing way of rendering elements!

So ready to learn? 3..2..1…here we go!

The CSS Grid

In the next topic of the expert track we will cover the following:

1. What is CSS Grid?
2. More about CSS Grid
3. Grid vs Flexbox

What is the CSS grid?

Positioning elements on a webpage is one of the hardest and most time consuming tasks from the perspective of CSS.

If we take the above example of a webpage, we can see that there are multiple elements that define a webpage.

These include the entire structure of the webpage being split into rows and columns.

This is what the CSS grid does and many popular frameworks such as bootstrap and tailwind make use of this grid to accurately and precisely place the elements on a webpage.

To start displaying elements in a grid, we can simply change the display property of a css container to be grid,

E.g.

.container{ display:grid;       width: 100%;     }

In chrome dev tools we can see the grid as following:

As we see, the grid is available in the developer tools with the option to show how the grid has been configured for all our html elements.

Another property we can set in the grid is to specify how our columns will be displayed.

.container{ display:grid;       width: 100%;       grid-template-columns: 200px 150px 20%;     }

The grid-template-columns property allows us to to set the number of columns and how their width needs to be configured. Here we configured 3 columns with different sizes in different units

As seen above now our elements will be displayed in 3 columns of varying sizes.

One special value of grid-template-columns is a unique unit called fractions.

.container{ display:grid;       width: 100%;       grid-template-columns: 200px 20% 1fr 2fr;     }

Here we define the grid in such a manner that after configuring and allocating the space for column 1 and 2, the total space left here which is 100% – 20% – 200px is allocated to the columns with fractions as their units.

Here we can see that the fourth column which is 2fr will receive twice the amount of allocated space as the column with 1fr.

One thing to note here is that the line for column separation is dotted whereas for rows its a dotted line.

This is because the grid gives us the flexibility to add rows in the template here since we haven’t explicitly specified the rows we need.

We can obviously change that and specify the rows as:

.container{ display:grid;       width: 100%;       grid-template-columns: 200px 2fr 20% 1fr;       grid-template-rows: 5rem 2.5rem;     }

We can see that now our grid has 4 columns and 2 rows precisely.

Positioning elements in a grid

We can already see that there are some numbers being assigned to the elements and rows in the examples shown before.

This is because the css grid actually thinks in lines by adding lines before and after every column and rows.

We can change the positioning of any element within a grid by taking into consideration these lines numbers for each column.

Suppose we want to set the element 3 such that it occupies both column 3 and 4, we can do that by grid-column-start and grid-column-end properties on the element 3 as follows:

.el3 {   background: rgba(0, 128, 0, 0.5);   grid-column-start: 3;   grid-column-end: 5; }

Above is how this will now be represented in a CSS grid.

Same can we achieved via rows also as:

.el3 {   background: rgba(0, 128, 0, 0.5);   grid-column-start: 3;   grid-column-end: 5;   grid-row-start: 1;   grid-row-end:3; }

As seen above, now the element 3 takes up the rows 1 and 2 and the columns 3 and 4.

Using element-sizing, repeat and minmax

While sizing elements in a grid we specified some units like rem, fr, %, px etc to achieve a desired height and width.

If we specify the grid sizing using the property value as “auto”, then the grid cell will take the appropriate sizing as per its name.

For row, auto will allow elements to have exactly the height needed to fit the elements within them, whereas auto for columns will allow the grid cell to occupy all the remaining space.

There is also a particular use case where we can define all the columns to to be of the same size.

Now obviously we can divide the total size by number of columns to get the column size and specify that as the actual size, but CSS provides us an easier way to do this.

We can use the function repeat(columns, width) to define a repeated pattern of columns quickly.

.container {   display:grid;   width: 100%;   grid-template-columns: repeat(4,25%);   grid-template-rows: 5rem 2.5rem; }

We can see the results of above as:

Here we can now see that all the columns are of the same size and the grid itself is divided into 4 columns.

The minmax function takes two arguments, the minimum and maximum values to be set for height/width for a row or column.

.container {   display:grid;   width: 100%;   grid-template-columns: repeat(4,25%);   grid-template-rows: 5rem minmax(10px, 250px); }

This is useful in defining a range upto which an element can be styled within a grid cell.

Advanced positioning 

Till now we have used the line numbers to do the positioning of elements withing a grid.

But, we can also pick a starting point and say that this element should span X more columns.

This can be done as follows:

.el3 {   background: rgba(0, 128, 0, 0.5);   grid-column-start: 3;   grid-column-end: span 2;   grid-row-start: 1;   grid-row-end:3; }

This means that the grid column should span two columns after it starts at the third line number.

If we specify a negative integer in the spanning, this would simply mean that the column spanned should be counted from the previous column. If the line number is 1 or the first line, this will simply take into account the last column/line of the element.

This can also lead to overlapping of elements.

Lets say element 2 starts at row number 2 and the element 1 occupies both row 1 and row 2.

In this case the element 1 and element 2 will get overlapped.

The order of overlapping can be changed using the z-index, which like flexbox works here without changing the position from static to any other.

Naming lines

We have been using numbered lines till now to manipulate the grid, however this is completely acceptable to change this to any name we want and reference them in our css code later on.

This can be done by changing the numbered line approach during the grid-template-column/row definition as follows:

.container {

   display:grid;

   width: 100%;

   grid-template-columns: repeat(4,25%);

   grid-template-rows: [row-1-start] 5rem [row-1-end row-2-start] 2.5rem  [row-2-end row-3-start] 2.5rem;

}

As we can see above, we can provide the names to the grid numbering system of rows and columns in the square brackets. We can add more than one name to the grid column by adding a space and then adding a second name.

Shorthands

grid-column-start and grid-column-end can be summarised into a shorthand as:

grid-column: start / end;

Same for Grid row:

grid-row: start / end;

We can further summarize both as grid-area:

grid-area: row start / column start / row end / column end;

Grid Gaps

We can specify gaps between the columns using the property, grid-column-gap and grid-row-gap, with a shorthand grid-gap:

grid-column-gap: 3rem; grid-row-gap:2rem; grid-gap: rowgap columngap;

One important thing to take a note in grid gaps is that the grid gaps aren’t applicable when the elements are overlapping each other.

This means that if two or more columns/rows are taken over by a single element, they will take over the grid gap as well.

Hold on! This isn’t all the CSS GRID there is! We continue exploring the CSS grid in the part 2 of this blog!

I keep on coding something cool, visit ankush.tech to see what all I am doing!

If you wish to read this whole info in a form of an easy to read book, do checkout the book “CSS Bullets, a comprehensive guide to all the CSS you need!“.

Thanks for sticking around!

Hope you like this series and stay tuned for more content on the learning.