Complete summary of CSS Grid layout syntax, including structured explanation + common examples

🧩 1. What is Grid layout?

Grid (grid layout) is a powerful two-dimensional layout system provided by CSS3. The position of elements can be precisely controlled in both row and column directions.

📌 Comparison:

• Flex → One-dimensional layout (only rows or columns can be controlled)
• Grid → 2D layout (rows + columns)

📐 2. Basic structure

::: demo [vanilla]

<html>
  <div class="grid-container">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
  </div>
</html>
<style>
.grid-container {
  border: 1px solid red;
  display: grid; /* 开启网格布局 */
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 80px 80px;
  gap: 10px; /* 行列间距 */
}
.item{
  border: 1px solid black;
}
</style>

:::

🧱 3. Core grammar

1️⃣ display: grid | inline-grid

Turn on grid layout. inline-grid indicates that the container is an inline element.

2️⃣ grid-template-columns / grid-template-rows

Define the dimensions of columns and rows.

grid-template-columns: 100px 200px auto;
grid-template-rows: 100px 100px;

✅ Commonly used units:

Unit	Description
px / % / em	Fixed or relative size
fr	"Proportional" unit (most commonly used)
auto	Automatically adjust based on content
minmax(min, max)	Set the minimum and maximum range

Example:

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

Represents 3 columns with a width ratio of 1:2:1.

3️⃣ gap / row-gap / column-gap

Define the spacing between rows and columns.

gap: 10px; /* 行列间距 */
row-gap: 20px;
column-gap: 15px;

4️⃣ grid-template-areas

Define regional layout (strong semantics, suitable for complex page structures).

.grid-container {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  grid-template-rows: 60px 1fr 60px;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

5️⃣ grid-auto-rows / grid-auto-columns

Size used to automatically generate additional rows or columns when content exceeds the defined template rows/columns.

grid-auto-rows: 100px;

6️⃣ grid-auto-flow

Controls the direction of the automatic placement algorithm.

grid-auto-flow: row | column | row dense | column dense;

• row (default): left to right, top to bottom.
• column: from top to bottom, left to right.
• dense: fill gaps (may disrupt the order).

📦 4. Grid Item positioning syntax

1️⃣ Positioning based on row and column numbers

.item1 {
  grid-column-start: 1;
  grid-column-end: 3; /* 跨两列 */
  grid-row-start: 1;
  grid-row-end: 2;
}

Abbreviated form:

.item1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}

2️⃣ Cross rows/cross columns

.item {
  grid-column: span 2; /* 跨两列 */
  grid-row: span 3;    /* 跨三行 */
}

3️⃣ Automatic alignment

Properties	Scope	Values
justify-items	Align the contents of each cell horizontally	start / center / end / stretch
align-items	Align the contents of each cell vertically	Same as above
place-items	Abbreviation	align-items justify-items

.grid-container {
  place-items: center; /* 水平 + 垂直都居中 */
}

4️⃣ Align the entire grid content

Properties	Scope	Values
justify-content	Horizontal alignment of the entire grid within the container	start / center / end / space-between / space-around
align-content	Vertical alignment of the entire grid within the container	Same as above
place-content	Abbreviation	align-content justify-content

5️⃣ Single sub-item alignment (covering global)

.item1 {
  justify-self: end;
  align-self: center;
}

Or abbreviated:

.item1 {
  place-self: center end;
}

🧮 5. repeat() function

Simplified duplicate column definition:

grid-template-columns: repeat(3, 1fr);

Equivalent to:

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

Mixed writing is also supported:

grid-template-columns: 100px repeat(2, 1fr) 200px;

🧠 6. auto-fit / auto-fill responsive layout

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

✅ Difference:

• auto-fill: Fill as many columns as possible (spaces are still taken)
• auto-fit: Automatically fold empty columns (adaptive filling)

🧭 7. Naming lines (naming rows)

grid-template-columns: [left] 1fr [middle] 2fr [right];
.item {
  grid-column: left / right; /* 使用命名行定位 */
}

🧰 8. Practical cases: common layouts

✅ Three-column layout (middle adaptive)

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

✅ Waterfall flow layout (dense filling)

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
  grid-auto-rows: 150px;
  grid-auto-flow: dense;
}

⚡ 9. Comparison summary between Grid and Flex

Features	Flex	Grid
Layout dimensions	One-dimensional (rows/columns)	Two-dimensional (rows + columns)
Alignment	Main axis/cross axis	Row/column two dimensions
Content Alignment	Flexible	Accurate
Responsive layout	Needs nesting	One step
Usage scenarios	Partial and intra-component layout	Overall page layout

🧭 10. Structured summary (mind map)

CSS Grid 布局
 ├── display: grid / inline-grid
 ├── 行列定义
 │   ├── grid-template-columns / rows
 │   ├── repeat() / minmax()
 │   ├── auto-fit / auto-fill
 │   └── gap / row-gap / column-gap
 ├── 自动布局
 │   ├── grid-auto-flow
 │   ├── grid-auto-rows / columns
 ├── 区域布局
 │   ├── grid-template-areas
 │   ├── grid-area（子项）
 ├── 对齐控制
 │   ├── justify-items / align-items / place-items
 │   ├── justify-content / align-content / place-content
 │   └── justify-self / align-self / place-self
 ├── 子项定位
 │   ├── grid-row / grid-column
 │   └── span / 命名线
 ├── 函数
 │   ├── repeat()
 │   ├── minmax()
 │   ├── fit-content()
 └── 实战应用
     ├── 三列布局
     ├── 瀑布流
     ├── 自适应卡片网格
     └── Dashboard布局