Mastering CSS Grid Layouts

For years, web developers relied on hacks, floats, and framework grid systems to create complex webpage layouts. Then came Flexbox, which revolutionized 1D layouts. Now, we have CSS Grid, the ultimate native tool for 2D layouts.

Defining a Grid

Creating a grid is as simple as defining a container:

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-gap: 20px;
}

This code creates a three-column layout where the left and right columns are exactly 200px wide, and the middle column takes up the remaining available fraction (1fr) of the space.

Grid Areas

One of the most powerful features of CSS Grid is grid-template-areas. It allows you to visually construct your layout in your CSS file:

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main ad"
    "footer footer footer";
}

.sidebar {
  grid-area: sidebar;
}

CSS Grid is supported in all modern browsers. If you aren’t using it yet, it’s time to dive in!