在css中grid-template-areas布局示例-css教程-PHP中文网

在css中grid-template-areas布局示例

P粉602998670

发布： 2025-10-14 15:15:01

原创

663人浏览过

使用 grid-template-areas 可定义直观的网格布局：通过命名区域将页面划分为头部、侧边栏、主内容和底部，配合 grid-area 指定元素位置，实现清晰、易调整的响应式结构。

在css中grid-template-areas布局示例

使用 grid-template-areas 可以通过直观的视觉方式定义网格区域，让布局更清晰易读。下面是一个典型的示例，展示如何用它构建一个简单的网页布局：包含头部、侧边栏、主内容区和底部。

HTML 结构

<div class="container">
  <header>Header</header>
  <aside>Sidebar</aside>
  <main>Main Content</main>
  <footer>Footer</footer>
</div>

CSS 样式

通过 grid-template-areas 将不同元素分配到命名区域：

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

header {
  grid-area: header;
  background-color: #4CAF50;
}

aside {
  grid-area: sidebar;
  background-color: #FFC107;
}

main {
  grid-area: main;
  background-color: #E3F2FD;
}

footer {
  grid-area: footer;
  background-color: #9E9E9E;
}