第18话：圣城 - CSS 漫画大冒险

圣城的蓝图

🧑‍🦱

Young David (少年大卫):
Flexbox 是一维的（一条线），适合排列战士。
但是要建造圣城耶路撒冷，我们需要二维的规划（行与列）。
这就是 CSS Grid，最强大的布局系统！

🏗️

The Architect (建筑师):
给我 12 个城门，我要把它们安排得整整齐齐！

量度的准绳 (Columns & Rows)

我们用 fr (fraction, 份数) 来分配土地。

.city {
    display: grid;
    /* 三列，每列占一份 */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 20px; /* 街道宽度 */
}

建造你的城

Grid Template Columns:

Gate 1

Gate 2

Gate 3

Gate 4

Gate 5

Gate 6

跨越地界 (Span)

圣殿是至大的，它需要跨越多个地块。

北门

圣殿 (Temple)
grid-column: 1 / -1;
(从第一条线跨到最后一条线)

南门

⚔️ 操练场 (Training Ground)

任务： 均分土地。

问题：如果你想要一个 4 列的网格，每一列宽度都相等。你应该怎么写？

.city {
display: grid;
grid-template-columns: ;
}