css总结15(网格布局)

前言

(1) 和flex布局类似,首先需要使用display:grid将容器设置为网格容器,然后结合相关的网格布局属性来实现网格布局;
(2) 网格布局中有一些新概念要着重认识,网格轨道、fr单位、区域名称

新概念

### 网格轨道
网格轨道即在网格容器中定义的行和列,通过前面已学过的repeat(n,value)函数我们可以定义多个相同的轨道片段


### fr单位
fr单位用于定义网格容器中行或列的比例。与其他单位不同,fr单位不是基于固定的像素或百分比,而是基于可用空间的比例


### 区域名称
区域名称是一种用于标识网格容器中子元素位置的方法。通过为网格容器中的子元素指定一个区域名称,我们可以更加灵活地布局网格容器,同时也可以让代码更加易于维护

网格布局属性

### 1. 行与列的数量与尺寸
## grid-template-columns: *col-width
设置列数和列宽度,每个参数代表每个列的宽度,参数的个数即列的个数。
## grid-template-rows: *row-height
设置行数和行高度,每个参数代表每个列的高度,参数的个数即行的个数。
## grid-template:*row-height / *column-width
设置行与列的数量与尺寸


### 2. 元素行与列的始末位置和合并
## grid-column-start:column-start
设置元素的列起始位置
auto:默认值,按流设置
span n:设置元素跨n列
column-n:设置从第几列开始显示元素
## grid-column-end:column-end
设置元素的列结束位置
auto:默认值,跨一列
row-n:设置在第几列结束显示元素
span-n:设置元素跨n列
## grid-column:column-start column-end
设置元素列的起始和结束位置的简写形式
## grid-row-start: row-start 
设置元素的行起始行位置
auto:默认值,按流设置
span n:设置元素设置元素跨n行
column-n:设置从第几行开始显示元素
## grid-row-end: row-end
设置元素的行结束行位置
auto:默认值,跨一行
row-n:设置在第几行结束显示元素
span-n:设置元素设置元素跨n行
## grid-row: row-start row-end
设置元素行的起始和结束位置的简写形式
## grid-area: row-start column-start row-end column-end
设置元素行和列的起始和结束位置的简写形式(注意该属性还可以用于定义区域名称)


### 3. 行与列的间隔
设置网格布局的间隔有两大属性类,第一类就是布局通用的gap,第二类就是grid-gap是网格布局中独有的
## row-gap: row-gap
设置每行之间的间隔
## column-gap: column-gap
设置每列之间的间隔
## gap: row-gap column-gap;
设置行和列间隔的简写,先行再列
## grid-gap-row: row-gap
设置每行之间的间隔
## grid-gap-column: column-gap
设置每列之间的间隔
## grid-gap: row-gap column-gap;
设置行和列间隔的简写,先行再列


### 4. 行和列的默认尺寸和流动
## grid-auto-columns:
设置列的默认宽度
auto:默认值,由网格容器的大小决定
max-content:由列中最大元素设置每列大小
min-content:由列中最小元素设置每列大小
minmax(min,max):在min~max之间
length:使用具体值设置列的大小
## grid-auto-rows:
设置行的默认高度
auto:默认值,由网格容器的大小决定
max-content:由行中最大元素设置每行大小
min-content:由行中最小元素设置每行大小
minmax(min,max):在min~max之间
length:使用具体值设置列的大小
## grid-auto-flow:
设置元素的流动方向和堆积方式
row:默认值,通过填充每一行来放置网格元素,必要时添加新行
column:通过填充每一列来放置网格元素,必要时添加新列
row dense:按行填充前面留下的空白区域
column dense:按列填充前面留下的空白区域
dense:按行或列填充前面留下的空白区域

### 5. 区域名称
需要在子元素中使用grid-area:area_name来定义区域名称,然后在父容器中使用grid-template-areas:*cited-area-name或grid-template或grid: *area-name来引用区域名称实现布局;
## grid-area: area-name
设置元素的区域名称
## grid-template-areas: *cited-area-name
通过引用区域名称来设置行列
其中可以使用“.”占位来表示空白区域。
## grid-template: *cited-area-name
通过引用区域名称来设置行列
其中可以使用“.”占位来表示空白区域。
## grid: *cited-area-name;
通过引用区域名称来设置行列
其中可以使用“.”占位来表示空白区域。
## 示例:
例如:grid: "header header header" "menu content content" "menu footer fotter";
解析:一共引用了四个区域名称(分别对应四个子元素),header区域在第一行,横跨三列,menu区域在第二行第一列开始向下纵跨两行,content区域在第二行第二列开始向右横跨两列,footer区域在第三行第二列开始向右横跨两列

## 6. grid简写:
同时定义网格容器和网格元素的位置、大小和定义网格区域名称。
# (1) 设置列和行
grid: template-rows / template-columns
# (2) 指定行的尺寸(高度),以及自动布局算法怎样运作,和列的自动尺寸
grid: template-rows / auto-flow auto-columns
# (3) 指定自动布局算法怎样运作,和行的自动尺寸,以及设置 grid-template-columns 属性
grid: auto-flow auto-rows / template-columns
# (4) 引用网格区域名称来布局 
grid: *cited-area-name;

网格布局示例

示例效果图: 

css总结15(网格布局)_第1张图片

示例代码: 



头部
菜单
主要内容区域
右侧
底部

你可能感兴趣的:(Css,css,css3,前端)