使用 CSS Grid 创建 HTML 布局

作者 2025年8月30日 11

本文将详细介绍如何使用 css Grid 布局创建复杂的 html 页面结构。通过结合 CSS 和 HTML，我们可以轻松实现各种网格布局，例如头部、导航栏、侧边栏、内容区域和页脚等。文章将提供详细的代码示例和步骤，帮助你快速掌握 CSS Grid 布局技术，并构建出美观、响应式的网页。

准备 HTML 结构

首先，我们需要创建一个基本的 HTML 结构，包含头部（header）、导航栏（nav）、主要内容区域（article）、侧边栏（aside）和页脚（footer）等元素。确保所有标签正确闭合，这是 CSS 样式生效的前提。

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>CSS Grid Layout</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <header><h1>Header</h1></header>     <nav>         <span>menu-item</span>         <span>menu-item</span>         <span>menu-item</span>     </nav>     <article>main content</article>     <aside>sidebar</aside>     <footer>footer</footer> </body> </html>

CSS Grid 布局

接下来，在 style.css 文件中，我们将使用 CSS Grid 来定义页面的布局。首先，将 body 元素的 display 属性设置为 grid，然后使用 grid-template-areas 属性定义网格区域。

body {   display: grid;   grid-template-areas:     'header header'     'menu menu'     'sidebar content'     'footer footer';   padding: 10px;   gap: 10px; /* 添加网格间距 */   height: 100vh; /* 确保页面占据整个视口高度 */ }  header {   grid-area: header;   background: salmon; }  nav {   grid-area: menu;   background: lightblue; }  article {   grid-area: content;   background: lightgrey; }  aside {   grid-area: sidebar;   background: gold; }  footer {   grid-area: footer;   background: tan; }  /* 确保每个区域至少有一定的高度 */ header, nav, article, aside, footer {     min-height: 50px;     padding: 10px; /* 增加内边距 */ }

在这个例子中，我们定义了一个 2×4 的网格，其中：

立即学习“前端免费学习笔记（深入）”；

header 占据第一行的两个单元格。
menu 占据第二行的两个单元格。
sidebar 占据第三行的第一个单元格，content 占据第三行的第二个单元格。
footer 占据第四行的两个单元格。

grid-template-areas 属性使用字符串来表示网格的结构，每个字符串代表一行，字符串中的每个单词代表一个单元格。 grid-area 属性将 HTML 元素与网格区域关联起来。 gap 属性设置网格单元格之间的间距。

定义行和列的大小

可以使用 grid-template-rows 和 grid-template-columns 属性来定义行和列的大小。例如：

body {   display: grid;   grid-template-columns: 150px  auto; /* 侧边栏固定宽度，内容区域自适应 */   grid-template-rows: auto auto auto auto; /* 所有行高度自适应 */   grid-template-areas:     'header header'     'menu menu'     'sidebar content'     'footer footer';   padding: 10px;   gap: 10px;   height: 100vh; }

grid-template-columns: 150px auto; 定义了两列，第一列宽度为 150px，第二列宽度自适应。 grid-template-rows: auto auto auto auto; 定义了四行，所有行的高度都自适应内容。

完整示例

将上述 HTML 和 CSS 代码结合起来，就可以创建一个基本的 CSS Grid 布局。完整的代码如下：

HTML (index.html):

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>CSS Grid Layout</title>     <link rel="stylesheet" href="style.css"> </head> <body>     <header><h1>Header</h1></header>     <nav>         <span>menu-item</span>         <span>menu-item</span>         <span>menu-item</span>     </nav>     <article>main content</article>     <aside>sidebar</aside>     <footer>footer</footer> </body> </html>

CSS (style.css):

body {   display: grid;   grid-template-columns: 150px  auto;   grid-template-rows: auto auto auto auto;   grid-template-areas:     'header header'     'menu menu'     'sidebar content'     'footer footer';   padding: 10px;   gap: 10px;   height: 100vh; }  header {   grid-area: header;   background: salmon; }  nav {   grid-area: menu;   background: lightblue; }  article {   grid-area: content;   background: lightgrey; }  aside {   grid-area: sidebar;   background: gold; }  footer {   grid-area: footer;   background: tan; }  header, nav, article, aside, footer {     min-height: 50px;     padding: 10px; }

注意事项和总结

标签闭合： 确保 HTML 标签正确闭合，否则 CSS 样式可能无法生效。
网格区域定义： grid-template-areas 属性中的字符串必须形成一个矩形，否则布局可能不正确。
响应式设计： 可以使用媒体查询来调整网格布局，以适应不同的屏幕尺寸。
浏览器兼容性： 现代浏览器都支持 CSS Grid 布局，但对于旧版本的浏览器，可能需要使用一些 Polyfill 来提供兼容性。

通过本文的介绍，你已经了解了如何使用 CSS Grid 布局创建 HTML 页面结构。 CSS Grid 是一种强大的布局工具，可以帮助你轻松创建复杂的网页布局。掌握 CSS Grid 布局技术，可以让你更加高效地开发出美观、响应式的网页。

Hello! 欢迎来到悠悠畅享网！