CSS Grid 网格布局

本文由清尘发表于2021-04-20 13:12属于HTML/CSS分类

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;}