CSS GRID: What you need to know to fully exploit its potential

Vaiz
8 min readOct 30, 2020
Photo by Glenn Carstens-Peters on Unsplash

How many people working on the frontend have you heard saying:
“I just love working with Javascript but I ask someone else do the CSS”?

Personally several, perhaps too many.

It’s like saying I like to draw but after drawing I leave the job halfway because I don’t like colouring. For example, I am one of those people who leaves drawings in black and white, but in my defence, I can say that black and white still has its charm.

Anyway, back to us, the frontend package also includes knowing how to handle the layout with discrete safety.
This is why in this article I will try to give you practical advice in the most immediate way possible to set up your layout through the CSS grids.

Besides the name “grid” what else is there to know?

The name is clear enough: you take a container and turn it into a grid where you can place the elements inside it as you like.
Cool isn’t it ?!
Of course, the important thing as in all things is just to practice and know what limits and potential it can offer you.

Advice before starting

Statistically speaking, most developers use Google Chrome as their browser. However, for our exercise with grids, I recommend using Firefox, which has an excellent tool for displaying the grids on the browser itself. We will see it in detail shortly.

Hands on code

Starting from a very simple base, with an outer container and boxes differentiated by colour inside the container, we immediately go to work with the CSS by defining a “display: grid” to our container.

app.html

<body>
<div class="grid-container">
<div class="box1">
<h1>Box 1</h1>
</div>
<div class="box2">
<h1>Box 2</h1>
</div>
<div class="box3">
<h1>Box 3</h1>
</div>
</div>
</body>

style.css

.grid-container {
display: grid;
margin: 5px;
border: 4px solid black;
}
.box1 {
background: palegoldenrod;
}
.box2 {
background: darksalmon;
}
.box3 {
background: lightskyblue;
}

With this operation we have not gained anything for the layout, but only because we have not defined any column or row and everything has been adapted to a single column as can be seen from the Firefox browser.

Firefox console

In this regard, open the inspector and select our container to which we have defined the grid.
By clicking on one of the two circles highlighted in the image and making sure you have the “Display line numbers” checkbox active, you should be able to view the rows and columns in this way.

Grid lines on our template

As you can see from the numbers that define the grid lines, by simply defining the container as a grid, it automatically created a column that goes from line 1 to line 2 horizontally and 4 lines vertically as we have 3 rows.

Let’s make things more interesting …

After understanding that to work with grids it is enough to change an attribute in the CSS, let’s try to create something more interesting like the following structure:

The goal for the next exercise

At this point, it is clear that a grid is made up of rows and columns. To achieve this it is sufficient to work with the columns through the property:

grid-template-columns

With this property, we will be able to work with different units of measurement such as pixels and percentages.

By defining in our “.grid-container

grid-template-columns: 300px 300px;

it is evident how using a precise value in px may not use all the available space or exceed the space.
Certainly, a more advantageous way to define the columns in a grid is the use of percentages. In fact, by defining two columns that use 50% of the space, it will be much easier to achieve the desired results.

grid-template-columns: 50% 50%;

Nobody forbids us to possibly use the two units of measurement together:

grid-template-columns: 300px 50%;

However, today’s surprise is this new unit of measurement: fraction (fr)
MDN defines a fraction like this:

The new fr unit represents a fraction of the available space in the grid container.

In other words, by defining the columns with fractions, it will be able to readjust itself in such a way as to take up all the available space.
Let’s take an example by trying to set up:

grid-template-columns: 1fr 1fr;

In this way the boxes will be two per row with the same size.
If, on the other hand, we want to have 3 columns all on the same row, it will be sufficient to define:

grid-template-columns: 1fr 1fr 1fr;

A look to rows

To work also on the lines it is sufficient to use “grid-template-rows” and define the number of rows and their height:

grid-template-rows: 200px 200px

If instead we defined only one row but we’re forced to go to a second row anyway, the second would have sufficient height to display the content:

grid-template-rows: 300px;
Setup for just one row

Also for the rows, I can use the fractions so as to have the same size for all the rows automatically.

Let’s play with the lines

The coolest thing about using grids is that we can actually tell a container the start point and the end point.

So let’s try to make this layout:

The goal for the next exercise

The changes are very intuitive. On each child of our container it will be sufficient to specify the start line and the end line through these four properties:
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end

.box1 {
grid-column-start: 1;
grid-column-end: 2
}
.box2 {
grid-column-start: 2;
grid-column-end: 3;
}
.box3 {
grid-column-start: 1;
grid-column-end: 3;
}

If you are a lover of shortcuts, you can also use it alone
grid-column: 1/2 (e.g. to achieve the same result in the .box1 class)
[ grid-row for the rows ]

We like simple things

Unlike those people who say CSS is hell, the “grid-areas” show us that this is not the case at all. In fact, through this property, we can visually define our code layout.

The current state of our CSS code

As you can see from the code, we defined a label for each child (typically it is convenient to use the same name as the class) and in the parent container we used the property: “grid-template-areas” to define how the various boxes would be displayed.

The code’s result

This property is very convenient because without working with lines and understanding where a block begins and ends, we can actually visualize already on the CSS how we are building our template.

In this regard, it is also possible to leave blank spaces using “.” Instead of the label.

.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas:
"box1 box2"
"box1 box3"
". box3";
margin: 100px 450px;
border: 4px solid black;
}

and this would be the output:

The code’s result

All in line …

You could rightly ask yourself the question: “but.. how to align the box in any way I want?”
With CSS-GRID they have thought of everything and since the code is super intuitive, I show you examples directly.

Adding to the container: “justify-items: center

“justify-items: center” result

Other values for this property can be:
- justify-items: end;
- justify-items: start;
- justify-items: stretch; (default value if nothing is specified)

If instead, we wanted to align the boxes vertically, we should use:
align-items: center

align-items: center” result

In this case, I have also shown you the lines so that the positioning of the box in the center can be evident.

Always for lovers of shortcuts:
place-items” sets both the “align-items” and “justify-items” properties in a single declaration.

… and for the children?

The speech is the same, with the difference that we are going to write the CSS properties in the child classes.

Horizontal alignment: “justify-self: center / end / start…”
Vertical alignment: “align-self: center / end / start …

Let’s take an example by aligning only box1.

Result by aligning only box1

Something cool to know

A really useful function for the grid-template-columns property is:
repeat (auto-fit, minmax (300px, 1fr))”
In this way, we are saying to repeat the number of columns and to adapt from a minimum of 300px to its maximum extension of 1fraction.

If, on the other hand, we wanted to introduce a gap between the columns/rows, we can apply the properties to the grid-container class:
- “grid-row-gap: 20px;”
- “grid-column-gap: 20px;

After the gap between columns and rows

Something to remember

CSS-GRIDS are joys and sorrows. If you are used to working with
float, display: inline-block, display: table-cell, vertical-align and column-* properties, these have no effect on a grid item

Conclusions

I hope I was as concise and practical as possible so that you can have fun experimenting with the fantastic layouts you want to make with grids and if you’d like to show me some of your grids work, I’ll be happy to see it.

If you like this article press 👏 clap button 50 times or as many times you want. Feel free to ask a question if you have any. Thanks a lot for reading!

--

--

Vaiz

WebDev with mainly expertise in React,Angular.Dabbled with Alexa.When not coding, you can find me dancing some JustDance choreography 🕺 or writing articles ✏️