CSS Grid — The Answer to Two-Dimensional Layouts

After completing this topic

You will understand how to create row and column-based layouts using CSS Grid.

When Flexbox Isn't Enough

Flexbox is one-dimensional. It arranges items in a single direction, either horizontally or vertically. However, for layouts where you need to control both rows and columns, such as a dashboard, it has limitations.

CSS Grid is a two-dimensional layout system. It allows you to define rows and columns simultaneously and place items in the desired cells.

Basic Usage

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 60px 1fr 40px;
  gap: 16px;
}

This creates a 3-column, 3-row layout. 1fr means "take up the remaining space" (fraction). The left column is 200px, the middle column takes up the rest, and the right column is 200px.

The fr Unit

grid-template-columns: 1fr 2fr 1fr;

This divides the remaining space proportionally. With a ratio of 1:2:1, the middle column will have twice the width of the other two columns. You can also mix it with pixels:

grid-template-columns: 250px 1fr;

The left column is a fixed 250px, and the right column takes up all the remaining space.

repeat — Repeating Patterns

When you need to use the same column multiple times:

/* Equivalent expressions */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-columns: repeat(4, 1fr);

Responsive card grid:

grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

"At least 250px, distribute evenly if there is space, and wrap if there is not enough space." This single line creates a responsive card grid. Without media queries.

Item Placement

You can place specific items in the desired cells:

.header {
  grid-column: 1 / -1; /* From the first line to the last line (full width) */
}

.sidebar {
  grid-row: 2 / 4; /* From the second line to the fourth line (occupies 2 rows) */
}

grid-column: 1 / 3 occupies two columns, from the first vertical line to the third vertical line. -1 represents the last line.

grid-template-areas — Visual Placement

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content aside"
    "footer footer footer";
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: 60px 1fr 40px;
}

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

You can draw the layout visually in CSS.

Grid vs. Flexbox

You can use both. They have different roles:

Flexbox: One-dimensional layout. Navigation bars, button groups, aligning content within cards. Grid: Two-dimensional layout, controlling both rows and columns. Entire page layout, dashboards, card grids.

Typically, you use Grid for the overall layout and Flexbox to align the smaller elements within it.

Key Takeaways

CSS Grid is a two-dimensional layout system that controls both rows and columns. Use the fr unit to divide the remaining space proportionally, and repeat(auto-fill, minmax(...)) to create responsive grids. It is common to use Grid for large layouts and Flexbox for aligning smaller elements.