Understanding CSS Grid

A guide for beginners

4 min readNov 30, 2020

CSS Grid provides a flexible layout module to design web pages without having to deal with float and position. The layout module deals with two dimensional, that means both with rows and columns.

There are some basic terminology we need to understand in order to understand the concept of Grid.

Grid-Container

display:grid

First we have to understand where we have to use CSS grid, on the page or a specific element, then we have to give the display property.

display: grid;

Grid-Elements

A grid layout consists of a parent element, with one or more child elements.

Gird Columns

First putting grid container to the specific element we need to specify the rows and columns. To put rows we have to follow the below syntax.

Grid Rows

Just like columns we can also define rows. A nice thing here is that you can pass a lot of values and units inside of it, and you can mix them as well. Let’s imagine that we want to create 3 rows, one with 25%, other with 400px, and the last one with 1fr (a new CSS unit):

grid-template-rows: 25% 400px 1fr;

Grid Gap

We can provide gap in between rows as well as columns using this property. We can give gap value in three ways like grid-gap, grid-column-gap and grid-row-gap

The grid-row-gap property defines the spaces between rows of grid items. Let us take an example and set the gap between rows 10px.

.grid-container {
    display: grid;
    background-color: #C2272D;
    grid-template-columns: auto auto;
    grid-row-gap: 10px;
}

The grid-column-gap property controls the gap between columns of grid items.

Example:

.grid-container {
    display: grid;
    background-color: #C2272D;
    grid-template-columns: auto auto;
    grid-column-gap: 20px;
}

The grid-gap is a shorthand property for both grid-row-gap and grid-column-gap. It will add space for both rows and columns for grid items.

Example:

grid-container {
    display: grid;
    background-color: #C2272D;
    grid-template-columns: auto auto;
    grid-gap: 20px;
}

Justifying Content

This property of CSS grid allows us to align grid items horizontally that means from left to right. It can be used for different values for a specific purpose. There are various values like start, center, end, space-between and many more. We will get a better understanding by looking at the following examples.

We will be taking one CSS example, but feel free to try different examples with different values.

HTML

<div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
</div>

CSS

.grid-container {
    display: grid;
    background-color: #C2272D;
    grid-template-columns: auto auto auto auto;
    justify-content: start;
}

Here we have used start as value for the justify-content, but you can change to different values, Let us see how the layout varies by different values.

Results:

align-content

This property works exactly like justify-content property, but the only difference is when we want to modify the layout and design out grid items vertically we can not do that using justify-content, and in this situation align-content is very much useful, It arranges the grid items vertically. Just like justify-content, it also has some values and according to that layout appears.

One thing important here is that we had to set the grid-container’s height to be greater than that of the grid items, or else align-content property wouldn’t have any effect.

We will be taking one value for the align-content property but you can try for different values