Tutorial: CSS Grid

CSS Grid

CSS Grid is a powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system.

Basic Terminology

Before diving into the details of CSS Grid, it's important to understand some basic terminology:

Grid Container: The element on which display: grid is applied. It's the direct parent of all the grid items. In our example we’ll be referring to .container as our grid container.
Grid Item: The children (direct descendants) of the grid container.
Grid Line: The dividing lines that make up the structure of the grid. They can be either vertical ("column grid lines") or horizontal ("row grid lines").
Grid Cell: A single unit of the grid.
Grid Track: The space between two adjacent grid lines. This can be a row or a column.
Grid Area: Any area of the grid bound by four grid lines.

Basic Grid Structure

To get started with CSS Grid, we need to define a grid container. We do this by using the display property with the value of grid.

.container {
  display: grid;
}

Defining Columns and Rows

Inside the grid container, you define your columns and rows. You can do this using grid-template-columns and grid-template-rows.

.container {
  display: grid;
  grid-template-columns: 200px 400px auto;
  grid-template-rows: auto 100px;
}

In this example, the grid will have three columns; the first will be 200px wide, the second 400px, and the third will automatically take up the remaining space. For the rows, the first row's height will be as large as its content, and the second row will be 100px.

Grid Gaps

To create some space between your grid items, you can use grid-gap, grid-row-gap, and grid-column-gap.

.container {
  display: grid;
  grid-template-columns: 200px 400px auto;
  grid-template-rows: auto 100px;
  grid-gap: 20px;
}

Grid Auto Flow

The grid-auto-flow property controls how the auto placement algorithm works. It specifies exactly how auto-placed items get flowed into the grid.

.container {
  display: grid;
  grid-template-columns: 200px 400px auto;
  grid-template-rows: auto 100px;
  grid-gap: 20px;
  grid-auto-flow: row;
}

In this example, the grid items will be placed from left to right across the rows. If you set grid-auto-flow to column, the items would be placed from top to bottom down the columns.

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc. project with a clean, prebuilt and well documented template and UI components. Learn more about contrast.

Blog

Sampson Ovuoba

CSS Grid

Basic Terminology

Basic Grid Structure

Defining Columns and Rows

Grid Gaps

Grid Auto Flow

Resources

Join Our Newsletter. No Spam, Only the good stuff.

Related