Master CSS Grid: From Basics to Advanced Layout Techniques

Why Grid is needed

Historically we used table layouts, then float, position, and inline‑block for layout, which were originally meant for content flow and not for layout, leading to limitations such as difficult vertical centering and the need for hacks like overflow:hidden or clear:both.

In 2009 the W3C introduced Flexbox, a one‑dimensional layout model that positions items along a single axis, but it struggles with complex two‑dimensional layouts.

CSS Grid is the first layout system designed specifically for two‑dimensional layouts, dividing a container into rows and columns and placing items into grid cells.

Frameworks such as Bootstrap and Foundation provide grid‑like templates, but they implement grids using floats rather than true CSS Grid, which is fundamentally different.

Traditional web layout was based on float, resulting in a one‑dimensional model that considers rows first. The following image shows a simple two‑column layout that actually uses rows for positioning.

In contrast, CSS Grid layouts think in terms of a two‑dimensional system of rows and columns, as illustrated below.

The diagram shows a grid system with both rows and columns, similar to how React/Vue hooks change the way we think about component state.

Introducing Grid basic concepts

Before diving into Grid, it is important to understand its terminology to avoid confusion.

Grid Container

Setting display: grid on an element makes it a Grid Container; its direct children become Grid Items.

<style>
.container {
  display: grid;
}
</style>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

Grid Item

A direct child of a Grid Container is a Grid Item; nested elements (e.g., .sub-item) are not Grid Items.

<style>
.container {
  display: grid;
}
</style>
<div class="container">
  <div class="item"></div>
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Grid Line

Grid lines are the horizontal or vertical boundaries that define rows and columns; the yellow line in the image below represents a column grid line.

Grid Cell

A Grid Cell is the space between two adjacent rows and two adjacent columns, forming a single unit of the grid.

Grid Area

A Grid Area can span multiple cells; the yellow region in the image below illustrates such an area.

Start using Grid

grid-template-columns / grid-template-rows

The following diagram shows a grid with 3 rows and 6 columns.

There are 4 grid lines vertically and 7 horizontally; the two extra grid lines before the area form a grid area, and each cell is shown in green.

CSS to create this layout is straightforward:

.grid {
  display: grid;
  grid-template-columns: 100px 100px 100px 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

Using repeat() simplifies the code:

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

Add spacing with the gap property:

.grid {
  display: grid;
  grid-template-columns: repeat(6, 100px);
  grid-template-rows: repeat(3, 100px);
  gap: 30px;
}

The resulting layout looks like this:

Different row and column gaps can be set with gap: 30px 10px;.

grid-row / grid-column

These properties position a grid item between specific grid lines. The example below places the item from the second row line to the third, and from the second column line to the third.

.container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px);
}
.grid-item {
  background: red;
  grid-row: 2 / 3;
  grid-column: 2 / 3;
}

The grid-row property defines the start and end row lines for the item, while grid-column does the same for columns.

To make an element span three columns, you can use grid-column: 1 / 4 or the span keyword: grid-column: 1 / span 3.

grid-template-areas

The grid-template-areas property lets you define layout using a two‑dimensional array of named strings, each representing a row.

.container {
  grid-template-areas: "one one two two"
                       "one one two two"
                       "three three four four"
                       "three three four four";
}
.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }

Grid areas must form a rectangular shape; L‑shaped or irregular areas are invalid. You can use . as a placeholder.

.container {
  grid-template-areas: "one . two two"
                       "one . two two"
                       ". three four four"
                       ". three four four";
}
.one { grid-area: one; }
.two { grid-area: two; }
.three { grid-area: three; }
.four { grid-area: four; }

Practical example

Using the homepage of www.guahao.com as a case study, the layout is divided into 4 rows and 3 columns.

HTML structure:

<main>
  <img src="https://static.guahao.cn/front/portal-pc-static/img/new-wy-logo.png" alt="logo" />
  <div class="search">
    <section class="searchBox">
      <input />
      <button>搜索</button>
    </section>
    <ul>
      <li>微医病友群</li>
      <li>千万助孕补贴</li>
      <li>治疗腋下多汗</li>
      <li>整形修复</li>
      <li>假体隆鼻</li>
      <li>脱发怎么办</li>
    </ul>
  </div>
  <img src="https://static.guahao.cn/front/portal-pc-static/img/2015/platform-logo-new.png" alt="guide" />
  <div class="slider"></div>
  <div class="sub-project"></div>
  <img src="https://kano.guahao.cn/5gu296857515" alt="swiper" />
  <div class="help"></div>
  <div class="news"></div>
</main>

CSS for the container:

main {
  display: grid;
  grid-template-areas:
    'logo search guide'
    'slider sub-project sub-project'
    'slider swiper help'
    'slider news news';
  grid-template-columns: 240px 800px 240px;
  grid-template-rows: auto auto auto auto;
}

Assign each child a grid-area to position it:

.logo {
  grid-area: logo;
  width: 190px;
  align-self: center;
  justify-self: center;
}
.search {
  grid-area: search;
  align-self: center;
  justify-self: center;
}
/* more code */

Safe use of Grid

Most modern browsers support CSS Grid; you can use @supports (display: grid) to detect support and apply fallbacks if needed.

@supports (display: grid) {
  .container {
    /* some css code */
  }
}

Conclusion

While Grid is easy to use, developers should consider which scenarios benefit most from it and remember that using Grid does not require abandoning other layout methods; choose the appropriate tool for each situation.