羊了个羊的中强大的Grid布局
Grid布局中的概念
几个函数、单位
auto-fill 与 auto-fit的区别
Grid布局和其他布局的区别
网格线编号布局
网格线名称布局
网格区域名称布局
Grid布局轴线对齐
对齐元素到块轴的属性是align-items align-self
对齐元素到行轴的属性是justify-items justify-self
对齐网格轨道到块轴的属性是 align-content
对齐网格轨道到行轴的属性是 justify-content
布局示例
Grid布局中的概念Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid布局远比Flex布局强大。
学习grid布局首先要了解一些名词概念的含义
网格容器: 把一个元素设为网格容器的方法，添加属性 display: grid/inline-grid；容器上有它专门的属性；
网格线：或称为网格轨道，把网格容器内的网格单元分割开，用浏览器的Grid Inspector 功能可看到网格线；
网格项目：或称网格元素，就是放在网格容器内的内容；
网格单元/网格区域：网格元素中的最小单位，多个网格单元可称为网格区域；
网格间距：网格线/网格轨道的宽度称为成网格间距；
嵌套网格：网格容器内可嵌套另一个或几个网格；
Grid Inspector：浏览器提供的方便查看grid布局的工具；
几个函数、单位有几个grid布局中特有的单位/函数
fr：网格容器中可用空间的一等分
repeat()：标识多个重复部分，例如repeat(3, 100px)，表示3个100px；
minmax()：函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值，比如minmax(100px, 200px)表示长度范围是最小值100px，最大值200px;
span：跨度，网格线布局时，表示网格项目跨几个网格单元；
auto-fill：有时网格单元的大小是固定的，但是容器的大小不确定，这个属性会根据容器大小尽可能多的分配网格，剩余的均分给网格单元；空白的网格单元留空；
auto-fit：有时网格单元的大小是固定的，但是容器的大小不确定，这个属性会根据容器大小尽可能多的分配网格，剩余的均分给网格单元；空白的网格单元不留空，再次均分给网格单元；
auto-fill 与 auto-fit的区别ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
// grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
其中核心为：grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))；意思每个子元素至少需要200px的宽度，如果视口宽度足够就平均分配剩余空间给每个子元素，至于换行问题需要看分配的所有的轨道空间够不够200，如果不够200就换一行，把多的元素换行，比如有580px（不考虑gap），不足以容纳3*200=600，3个子元素，那么就换行，一行两个子元素，那么剩余的80px呢，这就属于剩余空间 ，将（1fr）平均分配给两个轨道。
这里涉及填充模式中的auto-fit和auto-fill的区别，auto-fit和auto-fill只有在容器宽度大于子元素的最小宽度总和时才有显示区别，例如容器随着窗口现在有1500px宽度，子元素在一行排列总共需要600px（不考虑gap)。
auto-fit和auto-fill首先会尽可能多的创建基于min的200px的轨道宽度，例如创建1500/200=7.5。那么会有7个轨道的200px还剩余了100px的剩余空间，接着会把这100px再次分配到这7个轨道中，100/7=14.28。所以每个轨道的宽度现在为214.28px。到这里auto-fill和auto-fit做的事情是一样的：
1.首先尽可能的以最小宽度创建轨道；
2.不足一个轨道的空间，等分给已有的轨道；
接下来：auto-fil auto-fill对空白轨道的处理不同
3.auto-fill 不占用空白轨道，auto-fit把空白轨道均分给有内容轨道；
值得注意的是这种区别是在容器中元素数量元素的最小宽度<容器的总宽度时才会显示看到的差异，如果元素数量最小宽度>容器宽度，那么auto-fill和auto-fit展现的效果是一样的
传统布局方式：利用position属性 + display属性 + float属性布局, 兼容性最好, 但是效率低, 麻烦!
flex布局方式：有自己的一套属性, 效率高, 学习成本低, 兼容性强!
grid布局：网格布局(grid)是最强大的布局方案, 但是知识点比较多, 学习成本相对较高, 目前兼容性不如flex布局！另外grid布局可通过设置属性变为和flex布局一样的效果。
网格线编号布局当你使用网格布局时，编号线总是存在。这些线从 1 开始按行和列编号。
例如：我们定义一个三行三列的布局如下，行和列方向上我们有 4 条线。
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 100px);
}
现需要一个网格区域是从最左上角开始，横向占一列，纵向占三行，可以如下写：
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 4;
grid-column和grid-row可简写如下：
grid-column: 1/2;
grid-row: 1/4;
可用默认跨度为1简写如下：
grid-column-start: 1;
grid-row-start: 1;
grid-row-end: 4;
可用默认跨度为1加上grid-column和grid-row可简写：
grid-column: 1;
grid-row: 1/4;
可使用grid-area简写为：
grid-area: 1/1/4/2;
可使用span表示跨度简写为：
grid-column: 1;
grid-row: 1 / span 3;
网格线名称布局
用grid-template-rows和grid-template-columns属性定义网格时，可命名网格线；
.wrap {
display: grid;
grid-template-columns: [main-start] 1fr [content-start] 1fr [content-end] 1fr [main-end];
grid-template-rows: [main-start] 100px [content-start] 100px [content-end] 100px [content-end];
}
用grid-area命名网格区域，则隐式的创建行列网格线；
例如：
grid-area: hd;
则隐式的命名网格线： hd-start hd-end
用[sidebar-start main-start]可定义网格线的多个名字；
有了网格线名称则可以用来定位布局项目：
.box1 {
grid-column-start: main-start;
grid-column-end: main-end;
grid-row-start: main-start;
grid-row-end: main-end;
}
网格区域名称布局
使用grid-area命名网格区域，在网格容器内用grid-template-areas指定区域位置：
.header { grid-area: hd }
.footer { grid-area: ft }
.sidebar { grid-area: sb }
.content { grid-area: main }
.wrap {
display: grid;
grid-template-rows: minmax(100px, auto);
grid-template-columns: repeat(3 1fr);
grid-template-areas:
"hd hd hd"
"sb main main"
"ft ft ft"
}
使用grid-template可同时设置属性：grid-template-rows、grid-template-columns、grid-template-areas
上例可简写：
.header { grid-area: hd }
.footer { grid-area: ft }
.sidebar { grid-area: sb }
.content { grid-area: main }
.wrap {
display: grid;
grid-template:
"hd hd hd" minmax(100px auto)
"sb main main" minmax(100px auto)
"ft ft ft" minmax(100px auto)
/ 1fr 1fr 1fr
}
使用grid可同时设置属性：grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow；注：此属性会把 grid-gap值重置为0；
上例可简写：
.header { grid-area: hd }
.footer { grid-area: ft }
.sidebar { grid-area: sb }
.content { grid-area: main }
.wrap {
display: grid;
grid:
"hd hd hd" minmax(100px auto)
"sb main main" minmax(100px auto)
"ft ft ft" minmax(100px auto)
/ 1fr 1fr 1fr
}
grid-template-areas中留空的单元用句点符'.'占位；
网格布局方式下共有两条轴线用于对齐——块轴（一般垂直方向的）和行轴（内联轴）。块方向的轴是采用块布局时块的排列方向。行轴与块方向的轴垂直，它的方向和常规内联流中的文本方向一致。
对齐元素到块轴的属性是align-items align-self作用在网格容器上的属性 align-items 的取值有：
auto
normal
start
end
center
stretch
baseline
first baseline
last baseline
作用在网格元素上的属性 align-self 的取值同 align-items
justify-items作用在网格容器上，justify-self作用在网格元素上，取指同以上两个属性。
place-items 属性是对 align-items 和 justify-items 的简写。
place-self 属性是对 align-self 和 justify-self 的简写。
作用在网格容器上，其值有：
normal
start
end
center
stretch
space-around
space-between
space-evenly
baseline
first baseline
last baseline
对齐网格轨道到行轴的属性是 justify-content其属性值同align-content，space-content是对 align-content justify-content的缩写。
使元素内容水平、垂直居中
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 200px;
}
.item1 {
align-self: center;
justify-self: center;
}
使元素在网格容器内水平、垂直居中
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 200px);
grid-template-areas:
". . . "
". a . "
". . . ";
}
.item1 {
grid-area: a;
}
自动填充网格轨道
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
}
灵活的轨道数量
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
以上就是羊了个羊的中强大的Grid布局的详细内容，更多关于羊了个羊 Grid布局的资料请关注软件开发网其它相关文章！
