CSS Grid Layout: How It Works

Hello, My name is Nima Owji. I'm a 15-year-old developer. Today, I want to talk about "Grid Layout" in CSS. What is it? In fact, you can create many cool designs in a minute using this layout! So let's start!

How to use "Grid Layout"?

To use grid layout, you need a "div" tag. You can also use any other container tag like "main", "aside"... After that, you need to assign a class or an ID to this tag because we want to modify it using CSS (You can use inline-CSS too).

In the CSS file, after selecting the element, we need to make it a "grid"! For that, we can simply set "display" to "grid"!

.grid {
    display: grid;
}

We have a grid now!

How to assign the number of rows and columns?

After that, we need to set the number of rows and columns for our grid. We have a number of CSS properties to do that! For example, we want to create a grid with 3 rows and 4 columns.

.grid {
    display: grid;
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: 50px 50px 50px;
}

In this case, we have 4 columns and 3 rows, but as you can see all of them are 50px and we have some redundancy here!

If you want to use different sizes for each column/row, you should write those sizes to make it happen, like what I have done, I've written "50px" four times, in order to make a grid with 4 columns and 50px for each column!

But if you want to repeat the same size for all of your columns/rows, you can use "repeat" which is in the CSS! Like this:

.grid {
    display: grid;
    grid-template-columns: repeat(4, 50px);
    grid-template-rows: repeat(3, 50px);
}

Units

As you can see, we used "px" as our unit of the columns/rows, but what if we wanted to make it responsive?!

We may want to share the available space with columns/rows. What should we do?

Grids have a special unit for this purpose! That is "fr". You can use "fr" to share the available space automatically. For example, if you want to create a grid with two columns and each column uses half of the available width, you should do something like this:

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 50px);
}

You can also use ratios, like this:

grid-template-columns: 2fr 1fr;

Gap

Grids have another cool property called "gap"! If you want to have a space between each cell, you can use "gap". That's really cool in some designs! It can be really useful like "margin" and "padding"!

Example:

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 50px);
    gap: 14px;
}

You can almost use all of those units like "px", "cm", "rem", ... for the gap.

How to put our elements in this grid?

You can simply put all of your elements in this "div" and it will automatically become a grid!

I hope you liked it!

That was all! I hope you liked this article! Don't forget to share it on social media like Twitter and mention me too! Also, don't forget to follow me on Twitter (Click here)! If you had any questions, don't hesitate to ask me, I will respond if I could! Thanks a lot!