grid布局—让css变得更简单

_kyle

发布于 2020-08-24 12:39:07

5.2K0

发布于 2020-08-24 12:39:07

文章被收录于专栏：kyle的专栏kyle的专栏

https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid ：学习网址

一、启用网格：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>

效果如下：

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

容器

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

容器

css

登录后参与评论

0 条评论

热度