DEV Community

Devwares profile image Sampson Ovuoba
Sampson Ovuoba for Devwares

Posted on • Originally published at devwares.com on

Tutorial: CSS Grid

Cover image

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.

grid image

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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.

Resources

Top comments (0)

Read next

bhusan profile image

Shell Scripting: Basic Commands to just get you start scripting

Basanta Bhusan Khadka -

remitache profile image

Discovery: Screenity - A powerful open-source screen capture tool

Remi -

philip_zhang_854092d88473 profile image

Securing REST APIs: A Comprehensive Guide to NTLM Authentication

Philip -

railsdesigner profile image

Rails Designer v1.8: Ready for Rails 8 🫶

Rails Designer -