Learn CSS Grid “The Easy Way”!

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. In this article, we will explore the basics of CSS Grid with a step-by-step guide. Readers will discover how to create complex, responsive web designs using rows and columns with CSS Grid.

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 on 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 the grid to set the width, which is grid-template-columns.

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

So, this gives us two columns, each having 50% width.

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

CSS

 

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

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

KEY-POINT:- Instead of using % or pixels, we use fr(fraction) in grid-template-columns value. for ex. 1fr, 2fr, 1/2fr...etc.

CSS

 

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

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

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

CSS

 

.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 the 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.

Now 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 above-shown properties, 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...