Understanding CSS Grid

According to Wikipedia, a CSS grid enables one to create complex responsive web design layouts more easily and consistently across browsers. In simple terms, a CSS grid enables us to lay out elements in rows and columns such that they look good on both mobile and desktop devices.

In this article, I am going to discuss the grid basics as well as their importance in developing responsive web applications.

Why CSS grid?

CSS grid is a very useful layout system in CSS. Before developers used the float property to lay out elements, this was not very efficient as it was difficult to center elements and hence the introduction of the grid. Some of the grid benefits are:

Allows developers to create flexible and dynamic layouts that adjust to different screen sizes and devices.
Enables one to develop unique and creative layouts as the developer has total control of how they are going to place elements on the page.
It makes the process of creating complex layouts faster and much simpler.

Basic concepts of CSS grid

Here we have a grid container and grid item. So what are they? A grid container is an element with the display set to the grid, i.e. display: grid; while a grid item is a direct child of this container which is displayed as a grid. As we have seen, to use the grid, just display the element container using grid or grid-inline;

.grid-container {
    display: grid;
}

The above code creates a single-column grid container where the grid items are stacked below one another. Now, all the direct children of the grid container class are grid items. Now we can style these children to meet our layout needs using: grid-template-columns; and grid-template-rows; on the grid container.

The grid-template-columns property defines the columns. You can specify the width, size, and number of columns in the grid.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

fr - This unit allows you to set the size of an element as a fraction of the available space.

In the above code, we will have three columns each column taking a third of the available space. The code can also be written using the repeat function which allows you to state repeating parts. For example:

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

The grid-template-rows define the rows of a grid container. It allows you to specify the height, size, and number of rows in a grid container.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr;
}

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

Gaps are spaces between each column and row. You can set the gap for both columns and rows using the CSS shorthand gap: 12px; or specify different gap sizes using row-gap for row and column-gap for column

.grid-container {
    display: grid;
    grid-template-column: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 10px;
}

Grid lines are virtual lines that define the rows and columns in a grid container. They are used to position grid items. Column lines are lines between columns while row lines are between rows. These are specified on the grid items.
```
  .grid-item-one {
      grid-column-start: 2;
      grid-column-end: 3;
      grid-row-start: 1;
      grid-row-end: 2;
  }
```
The above code places an item in the second column, first row.

The grid-column-start and grid-column-end can be written using the shorthand grid-column .The syntax for grid-column is syntax is grid-column: grid-column-start / grid-column-end;

For example:
```
  .grid-item-one {
      grid-column: 1 / 4;
  }
```
The item above will span across columns one to the fourth column.

For the grid-row-start and grid-row-end we have grid-row. Its syntax is grid-row: grid-row-start / grid-row-end;
```
  .grid-item-one {
      grid-row: 2 / 4;
  }
```
The item above will span from the second row to the fourth row.

Grid-template-areas specifies how the columns and rows of a grid container are displayed using named grid items.

  .grid-container {
      height: 100vh;
      display: grid;
      grid-template-column: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      grid-template-areas:
          'header header header'
          'sidebar main main main'
          'footer footer footer footer'
  }

  .grid-item-one {
        grid-area: header;
        background-color: red;
      }

    .grid-item-two {
      grid-area: sidebar;
      background-color: blue;
    }

    .grid-item-three {
      grid-area: main;
      background-color: green;
    }

    .grid-item-four {
      grid-area: footer;
      background-color: yellow;
    }

Each row in your declarations must have the same number of items.

Result:

To control the horizontal and vertical alignment of grid items in a grid container, we use justify-items and align-items properties. Let's discuss them below:
Justify-items aligns all grid items inside a grid container along the row axis (inline). Justify-items values are:
stretch: items are stretched to fill the grid cell. This is the default alignment.
start: items are aligned at the start of the grid cell.
end: items are aligned at the end of the grid cell.
center: items are aligned at the center of the grid cell.

.grid-container {
    justify-items: stretch | start | end | center;
}

align-items aligns all the grid items along the column or vertical axis. The alignment-items values are:
- stretch: items are stretched to fill the grid cell. This is the default alignment.
- start: items are aligned at the start of the grid cell.
- end: items are aligned at the end of the grid cell.
- center: items are aligned at the center of the grid cell.

In this article, we have looked at the CSS grid and its usage in creating better web layouts. I hope you found this article helpful.

Understanding CSS Grid

Table of contents

Why CSS grid?

Basic concepts of CSS grid