Learn CSS Grid
Tags: css, cssgrid, webdesign, frontend
Published: 2020-01-24 21:43:19

---
title: Learn CSS Grid
published: true
description: A simple guide to CSS Gride
tags: css, css_grid, web_design, front end
---

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, that means you can handle both columns and rows, making it easier to design web pages without having to use floats and positioning.

<h2 id="top">Table Of Contents:</h2>
   [1. display](#display)
   [2. grid-template-columns](#grid-template-col)
   [3. grid-template-rows and grid-auto-rows](#grid-template-rows)
   [4. grid-gap (Gutters)](#grid-gap)
   [5. Nested Grid](#nested-grid)
   [6. Grid Lines (columns)](#grid-lines-col)
   [7. Grid Lines (rows)](#grid-lines-rows)
   [8. justify-items](#grid-justify-items)
   [9. align-items](#grid-align-items)
   [10. grid-template-areas](#grid-area)
   [11. Flexbox vs CSS Grid](#flex-grid)
   [12. Creating Simple Layout](#create-layout)
   [13. Conclusion](#conclusion)

<h2 id="display">1. display</h2>
To make an HTML element behave as a grid container, you have to set the display property with a value of grid to generates a block-level grid or inline-grid to generates an inline-level grid. All direct children of the grid container automatically become grid items.

<h2 id="grid-template-col">2. grid-template-columns</h2>
The **grid-template-columns** property defines the number of columns in your grid layout, and it can define the width of each column.

For example: if you want to divide your grid into 3 columns each one of them being 33.3% so, the value will be grid-template-columns: 33.3% 33.3% 33.3%;

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2ve86xs5vh71z7un8qk5.png)

But, if you want each columns being with different width you have to set a different value for each one like that: grid-template-columns: 50% 20% auto;

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/gcjipx5oauzpbm88bfaa.png)

another way to do the same thing is to use repeat function, if you need to divide your grid into two columns each one them their width will set to 300px so you have to set the value of grid-template-columns prop as grid-template-columns: repeat(2, 300px);

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b4uh7scgp1rob67zxnak.png)

you can also divide your grid columns equal to each other using **fr unit** for example setting the value of grid-template-columns prop as 1fr 1fr 1fr will divide the grid into three columns equal to each other in the width as each separated value act as a column.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/2ve86xs5vh71z7un8qk5.png)

If you set the grid-template-columns prop to 2fr 1fr 1fr this will also divide your grid columns equal to each other but the first column will equal to two columns in size(width).

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/c7cqe7rusjuml3sq08ng.png)

<h2 id="grid-template-rows">3. grid-template-rows and grid-auto-rows</h2>

The **grid-template-rows** property all its values work as same as the values of gris-template-columns but, it will defines the height of each row.

_**Examples:**_
setting the grid-template-row to 300px 200px 100px the result will be like this image

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/d069k3imsjtvqb6brebw.png)

setting grid-template-rows: 150px 100px 200px;

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/litvel3famm214ccy9qz.png)

setting grid-template-rows: repeat(2, 300px);

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/q6o3dnb6zywzkcek7u98.png)

and setting both grid-template-rows: 1fr 1fr 1fr; and grid-template-rows: 2fr 1fr 1fr; will act / behave as same as the grid-template-columns but, grid-template-rows will effect the height not the width.

grid-template-rows: 2fr 1fr 1fr; for example:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/i3t1bm3n8mazxfurclcs.png)

_**Minmax:**_ if you have a content that is bigger or taller than the row size(height), in this case you can use a CSS function called **minmax** which defines a size range greater than or equal to min and less than or equal to max.
**grid-template-rows: minmax(100px, auto);**
**grid-template-columns: minmax(auto, 50%);**
The minmax() function accepts 2 arguments: the first is the minimum size of the track and the second the maximum size. Alongside length values, the values can also be auto, which allows the track to grow/stretch based on the size of the content.

In this example, the first row track is set to have a minimum height of 100px, but its maximum size of auto will allow the row track to grow it the content is taller than 100px.

The first column track has a minimum size of auto, but its maximum size of 50% will prevent it from getting no wider than 50% of the grid container width.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/bp9kqz5mi16uhn716ngt.png)

<h2 id="grid-gap">4. grid-gap (Gutters)</h2>

The **grid-column-gap** and **grid-row-gap** properties create gutters between columns and rows.

Grid gaps are only created in between columns and rows, and not along the edge of the grid container. grid-gap is shorthand for grid-column-gap and grid-row-gap.
If two values are specified, the first represents grid-row-gap and the second grid-column-gap.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/1tdupj1k3ryaj6l6ic8c.jpg)

💡Note💡: The image above show a gap between rows larger than 20px because I was setting a margin: 5px;
grid-gap: 20px;
One value sets equal row and column gaps.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/36ytsqq5f5yc32tdhf6i.png)

<h2 id="nested-grid">5. Nested Grid</h2>

Do you know that you can create a grid inside another grid? yes, let's see how?
If we need to create a grid for the paragraph elements inside the div with the **class of nested-grid** in the below image

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xq1dsq44h2huk0riu150.png)

