Master CSS Grid: From Flex to Powerful Two‑Dimensional Layouts

The article introduces CSS Grid layout, its application scenarios, and a learning path with several implementation examples, encouraging readers to try it.

Background

Product cards are a classic e‑commerce scenario. A typical card includes an image, name, price, coupons, sales, action button, and benefit points, often resulting in complex layouts.

Traditional Flex Layout

Using Flex, the card is split into multiple container boxes. Example HTML and CSS code illustrate the verbose structure required to arrange all elements.

<div className="card">
  <div className="card-top">
    <div className="card-top-left">商品图</div>
    <div className="card-top-right">
      <div className="card-top-right-top">热销指数</div>
      <div className="card-top-right-bottom">商品信息</div>
    </div>
  </div>
  <div className="card-bottom">
    <div className="card-bottom-left">商品价格</div>
    <div className="card-bottom-right">行动按钮</div>
  </div>
</div>

.card {
  display: flex;
  flex-direction: column;
  .card-top {
    flex: 1;
    display: flex;
    .car-top-left { width: 250rpx; }
    .car-top-right { flex: 1; display: flex; flex-direction: column; }
  }
  .card-bottom { height: 50rpx; display: flex; justify-content: space-between; }
}

This approach requires many nested containers, making the HTML deep and the CSS lengthy.

Grid Layout Solution

With a two‑dimensional grid, the HTML becomes much simpler, containing only content elements.

<div className="card">
  <div className="img">商品图</div>
  <div className="guide">热销指数</div>
  <div className="info">商品信息</div>
  <div className="price">商品价格</div>
  <div className="action">行动按钮</div>
</div>

.card {
  display: grid;
  grid-template-columns: 262rpx 1fr;
  grid-template-rows: 50rpx 212rpx 1fr;
  .img { grid-row: 1 / 3; }
  .guide { grid-column-start: 2; }
  .info { grid-row-start: 2; grid-column-start: 2; }
  .price { grid-column-start: 1; grid-row-start: 3; }
  .action { grid-column-start: 2; grid-row-start: 3; }
}

Compared with the Flex version, the HTML lines drop from 13 to 7 and CSS lines from 33 to 13, achieving over 50% code reduction.

Key Grid Properties

grid-template-columns

: defines the number and width of columns. grid-template-rows: defines the number and height of rows. grid-column-start: sets the starting column of a child element. grid-row-start: sets the starting row of a child element.

In this example, only the image needs an explicit grid area; other elements follow the natural order.

.card { display: grid; grid-template-columns: 262rpx 1fr; grid-template-rows: 50rpx 212rpx 1fr; .img { grid-row: 1 / 3; } }

MDN defines grid as a layout mode composed of intersecting horizontal and vertical lines that allows precise placement of design elements.

Learning Resources

MDN Grid tutorial: https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Grids#flexible_grids_with_the_fr_unit

CSS layout introduction (covers early hacks, Flex, media queries): https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Introduction

Ruanyifeng’s Grid tutorial (2019): https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

Interactive practice: Grid Garden – https://cssgridgarden.com/

Interactive guide to CSS Grid: https://www.joshwcomeau.com/css/interactive-guide-to-grid/

Visual layout code generator: https://cssgrid-generator.netlify.app/

Practical CodePen Examples

Badminton court layout: https://codepen.io/anonbug/pen/bGZqByW

Room floor plan: https://codepen.io/anonbug/pen/OJqbrQL

Mondrian painting recreation: https://codepen.io/anonbug/pen/gOEmwoQ

Calendar layout using Grid: (image shown)

Vertical Centering Tip

Traditional Flex centering uses three lines:

div { display: flex; justify-content: center; align-items: center; }

Grid can achieve the same with only two lines: div { display: grid; place-items: center; } This reduces code size by about 20%.

Conclusion

Grid layout dramatically simplifies complex UI structures, reduces code, and offers powerful two‑dimensional positioning, making it a superior choice for modern web development.