当前位置：首页 > news >正文

CSS Grid 布局示例 - grid-template-areas

news 2025/9/21 7:32:24

CSS Grid 布局示例：深入理解 grid-template-areas

我将通过一个实际的例子来演示如何使用 grid-template-areas 创建直观的网页布局。这个属性让你能够"可视化"地设计布局，非常强大且易于理解。

实现思路

首先，我会创建一个常见的网页布局，包含页眉、导航、主内容区、侧边栏和页脚。然后使用 CSS Grid 的 grid-template-areas 属性来定义布局结构。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Grid 布局示例 - grid-template-areas</title><style>* {box-sizing: border-box;margin: 0;padding: 0;}body {font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;line-height: 1.6;color: #333;background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);min-height: 100vh;padding: 20px;}.container {max-width: 1200px;margin: 0 auto;padding: 20px;}h1 {text-align: center;color: white;margin-bottom: 30px;text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);}.grid-layout {display: grid;gap: 15px;height: 80vh;/* 定义网格区域模板 ("画"出布局) */grid-template-areas:"header header""nav main""footer footer";/* 定义列和行的大小 */grid-template-columns: 1fr 3fr;  /* 两列：导航和主内容 */grid-template-rows: auto 1fr auto;  /* 三行：头、内容、尾 */background-color: rgba(255, 255, 255, 0.1);border-radius: 10px;padding: 15px;box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);}/* 为每个区域定义样式 */.header {grid-area: header;background-color: #ff9d9d;}.nav {grid-area: nav;background-color: #9dff9d;}.main {grid-area: main;background-color: #9dcfff;}.footer {grid-area: footer;background-color: #ffff9d;}/* 通用区域样式 */.grid-area {padding: 20px;border-radius: 8px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);display: flex;flex-direction: column;justify-content: center;align-items: center;}.grid-area h2 {margin-bottom: 15px;font-size: 1.5rem;color: #2c3e50;}.grid-area p {text-align: center;max-width: 80%;}/* 响应式设计 */@media (max-width: 768px) {.grid-layout {/* 在小屏幕上改为单列布局 */grid-template-areas:"header""nav""main""footer";grid-template-columns: 1fr;grid-template-rows: auto auto 1fr auto;}}.code-example {background-color: #2d3436;color: #f5f6fa;padding: 20px;border-radius: 8px;margin-top: 30px;font-family: 'Fira Code', monospace;overflow-x: auto;}.code-example h3 {color: #dfe6e9;margin-bottom: 15px;}.comment {color: #636e72;}.property {color: #81ecec;}.value {color: #fab1a0;}</style>
</head>
<body><div class="container"><h1>CSS Grid 布局示例：grid-template-areas</h1><div class="grid-layout"><div class="grid-area header"><h2>Header</h2><p>页面标题区域</p></div><div class="grid-area nav"><h2>Navigation</h2><p>导航菜单区域</p></div><div class="grid-area main"><h2>Main Content</h2><p>主要内容区域</p></div><div class="grid-area footer"><h2>Footer</h2><p>页脚信息区域</p></div></div><div class="code-example"><h3>代码解析</h3><pre><code><span class="comment">/* 定义网格容器 */</span>
.grid-layout {display: grid;gap: 15px;<span class="comment">/* 使用grid-template-areas可视化布局 */</span><span class="property">grid-template-areas</span>: <span class="value">"header header"</span><span class="value">"nav    main"</span><span class="value">"footer footer"</span>;<span class="comment">/* 定义列和行的大小 */</span><span class="property">grid-template-columns</span>: <span class="value">1fr 3fr</span>;  <span class="comment">/* 两列：导航和主内容 */</span><span class="property">grid-template-rows</span>: <span class="value">auto 1fr auto</span>;  <span class="comment">/* 三行：头、内容、尾 */</span>
}<span class="comment">/* 将元素分配到指定区域 */</span>
.header { <span class="property">grid-area</span>: <span class="value">header</span>; }
.nav    { <span class="property">grid-area</span>: <span class="value">nav</span>; }
.main   { <span class="property">grid-area</span>: <span class="value">main</span>; }
.footer { <span class="property">grid-area</span>: <span class="value">footer</span>; }</code></pre></div></div>
</body>
</html>