Introduction

Contrary, to the Flexbox CSS Layout method that organizes content either horizontally or vertically (in one dimensional space), the grid layout method organizes content in two dimensional space, using both rows and columns. This layout method is of great use when designing web layouts that form a grid in arranging the containing elements.

This tutorial is basically a primer to the grid layout module. We shall basically give an overview of how the various grid properties work, focusing on properties that affect the grid container. For properties that affect the grid items, check out this link.

Grid Layout Properties

Grid layout properties exist in two forms: properties which can be applied to the container and those that can be applied to the children of the container. The container acts as the parent. By children, we mean the immediate descendants of the container. Its worth noting that certain properties apply to only the grid container while others apply to only the grid items or children.

Properties that apply to the grid container:

• display
• grid-template-columns
  
• grid-template-rows
  
• column-gap
  
• row-gap
  
• gap
  
• align-content
• justify-content
  

Properties that apply to the grid items (children):

• grid-column-start
• grid-column-end
  
• grid-column
  
• grid-row-start
  
• grid-row-end
  
• grid-row
• grid-area

Let us use the HTML snippet below, and then see how the above properties can be used to create a grid layout out of it.

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

How to create a Grid Container

The display: grid; property applies to the container, makes the container a block element, and enables the grid layout for all its direct children.

.grid-container { 
    display: grid;
}

The display: inline-grid; works in the same way. Only that it creates a grid container as an inline element.

.grid-container { 
    display: inline-grid;
}

How to organize grid items in rows and columns

If you want to arrange the grid items in two dimensional space, using both rows and columns, you specify both the grid-template-columns and grid-template-rows properties on the container. The former specifies the number of columns and the width of each column in the grid whereas the latter specifies the number of rows and height of each row in the grid

To create a grid with two rows and three columns, we use a code snippet shown below;

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto;
    grid-template-rows: 300px 300px;
}		    
.grid-item {
    text-align: center;
    line-height: 300px;
    font-size: 6em;
    color: white;
    font-weight: bold;
    font-family: "Arial Black";
}
.grid-item:nth-child(1) {
    background-color: red;
}
.grid-item:nth-child(2) {
    background-color: orange;
}
.grid-item:nth-child(3) {
    background-color: gold;
}
.grid-item:nth-child(4) {
    background-color: green;
}
.grid-item:nth-child(5) {
    background-color: blue;
}
.grid-item:nth-child(6) {
    background-color: indigo;
}

The code above creates a grid shown below.

Here grid-template-columns: auto auto auto; specifies three columns, each of the auto value specifies a column width, which in this case is applied automatically, each column filling up the available space equally. The grid-template-rows: 300px 300px; specifies two rows, each row having a height of 300px. The are various ways of specifying the column widths or row heights and some of these are:

• Length: This value is any non-negative CSS length, such as px, em and rem
• Percentages: These are relative to the size of the grid container. This is handy when creating responsive grid layouts.
• Flex: This is a non negative value expressed in fr units and allows you to create flexible grid tracks by specifying the width as a fraction of the available space in the grid container.
• minmax(min, max): This accepts two arguments, a minimum and maximum length value. It simply tells the grid container that its columns or rows can never be narrower than the minimum value and never wider than the maximum value
• auto: The auto ensures that length values are applied automatically to the grid-container taking up all available space. In most cases, this value behaves similarly to minmax().
• repeat(col_number, col_width): This function that defines the number of grid template columns. The function takes the number of columns (col_number) and the column width or size (col_width)

The different ways are illustrated below;

/* Values */
grid-template-columns: 200px 1fr 180px;
grid-template-columns: 25% 50% 25%;    
grid-template-columns: 1fr 2fr;
grid-template-columns: minmax(200px, 1fr) minmax(100px, 1fr);
grid-template-columns: repeat(4, 1fr);

Adding space between rows and columns

In case you need to add space between the rows or columns, use the following properties:

• column-gap: Specifies the horizontal spacing between columns
• row-gap: Specifies the vertical spacing between rows
• gap: Its a short hand way of specifying both the horizontal and vertical spacing

.grid-container { 
    column-gap: 20px;
    row-gap: 20px;
    gap: 20px 30px; /* column-gap = 30px and row-gap = 20px */
    gap: 20px;      /* column-gap = 20px and row-gap = 20px */
}

Aligning items in the grid container

To align the whole grid within the container vertically, use the justify-content property that takes on the following values:

• space-between
• space-around
• space-evenly
• center
• start
• end

.grid-container { 
    justify-content: space-around | space-between | space-evenly | start | center | end;
}

The effect of these property values when applied to a grid-container is depicted below:

To align the whole grid within the container vertically , use the align-content property that takes on the same values as justify-content

.grid-container { 
    align-content: space-around | space-between | space-evenly | start | center | end;
}