Grid

Like tables, but better?

Grid is a layout system that allows you to create complex layouts with rows and columns. Tables also use rows and columns, but they're not as flexible and can have accessibility issues. You should still use tables for presenting tabular data, but--for layout purposes--grid is a better, modern alternative.

Grid vs Flexbox

Grid is better for creating complex layouts with rows and columns, while Flexbox is better for aligning items in a single row or column.

In practice, web developers often use both Grid and Flexbox together to have their visions come to life. Learning both will make you a more versatile developer, and will make life easier when you can reach for the right tool for the job.

Basic usage

Here's a simple example of a grid with three columns:

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

.item {
  background-color: #5d71ee;
  padding: 10px;
  border-radius: 4px;
}
Item 1
Item 2
Item 3

Notice the grid-template-columns property. This defines the columns of the grid. In this case, we're using the fr unit, which is a new unit that stands for "fraction." This unit allows you to create flexible columns that take up equal space in the grid. It's kind of like Flexbox's flex-grow property, but for columns instead of items.

You can also use fixed units like px or em to define the columns. For example, grid-template-columns: 100px 200px 300px; will create three columns with fixed widths of 100, 200, and 300 pixels.

Grid properties for the container

Here are some common properties you can use on the grid container:

Grid properties for the children

Here are some common properties you can use on the grid items:

grid-column and grid-row are actually shorthand for grid-column-start, grid-column-end, grid-row-start, and grid-row-end. You can use these properties to create more complex layouts by specifying the start and end positions of the items in the grid.

You can use negative values to count from the end of the grid. For example, grid-column: 1 / -1; will make the item start at the first column and end at the last column.

You can use the span keyword to make an item span multiple columns or rows. For example, grid-column: 1 / span 2; will make the item start at the first column and span two columns.

Other values you can use with grid-column and grid-row include auto, start, and end. These values allow you to create more flexible layouts by specifying the position of the items relative to the grid.

Quick centering

Grid makes it easy to center elements both horizontally and vertically. You can use the justify-items and align-items properties on the grid container to center the items along the row and column axes, just like with Flexbox. Or, you can use the place-items shorthand property to center the items in one go.

.container {
  display: grid;
  place-items: center;
}
Centered item

Easy stacking

Create a one column grid and force all children into that first row and column.

.container {
  display: grid;
  place-items: center;
}

.container > * {
  grid-row: 1 / -1;
  grid-column: 1 / -1;
  opacity: 0.5;
}
Item 1
Item 2
Item 3

Responsive design

Grid makes it easy to create responsive designs. You can use media queries to change the layout of the grid based on the screen size. For example, you can change the number of columns or the size of the columns to make the layout adapt to different screen sizes.

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

Demos

Resources