前端

CSS grid布局

优势之处

  1. 固定或者弹性的轨道尺寸
    • 无论在水平方向还是竖直方向都能够做到自适应
  2. 定位项目
    • 每一个组件都能作为一个项目被定位到相应的位置上面去
  3. 创建额外的轨道来保存内容
  4. 对齐控制
    • 和Flexbox相似
  5. 控制重叠内容
    • 可以像z-index一样控制重叠

      Grid VS Flexbox

  • Flexbox是一维布局，只能在一条直线上放置内容区块，Grid是一个二维布局，根据设计需求将内容块放置到任何地方
  • Flexbox可以和Grid很好的配合使用，页面整体使用Grid布局，局部使用Flexbox。

兼容性

  • Grid布局兼容性

相关概念

  1. 网格容器（Grid Container）和网格项（Grid Item）

    • 网格容器-所有网格项的父元素。元素应用display:grid;

      1
      2
      3
      4
      5
      6
      7
      8
      <!--html-->
      <div class="container">
          <div class="item">One</div>
          <div class="item">Two</div>
          <div class="item">Three</div>
          <div class="item">Four</div>
          <div class="item">Five</div>
      </div>
      1
      2
      3
      4
      // css
      .container {
        display: grid;
      }

  2. 网格线（Grid Line）

    • 组成网格项的分界线。网格线是在定义网格容器的时候产生的，和网格项没有直接的关联，网格项是根据定义的网格线所组成的块状的网格单元来放置的。
  3. 网格轨道（Grid Track）
    • 两个相邻的网格线之间为网格轨道。

常用属性

CSS函数

网格项上的属性

资料来源：Grid布局基础

一个有趣的CSS Grid 小游戏

相关学习推荐

  1. A Complete Guide to Grid
  2. 写给自己看的display: grid布局教程-张鑫旭

推荐文章