so, we have to give the div with class nested grid a display: grid, because it becomes the parent element for the paragraph elements and you can set the css grid properties we learned above to create the grid like that:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/tjvltkzy64ekcnvkregx.png)

the result:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/10y28y08q1qn0mydp0nm.png)

<h2 id="grid-lines-col">6. Grid Lines (columns)</h2>

Grid lines are essentially lines that represent the start of, the end of, or between column and row tracks.

Each line, starting from the start of the track and in the direction of the grid, is numbered incrementally starting from 1.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9pw9ublg9rg82d7orlyb.jpg)

This 4-column by 4-row grid results in 5 column lines and 5 row lines. Item 6 was repositioned by row and column line numbers.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/b2u6l6i6jtwq2jm78d2d.png)

grid-column is shorthand for grid-column-start and grid-column-end.

If one value is provided, it specifies grid-row/column-start, like this: **grid-column: 1**

If two values are specified, the first value corresponds to grid-column-start and the second grid-column-end, and must be separated by a forward slash / like this: **grid-column: 2 / 4**

<h2 id="grid-lines-rows">7. Grid Lines (rows)</h2>

grid-row also work as grid-column but it will effect the height of the row insted. grid-row is shorthand for grid-row-start and grid-row-end.

If two values are specified, the first value corresponds to grid-row-start and the second grid-row-end, and must be separated by a forward slash /.
Like this: **grid-row: 1 / 4**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/utd1ny4umvbbpzweaoyo.jpg)

<h2 id="grid-justify-items">8. Justify Items</h2>

Aligns grid items along the inline (row) axis. This value applies to all grid items inside the container. justify-items are applied to the grid container and support the following values:

**justify-items: start;** Items are positioned at the start of the row axis

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/qrhi1oev8481emoj3ki3.png)

result: ![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/jwulzpb96kee19tpn216.png)

**justify-items: end;** Items are positioned at the end of the row axis.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/l7ther6scypf1f3s3b4n.png)

**justify-items: center;** Items are positioned at the end of the row axis.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ebuvq44fdpywscxdrcxr.png)

A simple GIF (44 seconds) as a brief for the three values of **justify-items** click [here](https://send.firefox.com/download/95091a6bce5199d0/#Apco8BJzNdvrQlBxD9KUKw)

<h2 id="grid-align-items">9. Align Items</h2>

align-items align items along the column axis.

**align-items: start;**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/vsqfyiimqu3a54n2u6an.png)

**align-items: center;**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3grmh6a21xvol543c7vl.png)

**align-items: end;**

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/5dgm7u2nnw5gkiu7l0dz.png)

justify-items and align-items are applied to the grid container and support the following values:

* start
* center
* end
* stretch
* baseline
* auto
* normal

<h2 id="grid-area">10. grid-template-areas</h2>

