Grid 布局语法教程
2020-07-10 本文已影响0人
六寸光阴丶
第一章 Grid布局介绍
一、网格布局简介
1. 网格
网格是一组相交的水平线和垂直线，它定义了网格的列和行。
我们可以将网格元素放置在这些行和列相关的位置上
image.png
2. CSS网格布局简介
- table
缺点：需要将table的标签对内的元素全部渲染完才会在浏览器显示，现在信息量越来越大，使用表格布局会导致一个网页打开的时候网页一片空吧，有性能方面的缺陷 - float
- position
- 2.4 inline
- 2.5 flex
- 2.6 grid
二、网格布局的优势和兼容性
1. Grid布局的优势
- 固定或弹性的的轨道尺寸
- 定位项目
- 创建额外的轨道来保存内容
- 对齐控制
- 控制重叠内容（z-index）
2. Grid vs Flexbox
- Grid vs Flexbox
Flexbox是一维布局，只能在一条直线上放置区块。
Grid是一个二维布局，根据设计需求将内容区块放置到任何地方。 - 实际上
Flexbox与Grid能很好的配合使用。
2. 浏览器兼容
image.png
三、学习网格布局需要的基础以及学习目标
1. 学前准备
- 掌握HTML基本知识。
- 具备CSS基础。
- 熟悉盒模型的原理，对FlexBox布局有一定的了解。
2. 课程概述
- 一些概念
- 容器的属性
- CSS函数
- 网格项上的属性
3. 学习目标
- 掌握Grid网格布局的功能特点，并熟练应用
- 加深对盒子模型的了解
- 有效提高开发效率，并学会对复杂的网页结构更加灵活的布局
第二章 一些概念
一、 网格容器、网格项、网格线（概念）
0. 重要术语
在深入了解网格的概念之前，理解术语是很重要的。
由于所涉及的术语在概念上都是相似的，如果不先记住它们在网格规范中定义的含义，则很容易将它们彼此混淆。
1. Grid Container
网格容器
元素应用display:grid;，它是其所有网格项的父元素。
<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>
.container {
display:grid;
}
2. Grid Item
网格项
网格容器的子元素，下面的item元素是网格项。
<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>
.container {
display:grid;
}
3. Grid Line
网格线
组成网格项的分界线
image.png
上图存在水平1,2,3这三条网格线，垂直1,2,3,4四条网格线
二、网格轨道、单元、区域、fr单位、gr单位（概念）
1. Grid Track
网格轨道
两个相邻的网格线之间为网格轨道
image.png
2. Grid Cell
网格单元
两个相邻的列网格线和两个相邻的行网格线组成的是网格单元。
image.png
3. Grid Area
网格区域
四个网格线包围的总空间
image.png
4. 单位
- fr（单位）
剩余空间分配数。用于在一系列长度值中分配剩余空间，如果多个已指定了多个部分，则剩下的空间根据各自的数字按比例分配。 - gr（单位）（弃用）
网格数
第三章 容器中的属性
〇、属性
- display
- grid-template
- gap
- items
- content
- grid-auto
- grid
一、display
1. 容器中的属性
{
display: grid | inline-grid | subgrid;
}
将元素定义为grid container，并为其内容建立新的网格格式化的上下文
<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>
.container {
display: grid | inline-grid | subgrid;
}
2. Display
- Grid
生成块级网格。 - inline-grid
生成行内网格。 - sub-grid
如果网格容器本身是网格项（嵌套网格容器），此属性用来继承其父网格容器的列/行大小。
注意
当元素设置了网格布局，column、float、clear、vertical-align属性无效。
display:subgrid;目前所有浏览器都不兼容。
二、 grid-template定义行与列的轨道大小
image.png
image.png
四行五列的一个布局
1. grid-template
grid-template-columns / grid-template-rows
使用空格分隔的多个值来定义网格的列和行。
.container {
grid-template-columns: <track-size> ... | <line-name> <tracks-size> ...;
grid-template-columns: <track-size> ... | <line-name> <tracks-size> ...;
}
属性值
- 轨道大小（track-size）: 可以使用css长度（px、em等）、百分比、或者分数（用fr单位）
- 网格线名字（line-name）： 可以选择任何名字
例子
.container {
grid-template-columns: 40px 50px auto 50px 40px;
grid-template-rows: 25% 100px auto;
}
image.png
