CSS 之Grid 网格知识梳理2

继上篇的CSS 之Grid下半部分

    14.将单元格划分到一个区域，使用grid-template-areas属性；

         ag: grid-template-areas:

                     "header  header  header"

                     "advert  content  content"

                     "footer  footer  footer";

          上段代码中，每个单词代表一个单元格，每对引号代表一行（当想让指定单元格为空时，使用“.”（点号）表示）

  15.引用给定的名称将项放入到自定义区域中：grid-area属性实现；

      ag：

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


<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  
  .item5 {
    background: PaleGreen;
    
     grid-area:footer;  //将item5划分到页尾；

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

前面为未添加“grid-area”代码的效果图，后图为添加了“grid-area”值的效果如下：

           

 16.在15点的基础上，知道了将指定单元格放入到指定区域中，先将未划分的区域放入到指定的区域中，仍旧使用grid-area属性，改变其值即可；

    该属性的接收值为：grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;

                                 （grid-area:水平方向开始线/垂直方向开始线/水平方向结束线/垂直方向结束线）；

    ag:

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


<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  
  .item5 {
    background: PaleGreen;
   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>

  效果如下：

      

 实现了与14点一致的效果；

17.当需要宽度/高度一致且行数/列数较多时，使用repeat函数可达到目的而且可减少重复的代码数；

      A.列数;grid-template-columns:repeat(列数，列高度);

      B.行数：grid-template-rows:repeat(2,1fr 50px) 20px);   //作用与“grid-template-columns: 1fr 50px 1fr 50px 20px;”一致；

18.使用minmax函数限制单元格的尺寸；（在网格容器更改大小时限制，即为项目指定可接受的范围）

    ag：

grid-template-columns:20px minmax(90px,200px);//指定了2列，一列200px.一列限制在90px-200px;

19.使用自动填充创建灵活的布局：auto-fill属性；

       repeat函数附带一个名为自动填充的选项。这允许您根据容器的大小自动插入尽可能多的所需大小的行或列。您可以在组合au时创建灵活的布局;

   ag:

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


<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;
    grid-template-columns: repeat(3, minmax(60px, 1fr));
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>

20.使用自动适应创建灵活布局：auto-fit属性实现；（用法同auto-fill一致）

21.使用媒体查询创建响应式布局；

  

@media (min-width；400px){
    .container{
        grid-template-area:
            "header  header"
            "advert content "
            "footer  footer ";
    }
}   //当可视界面 >400px，header占据页眉，footer占据也尾，advert占据左列

添加了如上代码前后效果对比图如下：

         

 22.将直系后代转化为网格，网格中就有了网格；

        在后代元素中，改变其display:grid之后，grid-template-columns等设置即可；