Grid 布局：掌控网页二维空间的王者

要让网页既横向排列，又纵向对齐？Flex 做不到，Grid 正中下怀。通过定义行列模板：

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: auto;
  gap: 16px;
}


就能创建出高度可控、可预测的布局。再用 grid-area 或 grid-column、grid-row，可以精确放置每个内容块的位置。

响应式设计也能借助 repeat()、auto-fit 与 minmax() 实现：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));


Grid 是真正意义上的“排版系统”，不是修修补补，而是自底向上的设计革命。