网格布局（Grid）

最新推荐文章于 2024-05-09 15:41:10 发布

谁诉离殇~

最新推荐文章于 2024-05-09 15:41:10 发布

阅读量1.5k

点赞数 3

分类专栏： CSS(level 1) # CSS布局(level 2) 文章标签： css

本文链接：https://blog.csdn.net/rocktanga/article/details/120733891

版权

本文深入探讨了CSS Grid布局，这是一种强大的二维布局方案，支持更灵活的网页设计。介绍了基本概念，如容器和项目、行和列、单元格，以及如何通过display: grid开启布局。文章详细阐述了容器的各种属性，如grid-template-columns/rows、grid-auto-columns/rows、grid-auto-flow、gap等，并通过实例展示了如何使用这些属性创建和调整网格。此外，还讨论了项目的属性，如grid-column/row和grid-area，用于精确控制元素在网格中的位置。最后，通过实例展示了Grid布局的应用，包括圣杯布局和嵌套网格布局。

摘要由CSDN通过智能技术生成

网格布局（Grid）

一、网格布局（Grid）是什么

网格布局（Grid）是最强大的 CSS 布局方案;它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。

Grid 布局与 Flex 布局：可以把grid布局和flex布局配合起来用

相似点：Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置

不同点：Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大(grid的属性里面可以用一些函数)

兼容性：ie 11+不支持(edge是支持的)，其它浏览器主流版本都支持

二、基本概念

(1)容器和项目: 采用网格布局的区域(即采用网格布局的父元素)，称为容器（container）。容器内部采用网格定位的子元素，称为项目（item）

注：项目只能是容器的顶层子元素，不包含项目的子元素，比如下面代码的<p>元素就不是项目。Grid 布局只对项目生效

// 如下：最外层的<div>元素就是容器，内层的三个<div>元素就是项目
<div>
  <div><p>1</p></div>
  <div><p>2</p></div>
  <div><p>3</p></div>
</div>

(2)行和列: 容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）

(3)单元格: 行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个单元格。比如，3行3列会产生9个单元格。

(4)网格线: 划分网格的线(即切分出一个格子的线)，称为"网格线"（gridline）。水平网格线划分出行，垂直网格线划分出列。正常情况下，n行有n + 1根水平网格线，m列有m +1根垂直网格线，比如三行就有四根水平网格线

三、容器的属性

使用grid布局.先设置display: grid来表明是grid布局,然后设置grid-template-columns、grid-template-rows来表明列宽和行高,在设置place-content来表明项目的布局,在设置gap来细化项目的布局.最后设置项目上的grid-column-start,grid-row-start来调整项目的大小

以下18个属性设置在容器上

display: grid;

grid-template-columns、grid-template-rows

grid-auto-columns、grid-auto-rows

grid-auto-flow

row-gap、column-gap、gap

grid-template-areas

justify-items、align-items、place-items

justify-content、align-content、place-content

grid-template、grid

1、display: grid

同flex布局一样，必须设置父元素为display: grid,表示进行网格布局。

如果设置父元素为display: grid，则容器元素为块元素；也可设置为display: inline-grid;，则容器元素为行内元素

注：设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效

div {display: grid;}
div {display: inline-grid;}

2、grid-template-columns、grid-template-rows

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。单位可以是px也可以是百分数(百分数为相对容器元素自身来设置)，还可以px和百分数混合使用

如果html中的项目数，超过了css中定义的行列数量，则多余的项目的宽高，按照下面属性来设置

// 下面grid-template-columns定义了4列，列宽分别为33.33% 33.33% 33.33% 50px
// 下面grid-template-rows定义了3行行高分别为50px 50px 50px
#container{
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33% 50px;
  grid-template-rows: 50px 50px 50px;
}

<div id="container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">3</div>
  <div class="item item-4">4</div>
  <div class="item item-5">7</div>
  <div class="item item-6">6</div>
  <div cl