A Beginner's Guide to CSS Grid Layout

• CSS Grid is a layout system for the web, allowing developers to create complex, responsive designs using rows and columns.
• Grid is used to make complex web design layouts more easily.

Let’s get into it.

First things first, we have to make a div and give it a class of containers or anything you want.

<div class="container">
  <div>one</div>
  <div>two</div>
</div>

After creating our div, let's go to our CSS and start applying the grid to it. we assign our container a display property of the grid.

.container{
display: grid;
}

Now, After assigning display: grid; nothing happens, because we didn't set the width of the container, so for that, there is a different property in Grid to set the width which is "grid-template-columns".

.container{
display: grid;
grid-template-columns: 50% 50%;
}

So, this gives us Two Columns of each having 50% width.

NOTE: There is a Short-hand property to write grid-template-columns,

.container{
display: grid;
grid-template-columns: repeat(2, 50%);
}

The "repeat()" property works the same as the above values which are 50% & 50%, but, here instead of writing 50% twice, we set it to repeat() and then "2" which means to create "2" columns & then "50%" which means to set a width of 50%.

.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
}

"fr" works very well and it's very important to add for the responsiveness of the website.

Now, if we want spaces b/w our grids, then the property for that in Grid is "gap or grid-gap or row-gap/column-gap".

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

• This grid-gap property gives us a space of 10px around our rows and columns.

• If you want to add a gap in b/w rows or columns, you can use a property of row-gap or column-gap.

.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
row-gap: 10px;
} 

or or or

.container{
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 10px;
}

Now, in order to add some height to our container, we use a property in grid called "grid-template-rows".

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

But there's a catch in "grid-template-rows", Now from the above given example, you might think that what if our content is more than 200px and then our content starts overflowing and it doesn't look good on layouts, So what might be the solution here. You must be thinking, oh, I wish there would be a property that adjusts itself according to the content...... and guess what, there is a property for this called "grid-auto-rows".

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

• Now, in the "grid-auto-rows" property you write minmax(), and in between parenthesis, you add two values. In the above examples, we add "200px" as a minimum value and "auto" as a maximum value.

• If our content is less than 200px or exactly 200px there won't be any issue and it gets fit in easily, but if our content is more than 200px, let's say 300px, then our auto property works and our rows will adjust according to the content size and fit in easily without overflowing.

There are more grid properties, but I think if you practice the ones shown above, you will easily create a very good and responsive layout. Keep in mind that by doing just the above-shown examples you cannot create a layout, you have to add the margin, padding, and all other basic properties.

That's it for the CSS Grids from my side, feel free to leave feedback and areas where I should improve myself as I am currently learning......

Also published here.