CSS grid布局相关笔记

优势之处

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

Grid VS Flexbox

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

兼容性

相关概念

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

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

   
   <div class="container">
       <div class="item">Onediv>
       <div class="item">Twodiv>
       <div class="item">Threediv>
       <div class="item">Fourdiv>
       <div class="item">Fivediv>
   div>
   

   // css
   .container {
     display: grid;
   }
   

2. 网格线（Grid Line）

• 组成网格项的分界线。网格线是在定义网格容器的时候产生的，和网格项没有直接的关联，网格项是根据定义的网格线所组成的块状的网格单元来放置的。

3. 网格轨道（Grid Track）

• 两个相邻的网格线之间为网格轨道。

常用属性

CSS函数

网格项上的属性

资料来源：Grid布局基础

一个有趣的CSS Grid 小游戏

• Grid Garden

相关学习推荐

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