grid布局—让css变得更简单
2019-03-06 本文已影响60人
422ccfa02512
一、启用网格：display:grid;
通过将属性display的值设为grid，使 HTML 元素变为网格容器。在 CSS 网格中，父元素称为容器（container），它的子元素称为项（items）。
二、设置列数：grid-template-columns
grid-template-columns属性值的个数表示网格的列数，而每个值表示对应列的宽度。
三、设置行数：grid-template-rows
行数属性值的个数表示网格的行数，每个值表示对应行的高度。
下面是一个3列2行，每列100px,每行50px;的container容器
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/* 下面代码表示将网格分为3列，每列宽度100px */
grid-template-columns:100px 100px 100px;
/* 下面代码表示将网格分为2行，每行高度50px */
grid-template-rows:50px 50px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下：
四、CSS 网格单位
在 CSS 网格中，可以使用绝对定位和相对定位单位如px和em来确定行或列的大小。
fr：设置列或行占剩余空间的一个比例，
auto：设置列宽或行高自动等于它的内容的宽度或高度，
%：将列或行调整为它的容器宽度或高度的百分比，
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
width: 100%;
background: LightGray;
display: grid;
/*下面代码为将容器分为3列，第二列为100px，剩下的按比例分为3份，第一列占1份，第三列占2份*/
grid-template-columns: 1fr 100px 2fr;
/*将容器分为2行，每一行高度50px*/
grid-template-rows: 50px 50px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下：
五、创建多列之间的间距：grid-column-gap
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* 多列之间的间距为10px */
grid-column-gap: 10px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下：
六、创建多列之间的间距：grid-row-gap
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* 设置多行的间距为10px */
grid-row-gap:10px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下：
七、grid-gap快速设置行与列的间隙
grid-gap是grid-row-gap和grid-column-gap的简写，它更方便使用。如果grid-gap有一个值，行与行之间和列与列之间将添加等于该值的间隙。但是，如果有两个值，第一个值将作为行间隙的高度值，第二个值是列间隙的宽度值。
<style>
.d1{background:LightSkyBlue;}
.d2{background:LightSalmon;}
.d3{background:PaleTurquoise;}
.d4{background:LightPink;}
.d5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
/* 在行之间添加10px的间隙，在列之间添加20px的间隙 */
grid-gap:10px 20px;
}
</style>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
<div class="d3">3</div>
<div class="d4">4</div>
<div class="d5">5</div>
</div>
效果如下：
八、线（lines）
网格的假想水平线和垂直线被称为线（lines）。这些线在网格的左上角从 1 开始编号，垂直线向右、水平线向下累加计数。
这是一个 3x3 网格的线条：
九、grid-column属性
grid-column属性是第一个用于网格项本身的属性。使用用grid-column属性定义网格项开始和结束的位置，进而控制每个网格项占用的列数。如下
grid-column: 2 / 4;这会让网格项从左侧第二条线开始到第四条线结束，占用两列。
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* 使类为item5的网格项占用网格的最后两列。 */
grid-column: 2 / 4;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下：
十、grid-row属性
grid-row:可以用grid-row属性来确定开始和结束的水平线。
grid-row: 2 / 4;：这会让网格项从上方第二条线开始到第四条线结束，占用两行。
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
grid-column: 2 / 4;
/* 使类为item5的元素占用最后两行。 */
grid-row: 2 / 4;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下：
十一、 justify-self 水平对齐
在 CSS 网格中，每个网格项的内容分别位于被称为单元格（cell）的框内。你可以使用网格项的justify-self属性，设置其内容的位置在单元格内沿行轴对齐的方式。默认情况下，这个属性的值是stretch，这将使内容占满整个单元格的宽度。该 CSS 网格属性也可以使用其他的值：
start：使内容在单元格左侧对齐，
center：使内容在单元格居中对齐，
end：使内容在单元格右侧对齐.
<style>
.item1{background: LightSkyBlue;}
.item2 {
background: LightSalmon;
/* 使用justify-self属性让类为item2的网格项居中。 */
justify-self:center;
}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下：
十二、align-self 垂直对齐
使用align-self属性，设置内容在单元格内垂直对齐方式。默认情况下，这个属性的值是stretch，这将使内容占满整个单元格的高度。
start：使内容在单元格顶部对齐，
center：使内容在单元格垂直对齐，
end：使内容在单元格底部对齐.
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3 {
background: PaleTurquoise;
/* 值为end使类为item3的网格项底端对齐 */
align-self:end;
}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
十三、justify-items水平对齐所有项目
对网格容器使用justify-items使它们一次性沿行轴对齐，它将使网格中所有的网格项按所设置的方式对齐。默认情况下，这个属性的值是stretch，这将使所有网格内容占满整个单元格的宽度。
start：使所有网格延行轴左侧对齐，
center：使所有网格延行轴居中对齐，
end：使所有网格延行轴右侧对齐.
使用justify-itemss
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* justify-items水平对齐所有子项目 */
justify-items:center;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
十四、align-items 垂直对齐所有项目
对网格容器使用align-items属性可以给网格中所有的网格项设置沿列轴对齐的方式。默认情况下，这个属性的值是stretch，这将使所有占满整个单元格的高度。
start：将所有内容对齐到网格区域(grid area)的顶部，
center：将所有内容对齐到网格区域(grid area)的中间（垂直居中），
end：将所有内容对齐到网格区域(grid area)的底部.
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
/* 让所有网格列轴末尾对齐。 */
align-items:end;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下
十五、 区域（area）——grid-template-areas
可以通过给容器加上grid-template-areas来实现，将网格中的一些网格单元格组合成一个区域（area），并为该区域指定一个自定义名称。
例如：下面的代码将顶部三个单元格合并成一个名为header的区域，将底部三个单元格合并为一个名为footer的区域，并在中间行生成两个区域————advert和content。
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
注意：
- 在代码中，
每个单词代表一个网格单元格，每对引号代表一行。 - 除了自定义标签，你还能使用句点（.）来表示一个空单元格
十六、 grid-area属性设置元素在命名区域中的位置
如下：使用grid-area属性，把类为item5元素放到container容器中的footer区域
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/*使用grid-area属性，把类为item5元素放到footer区域*/
grid-area:footer;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
grid-template-areas:
"header header header"
"advert content content"
"footer footer footer";
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下：
十七、 使用grid-area创建区域模板
除了使用grid-area放置在模板中命名区域的位置的方式，如果网格中没有定义区域模板，你也通过grid-area创建区域模板，写法如下：
grid-area: 起始水平线 / 起始垂直线 / 末尾水平线 / 终止垂直线 ;
item1 { grid-area: 1/1/2/4; }:网格项将占用第 1 条和第 2 条水平线之间的行及第 1 条和第 4 条垂直线之间的列。
下面是：
用grid-area属性将类为item5的元素放置在第 3 条和第 4 条水平线及第 1 条和第 4 条垂直线之间的区域内
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5 {
background: PaleGreen;
/* 用grid-area属性将类为item5的元素放置在第 3 条和第 4 条水平线及第 1 条和第 4 条垂直线之间的区域内。*/
grid-area:3/1/4/4;
}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
十八、使用 repeat 函数减少重复
当使用grid-template-columns和grid-template-rows定义网格结构时，你需要为添加的每一行和每一列都输入一个值。有一种更好的方法——使用repeat方法指定行或列的重复次数，后面加上逗号以及需要重复的值。
写法如下：
grid-template-rows: repeat(100, 50px);：该行代表有一个添加 100 行网格的例子，使每行高度均为 50px：
示例：
用repeat代替grid-template-columns属性的值中的重复代码。
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
/* grid-template-columns: 1fr 1fr 1fr; */
/* 使用repeat方法代替上面注释掉的代码 */
grid-template-columns:repeat(3,1fr);
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下：
十九、使用 minmax 函数限制项目大小
内置函数minmax也可以可用于设置grid-template-columns和grid-template-rows的值。它的作用是在网格容器改变大小时限制网格项的大小。为此，你需要指定网格项允许的尺寸范围。
语法：
grid-template-columns: 100px minmax(50px, 200px);：grid-template-columns被设置为添加两列，第一列 100px 宽，第二列宽度最小值是 50px，最大值是 200px。
示例：
minmax函数替换repeat函数中的1fr，限定其最小值为90px，最大值为1fr
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
/* minmax函数替换repeat函数中的1fr，限定其最小值为90px，最大值为1fr */
/* grid-template-columns:repeat(3,1fr); */
grid-template-columns: repeat(3, minmax(90px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下：
二十、使用 auto-fill 创建弹性布局
repeat方法带有一个名为自动填充（auto-fill）的功能
grid-template-columns:repeat(auto-fill, minmax(60px, 1fr));该代码的效果：列的宽度会随容器大小改变，在可以插入一个 60px 宽的列之前，当前行的所有列会一直拉伸
需要注意的是：
如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。
用法示例：
在第一个网格中，用auto-fill和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr。如下：
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
/* 在第一个网格中，用auto-fill和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr*/
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
display: grid;
grid-template-columns: repeat(3, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
<div class="container2">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下：
二十一、使用 auto-fit 创建弹性布局
auto-fit效果几乎和auto-fill一样。不同点仅在于，当容器的大小大于各网格项之和时，auto-fill将会持续地在一端放入空行或空列，这样就会使所有网格项挤到另一边；而auto-fit则不会在一端放入空行或空列，而是会将所有网格项拉伸至合适的大小。
注意：
如果容器无法使所有网格项放在同一行，余下的网格项将移至新的一行。
使用示例：
在类为container2的网格中，用auto-fit和repeat来填充网格，其中列宽的最小值为60px，最大值为1fr。
<style>
.item1{background:LightSkyBlue;}
.item2{background:LightSalmon;}
.item3{background:PaleTurquoise;}
.item4{background:LightPink;}
.item5{background:PaleGreen;}
.container {
font-size: 40px;
min-height: 100px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
.container2 {
font-size: 40px;
min-height: 100px;
width: 100%;
background: Silver;
display: grid;
/*在类为```container2```的网格中，用```auto-fit```和```repeat```来填充网格，其中列宽的最小值为60px，最大值为1fr。 */
grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
grid-template-rows: 1fr 1fr 1fr;
grid-gap: 10px;
}
</style>
<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
<div class="container2">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
</div>
效果如下：
二十二、在网格中创建网格
将元素转换为网格只会影响其子代元素。因此，在把某个子代元素设置为网格后，就会得到一个嵌套的网格。
示例：
用display和grid-template-columns，使类为item3元素转换为有两列且宽度为auto和1fr的网格。
<style>
.item1 {
background: LightSkyBlue;
grid-area: header;
}
.item2 {
background: LightSalmon;
grid-area: advert;
}
.item3 {
background: PaleTurquoise;
grid-area: content;
/* 用display和grid-template-columns，使类为item3元素转换为有两列且宽度为auto和1fr的网格。*/
display:grid;
grid-template-columns:auto 1fr;
}
.item4 {
background: lightpink;
grid-area: footer;
}
.itemOne {
background: PaleGreen;
}
.itemTwo {
background: BlanchedAlmond;
}
.container {
font-size: 1.5em;
min-height: 300px;
width: 100%;
background: LightGray;
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr auto;
grid-gap: 10px;
grid-template-areas:
"advert header"
"advert content"
"advert footer";
}
</style>
<div class="container">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">
<div class="itemOne">paragraph1</div>
<div class="itemTwo">paragraph2</div>
</div>
<div class="item4">footer</div>
</div>
效果如下：
