做网站合肥哪家公司好,英文谷歌优化,科技公司网站建设策划方案,义乌网红直播基地一、简介
display: grid;用于设置元素内部的布局类型为网格布局#xff0c;其外显类型为块级元素。该类型的元素将内部分为行和列#xff0c;划分成一个个单元格#xff0c;并通过一系列相关属性控制单元格及其内容的布局和大小。
该属性值的主要应用场景为#xf…一、简介
display: grid;用于设置元素内部的布局类型为网格布局其外显类型为块级元素。该类型的元素将内部分为行和列划分成一个个单元格并通过一系列相关属性控制单元格及其内容的布局和大小。
该属性值的主要应用场景为多行多列元素排列布局。
采用grid布局的元素被称为“容器”container其内部的直接子元素被称为“项目”item。
容器中水平X轴方向被称为“行”垂直Y轴方向被称为“列”。行跟列所产生的交叉区域就是“单元格”。
划分网格的线称为“网格线”又根据行和列被划分为“水平网格线”和“垂直网格线”。通常情况下n行元素就会有n1根水平网格线m列元素就会有m1根垂直网格线。
当父元素设置为grid布局时其内部子元素的float、display: inline-block、vertical-align等属性都将失效。
浏览器兼容性 注意该博客下的所有案例都以下面的dom结构为基础
style
.d2 {margin: 20px;
}
.d2div {background: pink;text-align: center;
}
.d2div:nth-child(2n){
background: yellow;
}
/stylediv classd2div classd2-11/divdiv classd2-22/divdiv classd2-33/divdiv classd2-44/divdiv classd2-55/divdiv classd2-66/divdiv classd2-77/divdiv classd2-88/divdiv classd2-99/div
/div二、容器属性
1、属性列举
设置display: grid;的元素即为容器元素那么定义在容器上的相关属性就被称为容器属性。容器上共有17条包含以下
grid-template-columns 定义每一列的列宽。grid-template-rows定义每一行的行高。column-gap定义列与列之间的列间距原属性名为grid-column-gap。row-gap定义行与行之间的行间距原属性名为grid-row-gap。gap定义列间距和行间距是column-gap与row-gap的简写形式原属性名为grid-gap。grid-template-areas定义网格区域名称。grid-auto-flow定义单元格排列顺序。justify-items定义单元格中内容的水平位置左中右。align-items定义单元格中内容的垂直位置上中下。place-items 定义单元格中内容的水平位置和垂直位置是justify-items和align-items的简写形式。justify-content定义容器中整体内容的水平位置左中右。align-content定义容器中整体内容的垂直位置上中下。place-content定义容器中整体内容的水平位置和垂直位置是justify-content和align-content的简写形式。grid-auto-columns定义容器中多余网格的列宽。grid-auto-rows定义容器中多余网格的行高。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 这六个属性的简写形式。
2、grid-template-columns
① 定义列宽的各种方式
该属性用来定义网格布局中每一列的列宽属性值可以是px、百分比、repeat()、auto-fill、auto-fit、fr、minmax()、auto等等。
px 单位就是定义一个固定的列宽
.d2 {display: grid;/* 设置三列列宽 宽度都为100px */grid-template-columns: 100px 100px 100px;
}页面效果 百分比 单位定义的列宽取决于容器的宽度百分比的基数就是容器设置的宽度
.d2 {display: grid;/* 设置三列列宽 分别占父元素的20% 50% 30% */grid-template-columns: 20% 50% 30%;width: 300px;
}页面效果 repeat(n,m) 方法用来简化重复的值接收两个参数第一个参数n表示重复的次数第二个参数值表示要重复的而且可以与其他类型的属性值共同使用。还可以重复渲染一组数据实际渲染的列数重复的数据数量*重复的次数。
.d2 {display: grid;/* 第一个值 设置前两列的列宽 repeat()重复两次50px 第三个值 设置第三列宽200px */grid-template-columns: repeat(2, 50px) 200px;/* 将一组值 重复两次 相当于设置了四个值 该属性值等价于50px 100px 50px 100px */grid-template-columns: repeat(2, 50px 100px);
}页面效果 auto-fill 是一个关键字通常与repeat(n,m) 方法结合使用将其设置为参数n表示在确定好列宽m和容器宽度的基础上尽可能的在一行上填充更多的列。如果还剩余不足一列宽度的空间则会将剩余空间空着占位。
.d2 {display: grid;/* 表示以列宽60px 尽可能的在容器宽度300px中塞下更多的列 */grid-template-columns: repeat(auto-fill, 60px);width: 300px;
}页面效果 fr 是一个关键字单位是fraction片段的缩写实际意义表示比例关系如果设置的grid-template-columns中只包含fr且容器设置了固定宽度则1fr的实际宽度为容器的宽度/fr的总和然后再根据每个数据的值得到对应列的列宽例如设置容器宽度300px设置列宽分别为1fr 2fr 3fr则1fr300/(123)50px计算出对应的列宽为 50px 100px 150px。
.d2 {display: grid;grid-template-columns: 1fr 2fr 3fr; /* 实际列宽 50px 100px 150px */width: 300px;
}页面效果 如果设置的grid-template-columns中只包含fr且容器没有设置宽度则1fr的实际宽度取决于所有列的项目宽度/对应的fr中的最大值例如设置列宽分别为1fr 2fr 3fr列中对应的项目的宽度分别为40px 100px 120px根据对比40/140、100/250、120/340得出50最大因此1fr50px实际列宽将以这个单位为准。
.d2 {display: grid;grid-template-columns: 1fr 2fr 3fr; /* 实际列宽 50px 100px 150px */
}
.d2-1 {width: 40px;
}
.d2-2 {width: 100px;
}
.d2-3 {width: 120px;
}页面效果 如果设置的grid-template-columns中同时包含fr和其他绝对长度单位如果容器设置了固定宽度则1fr的实际宽度为(容器的宽度-绝对单位列宽和)/fr的总和例如设置容器宽度300px设置列宽分别为150px 2fr 3fr则1fr(300-150)/(23)30px计算出对应的列宽为 150px 60px 90px如果容器没有设置固定宽度则1fr的实际宽度取决于所有以fr为单位的列的项目宽度/对应的fr中的最大值。
.d2 {display: grid;grid-template-columns: 150px 2fr 3fr;/* 实际列宽 150px 60px 90px */width: 300px;
}minmax(min,max) 是一个方法用来指定一个范围表示列宽的范围其接受两个参数分别为最小值和最大值。如果容器设置了宽度且去掉设置的固定列宽后剩余的宽度正好位于minmax()区间内则取剩余空间值如果剩余的宽度大于区间则取区间最大值如果剩余的宽度小于区间则取区间最小值如果容器未设置宽度则取区间最大值。
.d2 {display: grid;/* 去掉固定列宽 剩余宽度300-150-50100 位于区间内 取剩余宽度 此时实际列宽为 150px 50px 100px*/grid-template-columns: 150px 50px minmax(80px, 120px); width: 300px;
}
.d3 {display: grid;/* 去掉固定列宽 剩余宽度300-150-50100 小于区间 取最小值 此时实际列宽为 150px 50px 110px*/grid-template-columns: 150px 50px minmax(110px, 120px); width: 300px;
}
.d4 {display: grid;/* 去掉固定列宽 剩余宽度300-150-50100 大于区间 取最大值 此时实际列宽为 150px 50px 80px*/grid-template-columns: 150px 50px minmax(70px, 80px); width: 300px;
}
.d5 {display: grid;/* 无固定宽度 则取最大值 此时实际列宽为 150px 50px 120px*/grid-template-columns: 150px 50px minmax(80px, 120px);
}页面效果剩余宽度位于区间内 auto 是一个关键字表示自适应宽度如果容器设置了宽度设置列宽为auto则表示将容器的宽度去掉其他类型的宽度之后剩余的宽度均分给设置了auto的列如果容器没有设置宽度设置列宽为auto则表示列宽取当前列中宽度最大的项目的宽度为列宽。
.d2 {display: grid;/* 300-150-10050 此时 auto 的实际列宽为50px */grid-template-columns: 150px auto 100px; width: 300px;
}
.d3 {display: grid;/* 300/3100 此时 auto 的实际列宽为100px */grid-template-columns: auto auto auto; width: 300px;
}
.d4 {display: grid;/* 此时 auto 的实际列宽取决于这一列项目中的最大宽度 */grid-template-columns: 150px auto 50px;
}页面效果150px auto 100px ② 当实际列数少于定义的列数时
该属性除了定义了列宽之外属性值的数量还决定了列的数量定义几个属性值就会创建几列。即使实际列数小于定义的列数但是缺失的列依旧会占据对应的空间撑起容器的宽度。
如果容器已经设置了宽度则宽度不会受列数影响就算有项目超出容器空间之外超出的部分也不会影响其他元素的整体布局不占用普通文档流位置。
.d2 {display: grid;/* 设置三列列宽 宽度都为100px */grid-template-columns: 100px 100px 100px;
}页面效果实际只有2个项目 ③ 定义垂直网格线的名称
该属性在定义列宽的同时还可以使用[]定义垂直网格线的名称在后续对单元格进行定位时需要使用该名称。定义三列则会产生四条垂直网格线。定义语法为
.d2 {display: grid;/* 设置三列列宽 宽度都为100px 四条垂直网格线的名称为 a1 a2 a3 a4 */grid-template-columns: [a1] 100px [a2] 100px [a3] 100px [a4];
} 网格布局允许同一根线有多个名字只需在[]中定义多个值即可例如[a1 a2]。
3、grid-template-rows
① 定义行高的各种方式
该属性用来定义网格布局中每一行的行高属性值可以是px、百分比、repeat()、auto-fill、fr、minmax()、auto等等。
.d2 {display: grid;/* 设置三列列宽 宽度都为100px */grid-template-columns: 100px 100px 100px;/* 设置三行行高 高度都为100px */grid-template-rows: 100px 100px 100px;
}页面效果 定义行高的方式整体与上面定义列宽的各种方式相同此处只针对一些不同点讲述其余就不进行太多赘述了。
auto-fill 关键字在设置行高时与设置列宽有所不同将其设置为repeat(n,m) 的参数n表示在确定好行高m和容器高度的基础上尽可能的在一列上设置更多行的行高为m。如果容器的高度大于等于行数×行高则所有行都能正常设置行高。如果容器的高度小于行数×行高则先会从上到下的顺序依次设置行高为m直到剩余空间小于m然后剩余的行均分剩余的空间行高也就不再是m。
.d2 {display: grid;/* 设置三列列宽 宽度都为100px */grid-template-columns: 100px 100px 100px;/* 设置行高 200px 此时9个项目 共三行 实际行高为 200px 50px 50px */grid-template-rows: repeat(auto-fill, 200px);/* 容器宽度为300px */height: 300px;
}页面效果 如果不设置某行的行高且未设置容器高度则该行将以当前行中所有项目的最大高度为行高如果不设置某行的行高但设置了容器高度且已经设置的行高不超过容器高度则所有未设置行高的行均分容器剩余高度如果不设置某行的行高但设置了容器高度且已经设置的行高超过了容器高度则未设置行高的行将以当前行中所有项目的最大高度为行高。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;/* 有9个项目 应该是三行 但只定义了两行的行高 且超出了容器的高度 因此第三行将会以本行项目的最大高度为行高 */grid-template-rows: 200px 120px;/* 设置容器的高度 */height: 300px;
}
.d2-7 {/* 设置第三行项目中的最大高度 */height: 50px;
}页面效果 ② 当实际行数不等于定义的行数时
该属性除了定义了行高之外属性值的数量还决定了行的数量如果容器没有设置高度即使实际行数小于定义的行数但是缺失的行依旧会占据对应的空间撑起容器的高度。如果实际的行数大于定义的行数则多出来的行将会以本行中项目的最大高度为行高撑起容器的高度。
如果容器已经设置了高度则高度不会受行数影响就算有项目超出容器空间之外超出的部分也不会影响其他元素的整体布局不占用普通文档流位置。
.d2 {display: grid;/* 设置三列列宽 宽度都为100px */grid-template-columns: 100px 100px 100px;/* 设置三行行高 高度都为100px */grid-template-rows: 100px 100px 100px;
}页面效果实际只有2个项目 ③ 定义水平网格线的名称
该属性在定义列宽的同时还可以使用[]定义水平网格线的名称在后续对单元格进行定位时需要使用该名称。定义三行则会产生四条水平网格线。定义语法为
.d2 {display: grid;/* 设置三行行高 高度都为100px 四条水平网格线的名称为 b1 b2 b3 b4 */grid-template-rows: [b1] 100px [b2] 100px [b3] 100px [b4];
} 网格布局允许同一根线有多个名字只需在[]中定义多个值即可比如[b1 b2]。
4、column-gap原grid-column-gap属性
该属性用来定义网格布局中列与列的之间的间隔也就是列间距。列间距的只存在于列与列之间也就是说如果有三列项目则存在两个列间距。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px; /* 设置列间距为20px */column-gap: 20px;
}页面效果 5、row-gap原grid-row-gap属性
该属性用来定义网格布局中行与行的之间的间隔也就是行间距。行间距的只存在于行与行之间也就是说如果有三行项目则存在两个行间距。如果容器没有设置高度则容器高度等于所有行高的和加上所有行间距的和。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px; /* 设置列间距为20px */column-gap: 20px;/* 设置行间距为20px */row-gap: 20px;
}页面效果 6、gap
gap属性是column-gap和row-gap的合并简写形式属性值有两个第一个值表示行间距row-gap的值第二个值表示列间距column-gap的值。
如果行间距和列间距的值相同则可以省略第二个值只写一个值浏览器会默认第二个值等于第一个值。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px; /* 设置行间距和列间距为20px */gap: 20px;
}页面效果 7、grid-template-areas
该属性用于在网格布局中指定“区域”一个区域可以由一个或多个单元格组成定义的区域用于项目属性grid-area指定项目位置。该属性值的以单元格的排列形式为基础每行对应一个x x x字符串字符串中的每个小字符串对应一个单元格也对应着生成的区域名。
/* 容器有9个项目 三行三列 因此有三个字符串 每个字符串中有三个区域名 生成三个区域 */
grid-template-areas: a1 a2 a3 b1 b2 b3 c1 c2 c3; 如果想要定义多个单元格为一个区域则只需要将想要合并的单元格对应的区域名设置相同即可但前提是想要合并的单元格之间需要相互接触连接。
/* 容器有9个项目 三行三列 因此有三个字符串 区域名如果相同则会合并成一个区域 */
/* 此时是声明了三个区域 */
grid-template-areas: a a a b b b c c c; 如果某个单元格不需要被划分到任何区域则只需要在该单元格对应的位置使用.来作为区域名即可。
grid-template-areas: a a . b b . . c c; 还有要注意的一点是区域的命名会影响到网格线的命名每个区域的起始网格线垂直、水平会自动命名为区域名-start终止网格线垂直、水平自动命名为区域名-end。例如区域名为header则起始的水平网格线和垂直网格线叫做header-start终止的水平网格线和垂直网格线叫做header-end。
8、gride-auto-flow
该属性用于这是网格布局的项目排列顺序默认值为row即排列顺序为按行排列就是从左到右先排满第一行然后再从左到右开始排第二行依次排列。该属性值有
column即排列顺序为按列排列就是从上到下先排满第一列然后再从上到下开始排第二列依次排列。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px; grid-auto-flow: column;
}页面效果 row dense用于设置在部分项目指定位置后剩余项目的的排列顺序为按行排列即在排除掉指定项目位置的空间后剩余项目依次从左到右按行排列。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px; grid-auto-flow: row dense;
}
.d2-1 {/* 指定该项目左边框对应第一条垂直网格线 右边框对应第三条垂直网格线 即该项目宽度为两列列宽 */grid-column-start: 1;grid-column-end: 3;
}
.d2-2 {/* 指定该项目左边框对应第一条垂直网格线 右边框对应第三条垂直网格线 即该项目宽度为两列列宽 *//* 因为两个项目的对应的垂直网格线相同 所以将会按照元素顺序上下排列 */grid-column-start: 1;grid-column-end: 3;
}页面效果
此时因为项目1和项目2占据了两列空间因此会有两个项目超出三行排列在第四行该行的行高取决于当前行项目中的最大高度。 column dense用于设置在部分项目指定位置后剩余项目的的排列顺序为按列排列即在排除掉指定项目位置的空间后剩余项目依次从上到下按列排列。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px; grid-auto-flow: column dense;
}
.d2-1 {/* 指定该项目左边框对应第一条垂直网格线 右边框对应第三条垂直网格线 即该项目宽度为两列列宽 */grid-column-start: 1;grid-column-end: 3;
}
.d2-2 {/* 指定该项目左边框对应第一条垂直网格线 右边框对应第三条垂直网格线 即该项目宽度为两列列宽 *//* 因为两个项目的对应的垂直网格线相同 所以将会按照元素顺序上下排列 */grid-column-start: 1;grid-column-end: 3;
}页面效果
此时因为项目1和项目2占据了两列空间所有会有两个项目超出三列出现在第四列该列的列宽取决于容器的剩余宽度。 9、justify-items
该属性用于设置网格布局中当单元格内容宽度小于单元格的宽度时内容的水平对齐位置左中右。该属性值有。 stretch(默认值)将内容进行拉伸使其占满单元格的整个宽度。 start内容宽度不变左侧边框对齐单元格的左侧边缘。 end内容宽度不变右侧边框对齐单元格的右侧边缘。 center内容宽度不变使其在单元格内水平居中。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px; /* 设置内容水平居中 */justify-items: center;
}
.d2div {width: 60px;
}页面效果 10、align-items
该属性用于设置网格布局中当单元格内容高度小于单元格的高度时内容的垂直对齐位置上中下。该属性值有 stretch(默认值)将内容高度进行拉伸使其占满单元格的整个高度。 start内容高度不变上侧边框对齐单元格的上侧边缘。 end内容高度不变下侧边框对齐单元格的下侧边缘。 center内容高度不变使其在单元格内垂直居中。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px; /* 设置内容水平居中 */justify-items: center;/* 设置内容垂直居中 */align-items: center;
}
.d2div {width: 60px;height: 60px;
}页面效果 11、place-items
该属性是align-items属性和justify-items属性的简写第一个值表示单元格内容的垂直对齐位置第二个值表示单元格内容的水平对齐位置。
如果两个值相同则可以省略第二个值只写一个值浏览器会默认第二个值等于第一个值。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 设置内容垂直、水平居中 */place-items: center;
}
.d2div {width: 60px;height: 60px;
}页面效果
同上图一致。
12、justify-content
该属性用于设置网格布局中当整个内容区域宽度小于容器的宽度时内容区域在容器中的水平位置左中右。属性值有
start(默认值)内容区域左边框对齐容器的左边缘。end内容区域右边框对齐容器的右边缘。center内容区域在容器中水平居中。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 设置内容区域在容器中水平居中 */justify-content: center;
}页面效果 stretch如果内容区域中存在没有设置宽度和列宽的的项目时拉伸这些项目使整个内容区域的宽度等于容器的宽度。space-around使每个项目的两侧间隔均分容器水平方向剩余的空间项目两侧的间隔相等因此项目之间的间隔比项目与容器边缘的间隔大一倍。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 设置内容区域在容器中水平居中 */justify-content: space-around;
}页面效果 space-between仅项目与项目之间的间隔均分容器水平方向的剩余空间但最左和最右的项目与容器边缘之间没有间隔。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 设置内容区域在容器中水平居中 */justify-content: space-around;
}页面效果 space-evenly项目与项目之间以及项目与容器边缘之间的间隔均分容器水平方向的剩余空间。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 设置内容区域在容器中水平居中 */justify-content: space-evenly;
}页面效果 13、align-content
该属性用于设置网格布局中当整个内容区域高度小于容器的高度时内容区域在容器中的垂直位置上中下。属性值有
start(默认值)内容区域上边框对齐容器的上边缘。end内容区域下边框对齐容器的下边缘。center内容区域在容器中垂直居中。stretch如果内容区域中存在没有设置高度和行高的的项目时拉伸这些项目使那整个内容区域的高度等于容器的高度。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;/* 第三行不设置行高 和 项目高度 */grid-template-rows: 100px 100px;/* 设置内容区域中未设置高度和行高的项目在容器中垂直拉伸 充满容器 */align-content: stretch;height: 500px;
}页面效果 space-around使每个项目的两侧间隔均分容器垂直方向剩余的空间项目两侧的间隔相等因此项目之间的间隔比项目与容器边缘的间隔大一倍。space-between仅项目与项目之间的间隔均分容器垂直方向的剩余空间但最左和最右的项目与容器边缘之间没有间隔。space-evenly项目与项目之间以及项目与容器边缘之间的间隔均分容器垂直方向的剩余空间。
14、place-content
该属性是align-content属性和justify-content属性的简写第一个值表内容区域的垂直对齐位置第二个值表示内容区域的水平对齐位置。
如果两个值相同则可以省略第二个值只写一个值浏览器会默认第二个值等于第一个值。
.item {place-content: center;
}
/* 等同于 */
.item {place-content: center center;
}
/* 等同于 */
.item {align-content: center;justify-content: center;
}15、grid-auto-columns
该属性用来设置因为项目多余或因为部分项目定位而导致浏览器自动创建的单元格的列宽是多少用法与grid-template-columns相同。如果不指定该属性则浏览器会根据项目的宽度决定当前列的列宽。
.d2 {display: grid;/* 容器只定义三列 */grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 设置多出来的列 列宽为50px */grid-auto-columns: 50px
}
.d2-9 {/* 定义第九个项目 在第四行第四列 */grid-column-start: 4;grid-row-start: 4
}页面效果 16、grid-auto-rows
该属性用来设置因为项目多出或部分项目定位而导致浏览器自动创建的单元格的行高是多少用法与grid-template-rows相同。如果不指定该属性则浏览器会根据项目的高度决定当前行的行高。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;/* 容器只定义两行 但是9个项目会排成三行 */grid-template-rows: 100px 100px;/* 设置多出来的行 行高为50px */grid-auto-rows: 50px
}页面效果 17、grid-template
该属性是grid-template-columns、grid-template-rows和grid-template-areas这三个属性的简写形式。
从代码易读性考虑不建议使用该属性所以这里就不过多讲述了。如想了解请查看grid-template。
18、grid
该属性是grid-template-rows、grid-template-columns、grid-template-areas、 grid-auto-rows、grid-auto-columns、grid-auto-flow这六个属性的简写形式。
从代码易读性考虑不建议使用该属性所以这里就不过多讲述了。如想了解请查看grid。
三、项目属性
1、属性列举
设置display: grid;的元素即为容器元素容器内部的直接子元素即为项目元素定义在项目上的相关属性就被称为项目属性。项目属性共有10条包含以下
grid-column-start定义项目左边框所对齐的垂直网格线。grid-column-end定义项目右边框所对齐的垂直网格线。grid-column同时定义项目左边框和右边框所对齐的网格线是grid-column-start和grid-column-end的简写形式。grid-row-start定义项目上边框所对齐的水平网格线。grid-row-end定义项目下边框所对齐的水平网格线。grid-row同时定义项目上边框和下边框所对齐的网格线是grid-row-start和grid-row-end的简写形式。grid-area定义项目位于哪个区域区域由容器属性grid-template-areas定义。justify-self定义项目在单元格区域内的水平位置左中右与justify-items用法一致但效果仅限于当前项目。align-self定义项目在单元格区域内的垂直位置上中下与align-items用法一致但效果仅限于当前项目。place-self同时定义项目在单元格区域内的水平和垂直位置是align-self属性和justify-self属性的简写。
2、grid-column-start
3、grid-column-end
这两个属性用于指定项目在容器内的水平定位类似于CSS的absolute定位但不会脱离文档流不过此处的定位是通过指定边框对应的网格线来进行定位。设置定位的项目会出现在定位的位置而其余普通项目则会按照正常排序进行排列。
该属性有多个类型的值
auto默认值一个关键字表示项目按照正常排序规则自动排列占据1个单元格。integer一个是数字可以是正数和负数设置为0则无效。正数表示项目位置从左侧第一条网格线进行计数负数表示项目从显式定义的最后一条网格线再往右进行扩展。正常一个项目对应一个单元格但是通过定位可以设置项目跨多个单元格使其占据多个单元格。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}
.d2-2 {/* 指定左边框对应位置是第2条垂直网格线 */grid-column-start: 2;/* 指定右边框对应位置是第4条垂直网格线 */grid-column-end: 4;
}页面效果 custom-ident一个名称表示某个网格线名称像是通过grid-template-areas属性产生的网格线名称或者在定义行高和列宽时定义的网格线名称。如果存在对应的网格线则进行对齐如果不存在对应的网格线则会以第n1条网格线作为起始网格线n为项目显式定义的网格线。name integer一个名称加一个数字表示仅计算具有该名称的网格线然后计数第几条网格线进行定位。span integer一个关键字加一个数字sapn关键字表示跨越后面的数字表示跨域多少个单元格跨越的起始位置为默认位置。如果省略integer则默认为1不可设置负数和0.
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}
.d2-2 {/* 指定左边框对应位置是初始位置向右两个单元格 */grid-column-start: span 2;/* 指定右边框对应位置是初始位置向右两个单元格 */grid-column-end: span 2;
}页面效果 4、grid-row-start
5、grid-row-end
这两个属性用于指定项目在容器内的垂直定位类似于CSS的absolute定位但不会脱离文档流不过此处的定位是通过指定边框对应的网格线来进行定位。设置定位的项目会出现在定位的位置而其余普通项目则会按照正常排序进行排列。
该属性的属性值与grid-column-start、grid-column-end相同有
auto默认值integercustom-identname integername integerspan integer
各个属性值的效果也相同只不过一个是定位左右边框位置一个是定位上下边框的位置在此就不重复讲述了。
**注意**如果在容器中有多个项目使用属性进行定位导致项目之间发生重叠此时需要z-index属性指定项目的层级顺序值越大层级越高。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}
.d2-2 {/* 项目的左边框从第二条垂直网格线开始 右边框到第四条垂直网格线结束 */grid-column-start: 2;grid-column-end: 4;/* 项目的上边框从第一条水平网格线开始 下边框到第三条水平网格线结束 */grid-row-start: 1;grid-row-end: 3;/* 指定z-index */z-index: 1;
}
.d2-3 {/* 项目的左边框从第三条垂直网格线开始 右边框到第四条垂直网格线结束 */grid-column-start: 3;grid-column-end: 4;/* 项目的上边框从第一条水平网格线开始 下边框到第二条水平网格线结束 */grid-row-start: 1;grid-row-end: 2;/* 指定z-index */z-index: 2;
}页面效果 6、grid-column
7、grid-row
这两条属性分别是grid-column-start和grid-column-end、grid-row-start和grid-row-end的简写形式。可以同时定义起始网格线和终止网格线语法格式如下
grid-column: start-line / end-line;
grid-row: start-line / end-line; 属性值的类型与grid-*-start等相同可以是span、数字等等例如
.item {grid-column: 1 / 3;grid-row: 1 / 2;
}
/* 等同于 */
.item {grid-column-start: 1;grid-column-end: 3;grid-row-start: 1;grid-row-end: 2;
} 属性的第二个值可以省略默认第二个值是第一个值1即项目只跨越一个单元格。
.item {grid-column: 2;grid-row: 2;
}8、grid-area
该属性用于指定项目定位在某个区域内区域由容器属性grid-template-areas定义属性值为区域名。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;/* 容器有9个项目 三行三列 因此有三个字符串 每个字符串中有三个区域名 每行生成三个区域 */grid-template-areas: a1 a2 a3 b1 b2 b3 c1 c2 c3;
}
.d2-2 {/* 指定项目在区域 a3 中 */grid-area: a3;
}页面效果 除了指定项目的定位区域外该属性还可以作为grid-row-start、grid-column-start、grid-row-end、grid-column-end四条属性的简写语法如下
grid-area: row-start / column-start / row-end / column-end;9、justify-self
该属性用于上设置当前项目在单元格中的水平位置左中右跟justify-items属性的用法一致但只作用于当前项目。属性值有
stretch(默认值)将内容进行拉伸使其占满单元格的整个宽度。start内容宽度不变左侧边框对齐单元格的左侧边缘。end内容宽度不变右侧边框对齐单元格的右侧边缘。center内容宽度不变使其在单元格内水平居中。
10、align-self
该属性用于上设置当前项目在单元格中的垂直位置上中下跟align-items属性的用法一致但只作用于当前项目。
stretch(默认值)将内容进行拉伸使其占满单元格的整个高度。start内容高度不变上侧边框对齐单元格的上侧边缘。end内容高度不变下侧边框对齐单元格的下侧边缘。center内容高度不变使其在单元格内垂直居中。
.d2 {display: grid;grid-template-columns: 100px 100px 100px;grid-template-rows: 100px 100px 100px;
}
.d2div {width: 60px;height: 60px;
}
.d2-2 {/* 水平居中 */justify-self: center;/* 垂直居中 */align-self: center;
}页面效果 11、place-self
该属性是align-self属性和justify-self属性的简写形式语法格式如下
place-self: align-self justify-self; 如果两个属性值相等则可以省略第二个值浏览器默认等于第一个值。
.item {place-self: center;
}
/* 等同于 */
.item {place-self: center center;
}
/* 等同于 */
.item {justify-selfcenter;align-selfcenter;
}四、参考资料
阮一峰的CSS Grid教程
MDN Grid文档
