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

Image for post
Image for post
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.

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.

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.

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

style.css

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.

Image for post
Image for post
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.

Image for post
Image for post
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.

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:

Image for post
Image for post
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:

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

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.

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

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:

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:

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

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:

Image for post
Image for post
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.

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:

Image for post
Image for post
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

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 ]

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.

Image for post
Image for post
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.

Image for post
Image for post
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.

and this would be the output:

Image for post
Image for post
The code’s result

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

Image for post
Image for post
“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

Image for post
Image for post
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.

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.

Image for post
Image for post
Result by aligning only box1

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;

Image for post
Image for post
After the gap between columns and rows

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

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!

👨‍💻 Software dev ~ Frontend fan 🧙 ~ Alexa & AmazonSumerian enthusiast 🔮 ~ Those who can imagine anything, can create the impossible 💙

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store