网格术语
网格线(Grid Lines)
网格线组成了网格,他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。
上图突出显示的红线就是第二列的网格线(line2)
-
网格轨道(Grid Track)
网格轨道是就是相邻两条网格线之间的空间,就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小,用来控制宽度或高度。
图中突出显示的就是行线line2和line3之间组成的网格轨道 - 网格单元格(Grid Cell)
网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。
-
网格区域(Grid Area)
网格区域是由任意四条网格线组成的空间,所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。
图中突出显示的网格区域是行线line1、line3和列线line2、line4之间的区域,其主要包括了四个网格单元格。 - 网格容器(Grid Containers)
通过使用display属性给元素显式设置了属性值grid或inline-grid,此时这个元素将自动变成网格容器。这个类似于flexbox一样,将元素设置设置为display:flex,元素将自动变成弹性盒模型。 - 网格单元格顺序(order)
网格单元格顺序和Flexbox模块一样,通过order属性来对网格单父元格进行顺序重排。
定义一个网格
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px 10px 100px 10px 100px;//列宽 列间距 列宽 列间距 列宽 列间距 列宽
grid-template-rows: auto 10px auto 10px auto;//行高 行间距 行高 行间距 行高
}
基于网格的占位区
对于网格线,在网格布局中有两种,一种是列线,另一种是行线。对应的个网格单元格都有列线起始线(grid-column-start)、列线终止线(grid-column-end)和行线起始线(grid-row-start)、行线终止线(grid-row-end)。
<div class="wrapper">
<div class="box a">A</div>
<div class="box b">B</div>
<div class="box c">C</div>
<div class="box d">D</div>
<div class="box e">E</div>
</div>
body {
padding: 50px;
}
.wrapper {
display: grid;
grid-template-columns: 100px 10px 100px ;
grid-template-rows: auto 10px auto 10px auto;
}
.box {
background-color: #444;
color: #fff;
font-size: 150%;
padding: 20px;
text-align: center;
}
.a{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
.b {
grid-column-start: 3;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 2;
}
//以下为简写方式
.c {
grid-column: 1/2;
grid-row: 3/4;
}
//以下为网格区域写法grid-area:row-start/column-start/row-end/column-end
.d {
grid-area: 3/3/4/4
}
.e {
grid-area:5/1/6/2
}
如下图所示:
gridLayout1.jpg
网友评论