使用 CSS Grid 创建 HTML 布局-html教程-PHP中文网

使用 CSS Grid 创建 HTML 布局

碧海醫心

发布： 2025-08-30 17:42:00

原创

438人浏览过

使用 css grid 创建 html 布局

本文将详细介绍如何使用 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; /* 增加内边距 */
}

登录后复制

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

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

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

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

定义行和列的大小

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

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

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 布局技术，可以让你更加高效地开发出美观、响应式的网页。

以上就是使用 CSS Grid 创建 HTML 布局的详细内容，更多请关注php中文网其它相关文章！