CSS语法中的display: grid是一种将网页划分为一系列的网格，然后可以任意组合这些网格，创造出各种复杂的布局。与以前的CSS框架相比，display: grid现在是浏览器内置的，这意味着不需要依赖外部库就可以使用它。布局如下图：
当一个元素被设置为display: grid时，它变成了一个网格容器（Grid Container），所有直接子元素都会自动成为网格项（Grid Item）。这个网格容器内部的空间被划分成行和列，形成了网格线（Grid Line）和网格轨道（Grid Track）。两个相邻的网格线之间的空间被称为一个网格单元（Grid Cell），它是网格中最小的独立单位。
与Flex布局相比，Grid布局更加二维化。Flex布局是一维布局，只能指定项目在轴线上的位置。而Grid布局则可以在行和列两个方向上同时进行布局，因此更加灵活和强大。
grid常用的属性介绍
1、指定容器使用网格布局：display: grid；
2、指定容器设为行内元素并使用网格布局：display: inline-grid；
3、定义每一列的列宽：grid-template-columns；
4、定义每一行的行高：grid-template-row；
5、重复赋值：repeat(次数,值)；
6、自动填充：如：repeat(auto-fill,30px)；
7、比例：fr（如 grid-template-columns: 1fr 2fr;意思是容器分为2列，二列的宽度是一列的2倍)；
8、长度范围：minmax()；
9、自动填充剩余空间（不设置最大值最小值的情况下）：auto；
10、网格线名称，同一根线可以有多个名称： grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];；
11、行间距：grid-row-gap；
12、列间距：grid-column-gap；
13、间距：grid-gap：行间距数值 列间距数值行间距和列间距数值相同可只写一个值；
14、区域：b到h的分别对应七个区域。.表示第一个区域不用；h表示两个区域合并；每个区域的起始网格线自动命名为区域名-start，终止网格线自动命名为区域名-end；
grid-template-areas: '. b c'
'd e f'
'g h h';
15、填充顺序：grid-auto-flow默认是row，即先填满第一行再填下一行；也可设置为column变成先填满第一列再填第二列；row dense和column dense表示尽量填满不出现空白
16、单元格内容的水平位置、垂直位置；默认stretch，即填满整个单元格
justify-items: start | end | center | stretch;/*水平位置*/ align-items: start | end | center | stretch;/*垂直位置*/ place-items: '水平位置' '垂直位置';/*参数相同可只写一个值*/
17、内容块在网格容器的水平位置、垂直位置；默认stretch，即填满整个单元格
justify-content: start | end | center | stretch | space-around | space-between | space-evenly; align-content: start | end | center | stretch | space-around | space-between | space-evenly; place-content:'水平位置' '垂直位置';/*参数相同可只写一个值*/ space-around : 单元格两侧的间隔相等，是单元格与容器边框的间隔的两倍。 space-between : 单元格间隔相等，单元格与容器边框之间没有间隔。 space-evenly : 单元格间隔和单元格与容器边框的间隔相等。
18、指定项目外的单元格属性：grid-auto-columns，grid-auto-rows
19、合并属性
grid-template: grid-template-columns grid-template-rows grid-template-areas grid: grid-template-rows grid-template-columns grid-template-areas grid-auto-rows grid-auto-columns grid-auto-flow
20、项目根据网格线定位，可使用z-index
grid-column-start:2; grid-column-end:3; /*相当于*/ grid-column:2 / 3 grid-row-start:4; grid-row-end :5;
21、指定项目放在哪一个区域: grid-area: a; grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
22、设置单元格内容的水平、垂直位置，只作用于单个项目
justify-self: start | end | center | stretch; align-self: start | end | center | stretch; justify-self: start | end | center | stretch;
display有哪些常用属性值，grid布局和flex布局的区别？
上面是“display:grid页面网格布局常用的属性介绍”的全面内容，想了解更多关于 前端知识 内容，请继续关注web建站教程。
当前网址：https://m.ipkd.cn/webs_13886.html
声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！
