一种为二维内容设计的布局方式。全能我只能说。

  • 定义行列轨道
  • 项目精准放置
  • 命名线条和区域
  • 轨道间的备用空间
  • 网格对齐

术语

  • Grid lines：框框的先体哦啊
  • Grid tracks：一行或一列
  • Grid cells：最小单元即小格子
  • Grid area：几个格子组成一个区域
  • Gaps：格子之间的缝隙
  • 容器

  • 项目

    1. <div class="container">
    2. <div class="item"></div>
    3. <div class="item"></div>
    4. <div class="item"></div>
    5. </div>

    尺寸设置

  • 长度单位

    • 固定
    • 灵活
      • max-content
      • min-content
      • fit-content()
  • fr：可用空间的份额
  • minmax()

  • auto

    关键字

  • repeat

  • auto-fill
  • auto-fit
  • minmax
  1. .container{
  2.   display:grid;
  3.   grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  4. }

上面的代码使得Grid布局先尽可能的给出大小为200px的列，最后再将剩下的空间都平均分给每一列。
这样可以创造一个二维响应式布局，而甚至没有用到媒体查询。