css 中 grid 布局作用 css 中 grid 布局的使用场景-html教程-PHP中文网

css 中 grid 布局作用 css 中 grid 布局的使用场景

幻夢星雲

发布： 2025-07-24 16:51:02

原创

619人浏览过

grid布局核心概念包括：网格容器（display: grid）、网格项（子元素）、网格线（划分行列的线）、网格轨道（线间空间）、网格单元格（行列交叉最小单位）、网格区域（多个单元格组成的矩形）；2. 创建基本grid布局需设置容器display: grid，用grid-template-columns/rows定义行列尺寸（如1fr表示等分剩余空间），grid-gap设置间距；3. 使用grid-column和grid-row可精确控制元素位置，支持span关键字（如grid-column: 1 / span 2等价于占两列）；4. grid-template-areas通过命名区域直观定义布局结构（如"header header header"），配合子元素grid-area属性实现清晰布局；5. grid适用于二维复杂布局（如页面整体结构），flexbox适合一维布局（如导航栏），简单居中等场景避免用grid以免复杂化；6. grid性能良好但应避免过度嵌套、频繁更改布局，并可使用contain属性优化渲染效率。

css 中 grid 布局作用 css 中 grid 布局的使用场景

Grid 布局，简单来说，就是把网页划分成一个个网格，让你像搭积木一样，灵活地放置内容。它能解决很多传统布局难以实现的问题，比如复杂的响应式布局，或者元素对齐问题。

Grid 布局的核心在于将一个容器划分成行和列，从而创建一个网格。然后，你可以将子元素放置在这些网格单元格中。

Grid 布局适用于各种复杂的布局场景，特别是在需要对齐和定位元素时，它比 Flexbox 更加强大。

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

Grid 布局的基本概念和术语有哪些？

首先，我们需要理解几个关键概念：网格容器（Grid Container），这是应用 display: grid 或 display: inline-grid 的元素，是所有网格项的父元素。网格项（Grid Item），是网格容器的直接子元素。网格线（Grid Lines），是构成网格结构的水平和垂直线。网格轨道（Grid Tracks），是网格线之间的空间，可以是行轨道或列轨道。网格单元格（Grid Cell），是网格中最小的单位，由行和列的交叉点定义。网格区域（Grid Area），是由一个或多个网格单元格组成的矩形区域。

理解这些概念后，我们就可以开始使用 Grid 布局了。

如何使用 CSS 创建一个基本的 Grid 布局？

要创建一个 Grid 布局，首先需要在容器元素上设置 display: grid 或 display: inline-grid。display: grid 会让容器成为块级网格容器，而 display: inline-grid 会让容器成为行内网格容器。

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 定义三列，每列宽度相等 */
  grid-template-rows: auto auto; /* 定义两行，高度自适应 */
  grid-gap: 10px; /* 设置网格间距 */
}

登录后复制

在上面的例子中，grid-template-columns 属性定义了三列，每列的宽度都使用 1fr 单位，表示占据剩余空间的 1/3。grid-template-rows 属性定义了两行，高度设置为 auto，表示高度会根据内容自动调整。grid-gap 属性设置了网格项之间的间距。

接下来，你可以将子元素放置到网格中：

<div class="container">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>

登录后复制

默认情况下，子元素会按照顺序自动放置到网格单元格中。

Grid 布局中的 fr 单位是什么意思？

fr 单位是 Grid 布局特有的一个单位，它代表的是可用空间的一部分。1fr 表示占据剩余空间的一份，2fr 表示占据剩余空间的两份，以此类推。

例如，如果一个容器的宽度是 300px，并且我们设置了 grid-template-columns: 1fr 2fr，那么第一列的宽度会是 100px，第二列的宽度会是 200px。

fr 单位非常适合用于创建响应式布局，因为它可以根据容器的大小自动调整列的宽度。

如何使用 grid-column 和 grid-row 属性来控制元素的位置？

grid-column 和 grid-row 属性可以用来精确控制元素在网格中的位置。它们可以指定元素占据的列和行的范围。

.item1 {
  grid-column: 1 / 3; /* 从第一列开始，到第三列结束（不包含第三列）*/
  grid-row: 1; /* 占据第一行 */
}

.item2 {
  grid-column: 3; /* 占据第三列 */
  grid-row: 1 / 3; /* 从第一行开始，到第三行结束（不包含第三行）*/
}

登录后复制

在上面的例子中，.item1 占据了第一行的前两列，.item2 占据了第三列，并跨越了第一行和第二行。

你也可以使用 span 关键字来指定元素占据的列数或行数：

ecshop仿万表网商城整站

该软件是以ecshop作为核心的仿制万表网的商场网站源码。万表网模板 2015最新版整体简洁大气，功能实用，是一款时尚典雅的综合类模板！样式精美的商品分类树，层次分明，分类结构一目了然。首页轮播主广告分别对应切换小广告，商品宣传更到位。独家特色增加顶级频道页面、品牌页面，以及仿京东对比功能，提升网站档次，让您的网站更加高端大气！并且全站采用div+css布局，兼容性良好，更注重页面细节，增加多种j

查看详情

.item3 {
  grid-column: 1 / span 2; /* 从第一列开始，占据两列 */
  grid-row: 2; /* 占据第二行 */
}

登录后复制

grid-column: 1 / span 2 等价于 grid-column: 1 / 3。

Grid 布局中的 grid-template-areas 属性有什么作用？

grid-template-areas 属性允许你使用命名区域来定义网格布局。这可以使你的布局更加直观和易于理解。

首先，你需要为每个网格区域指定一个名称：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

登录后复制

在上面的例子中，我们定义了四个区域：header、sidebar、content 和 footer。然后，我们使用 grid-template-areas 属性将这些区域放置到网格中。每个区域的名称都必须用引号括起来，并且每一行代表网格的一行。

接着，你需要将子元素的 grid-area 属性设置为相应的区域名称。

使用 grid-template-areas 属性可以使你的布局更加清晰，并且易于维护。

Grid 布局和 Flexbox 布局有什么区别？什么时候应该使用 Grid 布局？

Grid 布局和 Flexbox 布局都是 CSS 中强大的布局工具，但它们适用于不同的场景。

Flexbox 布局主要用于一维布局，也就是沿着一个轴线（水平或垂直）排列元素。它非常适合用于创建导航栏、工具栏、或者简单的列表布局。

Grid 布局主要用于二维布局，也就是将元素放置在网格中。它非常适合用于创建复杂的页面布局、仪表盘、或者需要精确控制元素位置的布局。

简单来说，如果你的布局只需要沿着一个方向排列元素，那么 Flexbox 可能是更好的选择。如果你的布局需要在两个方向上排列元素，并且需要精确控制元素的位置，那么 Grid 布局更适合。

什么时候应该避免使用 Grid 布局？

虽然 Grid 布局非常强大，但在某些情况下，使用它可能会适得其反。

例如，对于非常简单的布局，比如只有一个元素的居中，使用 Grid 布局可能会显得过于复杂。在这种情况下，使用 Flexbox 或者传统的 CSS 布局方式可能更加简单和高效。