runsly CSS+DIV 2021-07-19

CSS Grid 网格布局

Grid:网格布局

把一个容器的 display 设置成 grid，这个容器就可以看成是一个网格容器，容器里直接包含的子容器可以看成是这个网格里的项目，或者叫网格的单元。

可以使用 grid-template-colums 这个属性设置一下网格的 column ，也就是列，或者叫网格的栏。想要设置一下网格的 row ，可以使用 grid-template-rows

如果你想设置一下 row 的默认的高度，可以用一个 grid-auto-rows 这个属性，把横排的高度设置成 200px。

  <div class="container">
    <div class="item item__1">1</div>
    <div class="item item__2">2</div>
    <div class="item item__3">3</div>
    <div class="item item__4">4</div>
    <div class="item item__5">5</div>
    <div class="item item__6">6</div>
    <div class="item item__7">7</div>
    <div class="item item__8">8</div>
    <div class="item item__9">9</div>
  </div>

    .container{
      background-color: #f8f8f8; 
      display: grid; 
      grid-template-columns: 200px 200px 200px; 
      /* grid-template-rows: 200px 200px 200px; */
      grid-auto-rows: 200px;
       }
    .item{color: #fff; font-size: 22px; font-weight: 300; padding:8px}
    .item__1{background-color: red;}
    .item__2{background-color: black;}
    .item__3{background-color: #4a148c;}
    .item__4{background-color: #311b92;}
    .item__5{background-color: #0d47a1;}
    .item__6{background-color: #33691e;}
    .item__7{background-color: #006064;}
    .item__8{background-color: #f57f17;}
    .item__9{background-color: #e65100;}

网格的 fr（fraction）单位

设置网格的 column 还有 row 的时候可以使用任意的长度单位，比如之前我们用的是像素这种单位。你也可以使用 em，或者百分比。另外还可以使用一种叫 fr 的单位，fr 表示 fraction ，就是分数

比如设置一下这个网格的 column，栏数仍然是三栏，第一栏的宽度设置成 1fr ，第二栏是 5fr ，第三栏设置成 1fr。得到的就是一个这样的网格。

这个 fr 设置的就是网格的 column 或者 row，在网格里占的分数，所以具体的值是相对于网格容器的宽度还有高度决定的。

这里我们把这个网格分成了三栏，第一栏是 1fr，第二栏是 5fr，第三栏是 1fr，意思就是把网格容器的宽度分成一定的份数，这里就是分成了 7 份，因为 1 + 5 + 1 结果是 7。每一栏可以占用其中的一小部分，第一栏占了 7 份中的 1 份，第二栏占用了 7 份中的 5 份，第三栏占用了 7 份中的 1 份。

也就是第一栏的宽度就是网格容器宽度的 1/7，第二栏的宽度是网格容器宽度的 5/7 ，第三栏的宽度是网络容器宽度的 1/7 。

    .container{
      background-color: #f8f8f8; 
      display: grid; 
      grid-template-columns: 1fr 5fr 1fr;
      grid-auto-rows: 200px;
       }
      ......

可以再修改一下 grid-auto-rows 这个属性的值，现在用的是一个像素单位，这里我们把它换成 fr ，大小是 1 fr，意思就是让网格里的 row ，等分网格容器的高度。

我们可以再设置一下这个网格容器的高度，可以设置成 100vh，意思就是让这个容器的高度占满整个可视窗口的高度。

    .container{
      height: 100vh;
      background-color: #f8f8f8; 
      display: grid; 
      grid-template-columns: 1fr 5fr 1fr;
      grid-auto-rows: 1fr;
       }

设置栏与行的间隔（column-gap，row-gap）

    .container{
      height: 100vh;
      background-color: #f8f8f8; 
      display: grid; 
      grid-template-columns: 1fr 5fr 1fr;
      grid-auto-rows: 1fr;
      /* 间隔 */
      column-gap: 4px;
      row-gap: 4px;
       }

repeat()：重复功能

假设我们要设置一个 9 栏网格，正常的话应该这样，设置一下 grid-template-columns 属性的值，然后分别设置一下 9 个栏目的宽度。比如都把它们设置成 1fr。得到的就是一个 9 栏网格，每个栏目的宽度都是一样的。

     .container{
      height: 100vh;
      background-color: #f8f8f8; 
      display: grid; 
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: 1fr;
      /* 间隔 */
      column-gap: 4px;
      row-gap: 4px;
       }

可以使用 repeat 功能。这个网格容器的 grid-tempalte-colums 属性，它的值可以用一下 repeat 功能，第一个参数是要重复的次数，这里应该设置成 9，第二个参数是重复的宽度。比如 1fr。得到的仍然是个 9 等分栏目的网格。

     .container{
      height: 100vh;
      background-color: #f8f8f8; 
      display: grid; 
      grid-template-columns: repeat(9,1fr);
      grid-auto-rows: 1fr;
      /* 间隔 */
      column-gap: 4px;
      row-gap: 4px;
       }

可以再试一下， grid-template-column 属性的值，用一下 repeat，重复 2 次，这次重复的是 1fr 2fr。

     .container{
      height: 100vh;
      background-color: #f8f8f8; 
      display: grid; 
      grid-template-columns: repeat(2,1fr 2fr);
      grid-auto-rows: 1fr;
      /* 间隔 */
      column-gap: 4px;
      row-gap: 4px;
       }

这个 repeat 也可以跟其它的宽度混到一块儿使用。比如这里我们可以让第一栏的宽度是 80 像素，后面再用一个 repeat，重复 2 次，宽度是 1fr。

这样得到的网格有三个栏目，第一栏的宽度是 80 像素，后面两个栏目会等分网格容器剩下的宽度。

    .container{
      height: 100vh;
      background-color: #f8f8f8; 
      display: grid; 
      grid-template-columns:80px repeat(2,1fr);
      grid-auto-rows: 1fr;
      /* 间隔 */
      column-gap: 4px;
      row-gap: 4px;
       }

Grid Line：网格线

在设置网格项目位置的时候会用到网格线，下面我们先理解一下这个网格线。现在你看到的是一个有三个 column 还有三个 row 的网格。也就是这个网格有三个列，还有三个行。

创建这个网格的的时候会给我们几条网格线，网格线虽然在界面上看不见，不过我们要知道它们的存在。比如这个网格，一共会有四条栏线，在从左往右阅读的页面上，这四条栏线的编号从左往右，分别是 1，2，3 还有 4 。

另外这个网格的三行内容，会有四条行线，从上往下，这四条行线的编号分别是 1，2，3 还有 4 。在定位网格项目的时候，我们要知道这些网格线。

设置网格项目的位置

设置一下 1 这个网格项目的位置。把它放在 1 号栏线到 4 号栏线之间。，把 grid-template-column 的值，设置成 repeat ，重复的次数是 3， 1fr。这样我们就得到了一个三栏三行的网格。

设置item__1 用一下 grid-column-start 属性，把它的值设置成 1，意思就是，让这个网格项目，从 1 号栏线开始，下面再用一个 grid-column-end 属性，设置一下结束的位置，结束位置的栏线编号设置成 4 。

...
    .container{
      height: 100vh;
      background-color: #f8f8f8; 
      display: grid; 
      grid-template-columns:repeat(3,1fr);
      grid-auto-rows: 1fr;
      /* 间隔 */
      column-gap: 4px;
      row-gap: 4px;
       }
....
    .item__1{background-color: red; grid-column-start: 1; grid-column-end: 4;}
...

再设置一下这个网格项目的行的位置，从 2 号行线开始，到 3 号行线结束。设置一下 grid-row-start 这个属性，把这个项目的行线的开始位置设置成 2，下面再用一个 grid-row-end，结束的行线的位置设置成 3 。

    .item__1{background-color: red; grid-column-start: 1; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3;}

这样这个项目的行线会从 2 号线开始。所以你会发现，这个项目就跑到二，三，四这几个项目的下面来了。

恢复一下，让 grid-row-start 属性的值等于 1
再设置一下 2 这个项目的位置

用 grid-row-start 设置一下项目的行线开始位置，可以设置成 3，这个位置应该就是这个项目现在的行线开始的位置。然后再用 grid-row-end 设置一下它的结束位置的行线编号，比如把它设置成 5 。在没设置这个属性之前，它的结束位置的行线编号应该是 4。

    .item__1{background-color: red; grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; grid-row-end: 3;}
    .item__2{background-color: black; grid-row-start: 3; grid-row-end: 5;}

HTML/CSS