<p>网格布局（）是最强大的 CSS 布局方案。</p> 讯享网
它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。
布局与 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。
Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局，意味着可以同时处理行和列。Grid 布局远比 Flex 布局强大。
注意：设为网格布局以后，容器子元素（项目）的、、、和等设置都将失效。
css网格布局模块（css Grid Layout Module）提供了带有行和列的基于网格的布局系统，它使网页设计变得更加容易，而无需使用浮动和定位。
所有现代浏览器均支持网格属性
网格布局由一个父元素或者多个子元素构成
实例：
讯享网
网格布局必须有一个display属性设置为grid或inline-grid的父元素。
网格容器的直接子元素自动成为网格项目。
网格项的垂直线被称为列。
网格项的水平线被称为行。
列 之间的线称为列线（column lines）
行之间的线称为行线（row lines）
实例
把网格项目放在列线1，并在列线3结束它。
把网格项目放在行线1，并在行线3结束它
讯享网
每行/列之间的间隔称为间隙。可以通过以下属性之一来调整间隙大小。
- 属性设置列之间的间隙
grid-column-gap: 50px;
- 设置行之间的间隙
- 是grip-column-grip和grip-column-grip属性的简写属性。grip-gap属性还可用于将行间隙和列间隙设置为一个值。
.grid-container {
display: grid;
grid-gap: 50px;
}
grip-template-columns属性定义每个列的宽度
：如果在 4 列网格中有 4 个以上的项目，则网格会自动添加新行并将这些项目放入其中。
属性还可以用于指定列的尺寸（宽度）。
实例
设置这四列的尺寸：
grip-template-rows属性定义每列的高度
讯享网
justify-content属性用于在容器内对齐整个网格
`注意：网格的总宽度必须小于容器的宽度，这样justify-content属性才能效。
实例
align-content属性用于垂直对齐容器内的整个网格
网格的总高度必须小于容器的高度，这样align-content属性才能生效。
讯享网
grid-column属性定义将项目放在哪一列上。
可以定义项目的开始位置以及结束位置。
grid-column属性是grip-column-start和grid-column-end属性的简写属性
如需放置某个项目，可以引用行号或者使用关键字“span”来定义该项目将跨越多少列。
实例：
讯享网
grip-row属性定义了将项目放置在哪一行。
可以定义项目的开始位置以及结束位置
注释：grid-row 属性是 grid-row-start 和 grid-row-end 属性的简写属性。
如需放置项目，可以引用行号，或使用关键字 “span” 定义该项目将跨越多少行：
实例
使 “item1” 在 row-line 1 开始，在 row-line 4 结束：
grid-area属性
grid-area属性可以用作grid-row-start、grid-column-start、grid-row-end、grid-column-end属性的简写属性。
实例：
讯享网
命名网格项
grid-area属性也可用于为网格项目分配名称。
可以通过网格容器的属性来引用命名的网格项目。
实例
让 “myArea” 跨越五列网格布局中的两列（句号代表没有名称的项目）：
讯享网
实例
需要定义两行的情况，在另一组撇号内定义第二行的列。
使 “item1” 跨越两列和两行：
实例：命名所有项目，并制作一张随时可用的网页模板
讯享网
项目的顺序(这里有点弯弯绕绕)
网格布局允许我们将项目放置在我们喜欢的任意位置。HTML代码中的第一项不必显示为网格中的第一项。
实例
可以通过使用媒体查询来重新排列某些屏幕尺寸的顺序：
这个实例需要将窗口调整为500像素来查看效果。
讯享网
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/161457.html