Ansub Khan

Posted on Nov 12, 2021 • Updated on Nov 28, 2021

CSS Grids Simplified!

#html #css #javascript #frontend

What is CSS Grid?

CSS Grid Layout is a two-dimensional grid-based layout system that is specifically designed to make the layout work easy on CSS.

Before we used to layout our web pages using tables, float, then positioning, and inline-block, but all these methods were more like hacks. Flexbox is also a good layout tool that a lot of people use but it is one-directional flow and it also has different use cases as well. Grid is the first CSS Module which is created specifically to solve the layout problems.

let's start with adding grid to the layout, I am making a simple HTML Container:

<div class="container">
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
      <div>Lorem ipsum dolor sit amet.</div>
    </div>

now let's add grid to out CSS layout:

.container {
  display: grid;
  grid-template-columns: 3fr 3fr;
  grid-gap: 1rem;
}

.container div {
  background: #eee;
  padding: 1rem;
}
/* changed nth child color to tell the difference */
.container div:nth-child(odd) {
  background: #ddd;
}

now this will give us the output of 6 divs divided into columns having 3fr (MDN defines the fr unit as a unit that represents a fraction of the available space in the grid container). you can also use px or rem even % but they are fixed. hence it is a better practice to use fr.

grid-template-columns

.container {
grid-column-columns: 3fr 3fr;
}

it specifies the number and the width of columns in a grid layout. in simple words more fr you are going to add is going to add more columns and change the value of fr is going to change the width of the specific box;

Now, in my case, I have added 2fr with the value of 3. then it will give them an equal space of 3.

if I am going to increase the fr then it is going to create more columns. you can also change the value to make one column bigger than the other one.

grid-gap

you must be wondering how I am getting the space between the spaces I used grid-gap property for gap;

.container{
grid-gap: 1rem;
}

grid-template-rows

grid-template-rows is also the same thing as we did for the column, for example, i added grid-template-rows along with grid-template-row

.container {
  display: grid;
  grid-template-columns: 3fr 3fr;
  grid-template-rows: 10fr 30fr 4fr;
  grid-gap: 1rem;
}

you can also use repeat(value, fr) to make the consistent columns or rows.

.container{
grid-template-columns: repeat(3, 1fr)
}

this is going to make 3 columns of 1fr.

grid-auto-rows

we can also increase the height of boxes we use by using grid-auto-rows.
for example, if I want to increase the height by 10rem I will type:

.container {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  grid-gap: 1rem;
  grid-auto-rows: 10rem;
}

minmax()

now if you match it with the image before this one then you are going to find out the difference between the height of the two images. if you have text which is more than the height you have given then you can use minmax(), we use this to give the min-height we need and then we can give maximum height to for the element which can also be auto where the browser is going to adjust the text inside the grid by itself.

look in this case, the text is going out of the box, and below the other box, let's add mixmax() to fix this issue.

.container {
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  grid-gap: 1rem;
  grid-auto-rows: minmax(10rem, auto);
}

justify-items, align-items & align-self, justify-self

just like we use justify-content and align-items in flex, we have the same thing in GRID as well, we call them justify-items, align-items. in order to look into that you can just look at the flex-properties they both do the same thing.

Grid Column

Shorthand property for [grid-column-start] and [grid-column-end].

grid-column: auto auto

the grid item's column start and end are automatically set.

grid-column: 1 / 3

The grid item starts before the first column and ends just before the third one.

grid-column: span 3

The grid item spans 3 columns.

grid-column: 1 / span 4

The grid items start before the first column and span for 4 columns, creating a new one in the process.

the same thing goes with grid-rows as well.

you can also buy my handwritten notes on CSS Grid which i made while learning about this topic for just $1:
Get My CSS Grid Notes

these are some advanced topics of GRID, I will recommend you this video on CSS Grids.

Thanks For Reading!

if you need any help with HTML, CSS and Javascript then you can find me on my website

you can also download my FREE NOTION TEMPLATE which is a powerful to-do list that can boost your productivity.

Click Here!

Top comments (3)

markjwood • Nov 15 '21

I think you might be misunderstanding fr units.

fr units are fractions of the available space. As you wrote it, 3fr is exactly the same as 1fr which would be exactly the same as 1000fr. You're saying basically, "divide the total space by 6 then give each column 3 of the 6 units. "

Alternatively, you might have done something like grid-template-columns: 2fr 1fr and that would make the first column take 2/3 of the available space and the second would get the remaining third. But if you want all columns to be equally divided, 1fr for each will do it.