grid areas can be named with the grid-template-areas property. Names can then be referenced to position grid items.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/58sf1lfcopbdx6be2gk6.png)

Sets of names should be surrounded in single or double quotes, and each name separated by a whitespace and each set of names defines a row, and each name defines a column.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/xpmu2q5yonf28h6l3o7z.png)

**Leaving a grid cell empty**

We have completely filled our grid with areas in that 👆 example, leaving no white space. However you can leave grid cells empty with this method of layout. To leave a cell empty use the full stop / period character, **.**.

example:

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/oa8xqfo57xw9ubn07ip2.png)

result: 

<figure>
   <img src="https://thepracticaldev.s3.amazonaws.com/i/944gmq7s04m3q048o8rq.png">
   <figcaption>A screenshot from **Mozila Developer Edition**</figcaption>
</figure>

<h2 id="flex-grid">11. Flexbox vs CSS Grid</h2>

The basic difference between CSS Grid Layout and CSS Flexbox Layout is that flexbox was designed for layout in one dimension - either a row or a column. Grid was designed for two-dimensional layout - rows, and columns at the same time. The two specifications share some common features, however, and if you have already learned how to use flexbox, the similarities should help you get to grips with Grid.

In addition to the one-dimensional versus two-dimensional distinction, there is another way to decide if you should use flexbox or grid for a layout. Flexbox works from the content out. An ideal use case for flexbox is when you have a set of items and want to space them out evenly in a container. You let the size of the content decide how much individual space each item takes up. If the items wrap onto a new line, they will work out their spacing based on their size and the available space on that line.

Grid works from the layout in. When you use CSS Grid Layout you create a layout and then you place items into it, or you allow the auto-placement rules to place the items into the grid cells according to that strict grid. It is possible to create tracks that respond to the size of the content, however, they will also change the entire track.

A simple question to ask yourself when deciding between grid or flexbox is:

* Do I only need to control the layout by row or column? Use a flexbox.
* Do I need to control the layout by row and column? Use a grid.

| Tables        | Flexbox | CSS Grid|
| ------------- |:-------------:| -----:|
| Pros     | Flex can be arranged in any direction, flex can have its visual order reversed or rearranged, items can be aligned in your container or between them and support all browsers. | Grid tracks are created within your stylesheet, reduced file sizes, prototyping with CSS Grid is fast and efficient.|
| Cons | Performance issues | Not supported by every browser |

If you need to know more about the difference between **Flexbox** and **CSS Grid**, and want to know when to use them? I will leave some sources for you in the [_**conclusion**_](#conclusion) section.

<h2 id="create-layout">12. Creating Simple Layout</h2>

This is a simple layout created using Flexbox and CSS Grid. You will find the source files in Github.com in the **Conclusion Section** at the end of the post.

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ci2w7mg0qcgd4fb1fs3w.png)

<h2 id="conclusion">13. Conclusion</h2>

The source files of this post is [here](https://github.com/moatefdev/Learn_CSS_Grid) on My Github.com

## Resources:

* [Learncssgrid.com](https://learncssgrid.com/)
* [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) in CSS Tricks
* [cssgrid.io](https://cssgrid.io/)
* [Basic Concepts of grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout) in MDN

### Another sources for **Flexbox vs CSS Grid**

* [Quick! What’s the Difference Between Flexbox and Grid?](https://css-tricks.com/quick-whats-the-difference-between-flexbox-and-grid/)
* [Does CSS Grid Replace Flexbox?](https://css-tricks.com/css-grid-replace-flexbox/)
* [The main differences between Flexbox and CSS Grid](https://www.freecodecamp.org/news/the-main-differences-between-flexbox-and-css-grid-667c03461d2b/)
* [Flexbox vs. CSS Grid: Which Should You Use and When?](https://webdesign.tutsplus.com/articles/flexbox-vs-css-grid-which-should-you-use--cms-30184)

***

[⬆Go to top⬆]()