CSS Grid Layout

Create powerful two-dimensional layouts with CSS Grid

Introduction to CSS Grid

CSS Grid Layout is a two-dimensional layout system designed for the web. It lets you lay out items in rows and columns, and has many features that make building complex layouts straightforward.

.container {
  display: grid;
}
                    

This simple property transforms the container into a grid container and all its direct children into grid items.

Basic Grid Columns

The grid-template-columns property defines the number of columns in your grid layout, and it can accept different value types.

Two Equal Columns (1fr 1fr)

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

Three Equal Columns (1fr 1fr 1fr)

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

Mixed Column Sizes (100px 2fr 1fr)

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

Grid Gap

The grid-gap property defines the size of the gap between rows and columns.

Grid Gap (20px)

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 20px; /* shorthand for grid-row-gap and grid-column-gap */
}
                    

Grid Template Areas

The grid-template-areas property specifies named grid areas, establishing the cells in the grid and assigning them names.

Content

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto 1fr auto;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
                    

Grid Line Placement

You can place items precisely by referring to line numbers.

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

.item1 {
  grid-column: 1 / 3; /* start at line 1, end at line 3 */
  grid-row: 1 / 2;
}

.item2 {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

/* ... and so on for other items */
                    

Auto-fit and Auto-fill

The auto-fit and auto-fill keywords allow you to create responsive grids without media queries.

Auto-fit (resize the browser to see the effect)

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
                    

Responsive Grid

CSS Grid can be combined with media queries for responsive layouts.

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

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

Practical Example: Page Layout

A common use case for CSS Grid is creating full page layouts.

Main Content

Article 1

This is some sample content for the first article.

Article 2

This is some sample content for the second article.

.grid-layout-example {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header header"
    "sidebar content content content"
    "footer footer footer footer";
  height: 400px;
  gap: 10px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }
                    

Success!