CSS——grid布局

1. 网格的定义

• 网格是一组相交的水平线和垂直线，它定义了网格的列和行。
• 我们可以将网格元素放置在与这些行和列相关的位置上。

 

2.grid布局的优势

• 1.固定或弹性的轨道尺寸
• 2.定位项目
• 3.创建额外的轨道来保存项目
• 4.对齐控制
• 5.控制重叠内容（z-index）

3. grid VS flexBox

• 1.flexBox是一个一维布局，只能在一条直线上放置内容区块。
• 2.Grid 是一个二维布局，根据设计需求将内容区块放置到任何地方。
• 3.Flexbox与Grid能很好的配合使用。

 

4. 浏览器兼容

 

5. 常见术语

•  网格容器

       元素应用display:grid; 它是其所有网格项的父元素

• 网格项

       网格容器的子元素,下面的item元素是网格项

.container {
    display: grid;
}

// container是网格容器
<div class="container">
    // item是网格项
    <div class="item">1</div>
    <div class="item">2</div>
</div>

• CSS函数
• 网格线

       组成网格项的分界线 

6.学习目标

•  掌握Grid网格布局的功能特点，并熟练应用
• 加深对盒子模型的了解
• 有效提高开发效率，学会对复杂的网页结构更加灵活的布局