Basic CSS Grid
Tags: css, html, webdev, codenewbie
Published: 2020-10-08 10:11:47

CSS grid is a css module used to make stuffs like these:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6nokkv9i6wxjiv7a2vpg.jpg)
<h4>It is used for css layouts and positioning.</h4>

To a beginner, css grids comprises of unclear terms that makes it seem so confusing at first glance.

The grid property comprises of Rows and Columns.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/94y8bb6iwo22j1ywncqf.jpg)
<p>From the picture above,</p>

The Students;
<blockquote>
<i>Elvis, Charles, and James</i> are in the <b>first column.</b><br>
<i>Steve, Joe and Peter</i> in the <b>second column.</b><br>
<i>Dan, Jake and Paul</i> in the <b>third column.</b><br>
The <b>fourth column</b> consists of <i>Clair, Martha and Jane.</i>
</blockquote>
Which amounts to 4 columns.

Also,
<blockquote>
<i>Elvis, Steve, Dan and Clair</i> occupy the <b>first row</b>.<br>
<i>Charles, Joe, Jake and Martha</i> in the <b>second row</b>, and<br>
<i>James, Peter, Paul and Jane</i> in the <b>third row</b>.
</blockquote>
Thus, 4 columns and 3 rows.

In the pictures below, we have 3 rows on the first column and 2 rows on the second column.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xwinsozda5w8jjg7ct2y.jpg)

<p>
Now that we have established what Rows and Columns are;
We can apply these knowledge to css grid layouts.
</p>
The arrangement below is a block of 4 columns and 2 rows.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/lmhex461gqey9hvru159.jpg)

Let's read on and find out how this magic was done!
In the HTML code, we have:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/pfpfjmbrlwgki0ohls8z.jpg)

Now, the styling:

Firstly, our blocks need to be placed in a container which is the <em>section</em> tag in our HTML code.
Next,
We set the <em>section</em> tag's display to grid to let our browser know that everything in the <em>section</em> tag should be displayed in a grid layout.
<pre>
.container{display:grid;}</pre>

<p>
Try running these code and you'd see no changes.
At least not yet.
</p>

Moving on,
We need to tell our browser the number of Rows and Columns we want our blocks to file in.
To do these;
Type,
<pre>
.container { 
  display: grid;
  grid-template-rows: repeat ;
  grid-template-columns: repeat ;
}
</pre>
Don't run anything yet.
Let's explain these.

Since we're creating 2 rows and 4 columns;
Our styling goes thus:
<pre>
.container { 
  display: grid;
  grid-template-rows:repeat(2, );
  grid-template-columns: repeat(4, );
}
</pre>

Wait! Wait!!
Still incomplete;
we need to state a specific width and height for each block.

We could style each of the blocks individually but that'll take time and also will result in ambiguous codes.
So, Way to go about it?
Very Easy.
Add this to your css style:
<pre>
.container { 
  display: grid;
  grid-template-rows: repeat(2,60px);
  grid-template-columns: repeat(4,1fr);
}
</pre>

Here,
60px represents the height and 1fr represents the width for each blocks.
Of course,
You can use any values (or even set to auto) and any units (px, em, fr, %, etc).
Try playing around with the Rows and Columns until you gain adequate mastery of CSS grids.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vhxyj6xkazxzd28yf95m.jpg)

Yeah,
Looks nice but there's a teeny-weeny problem, which is spacing.
To space CSS grids we use <strong>grid-gap.</strong>

The grid-gap property is very much similar to css margin and they work the same way around blocks/elements.

The same way,
 Margin: 50px is interpreted as:
<pre>
margin-top: 50px
margin-bottom: 50px
margin-right: 50px
margin-left: 50px </pre>   And

 Margin: 20px 30px is interpreted as: <pre>
margin-top: 20px
margin-bottom: 20px
margin-right: 30px
margin-left: 30px;</pre>

The same principle applies to grid-gap such that;
 Grid-gap: 50px is interpreted as: <pre>
grid-row-gap: 50px
grid-column-gap: 50px </pre>     And

Grid-gap: 20px 30px is interpreted as: <pre>
grid-row-gap: 20px
grid-column-gap: 30px;</pre>

Now,
Let's update our CSS code:
<pre>
.container { 
  display: grid;
  grid-template-rows: repeat(2,60px);
  grid-template-columns: repeat(4,1fr);
  grid-gap: 10px;
}
</pre>

<b>Voila!</b>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8liqvpyh90n5wzk2v6fj.jpg)

<h4>
<p>Note: Code snippets posted here includes the grid styling only and as such cannot output exact color and other stylings as in display pictures.</p>
To get the full code,
You can fork this pen:
<a href="https://codepen.io/devhalimah/pen/eYzYKLa">
https://codepen.io/devhalimah/pen/eYzYKLa/
</a>
</h4>