这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

一、本次笔记的重点内容：

css终极武器：Grid布局

二、简单介绍：

网格布局（Grid）是最强大的 CSS 布局方案。

我们可以利用grid布局任意组合不同的网格，做出各种各样的布局。

flex与grid的区别：

Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。Grid 布局远比 Flex 布局强大

三、知识点+例子：

1.基础步骤

简单例子：

    <div class="container">
        <div class="item" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: rgb(249, 185, 102);">2</div>
        <div class="item" style="background-color: rgb(151, 246, 137);">3</div>
        <div class="item" style="background-color: rgb(95, 235, 204);">4</div>
        <div class="item" style="background-color: rgb(161, 118, 249);">5</div>
        <div class="item" style="background-color: rgb(253, 116, 235);">6</div>
      </div>

 .container{
    width: 300px;
    height: 300px;
    display: grid;
    grid-template-columns: 100px 100px 200px;
    grid-template-rows: 100px 100px;
  }
  .item{
    text-align: center;
    line-height: 100px;
  }

效果：

2.基础属性

fr的使用

网格布局提供了fr关键字，意为"片段"。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

.container{
    width: 300px;
    height: 300px;
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: 100px 1fr;
  }

效果：

网格线 grid-line

划分网格的线，称为 “网格线”（grid line）。水平网格线划分出行，垂直网格线划分出列。

<div class="container">
        <div class="item item1" style="background-color: antiquewhite;">1</div>
        <div class="item" style="background-color: rgb(249, 185, 102);">2</div>
        <div class="item" style="background-color: rgb(151, 246, 137);">3</div>
        <div class="item" style="background-color: rgb(95, 235, 204);">4</div>
        <div class="item" style="background-color: rgb(161, 118, 249);">5</div>
      </div>

.container{
    width: 300px;
    height: 300px;
    display: grid;
    /* grid-template-columns: 100px 100px 200px;
    grid-template-rows: 100px 100px; */
    
  }
  .item{
    text-align: center;
    line-height: 100px;
   
  }
  .item1{
    grid-row-start: 1;
    grid-column-start: 2;
    grid-row-end: 3;
    grid-column-end: 4;
  }

也可以将上述主要代码简写成：

grid-area: 1/2/3/4;

这边的1/2/3/4恰好对应如图的第1行开始，到第3行结束，第2列开始到第4列结束

这里的1234指的是网格线的排序，并不是容器的排序

效果图：

相信这样应该能够理解了

关于grid，还有非常多函数可以使用

例如：

repeat()函数

repeat()接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

直接举例

 grid-template-columns:repeat(2, 100px 20px 80px);

此处定义了六列 2是重复的次数

效果：

还有很多有趣的方法，例如grid-row-gap设置间距，grid-auto-flow自动填充放置（先行后列）等等这边不再一一介绍，大家也可以去文档去查看更多有用的知识点

四、总结：

这次学习了grid布局，是一个强大布局方案，实践之后确实认识到了grid布局的实用性，希望大家也能够多多运用grid布局。

CSS大杀器：Grid布局 | 青训营笔记