在使用CSS Grid布局时，模板区域（Template Areas） 是一种通过grid-template-areas属性定义布局结构的强大工具。它允许开发者通过命名区域的方式，更直观地组织网格内容。

核心概念

  • 模板区域：通过grid-template-areas定义的网格区域名称，如 header、main、sidebar 等
  • 区域分配：使用grid-template-columns和grid-template-rows定义列行尺寸
  • 响应式设计：结合媒体查询调整区域布局

代码示例

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header header"
    "nav sidebar main"
    "footer footer footer";
}

/* 通过区域名称定位元素 */
.header { grid-area: header; }
.nav { grid-area: nav; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

扩展阅读

CSS_Grid_Layout

实用技巧

  • 使用area属性简化元素定位
  • 结合grid-auto-flow实现动态布局
  • 通过grid-gap或gap属性设置间距

⚠️ 注意：模板区域需要与grid-area属性配合使用，且区域名称需保持一致

Grid_Container