【学习打卡】第七天 前端工程师2022版 Grid网格布局

课程名称： 前端工程师2022版

课程章节：Grid网格布局

主讲老师：Alex

课程内容：

今天学习的内容包括：

一、课程简介

什么是Grid布局

Grid布局即网格布局：将网页划分成一个个网格，任意组合网格，做出各种各样的布局

兼容性https://caniuse.com/?search=grid  (查找各浏览器的兼容情况

二、Grid语法

2-1Grid基础知识

1. Grid容器(container)和项目(item)

采用Grid网格布局的元素，称为Grid容器

display:grid|inline-grid;

当设置grid布局后，Grid容器的所有子元素自动成为容器成员，称为Grid项目

    2.行，列和单元格（行列交会形成的格）

容器中的水平区域称为“行”（row），垂直区域称为“列”（column）

行和列的交叉区域，称为“单元格”（cell）

    3.网格线：划分网格的线，称为“网格线”（grid line)

水平网格线划分出行，垂直网格线划分出列,n行n列的网格需要n+1个水平网格线，n+1个垂直网格线

    4.网格轨道（track):水平（垂直）网格线构成的一行网格

    5.区域（area)：开发人员自己规定，哪几个单元格构成一个区域

    6.内容(content):所有的项目，注意与容器相区别，不要搞混

2-2Grid容器的属性

1. display

display:grid|inline-grid

    2.grid-template-rows/grid-template-columns(设置几行几列的）

grid-template-rows 定义每一行的行高

grid-template-columns 定义每一列的列宽

grid-template-rows: 固定数值 | % | fr | auto | repeat() | minmax()

grid-template-columns: 固定数值 | % | fr | auto | repeat() | minmax()）

①固定数值

/*3行3列*/
grid-template-rows: 150px 300px 150px;
grid-template-columns: 150px 300px 150px;

②给网格线起名字  允许同一根网格线有多个名字

grid-template-rows: [r1 r11] 150px [r2] 150px [r3] 150px [r4];
grid-template-columns: [c1] 150px [c2] 150px [c3] 150px [c4];

③百分比 %：容器宽高的百分比（不包括内边距和边框）

height: 600px;
grid-template-rows: 33.33% 33.33% 33.33%;
grid-template-columns: 33.33% 33.33% 33.33%;

④fr（fraction 的缩写，意为“片段”）：分配剩余可用空间

grid-template-columns: 50px 1fr 50px;
grid-template-rows: 1fr 2fr 1fr;

⑤auto：先于 fr 计算，获取必要的最小空间

grid-template-columns: 150px auto 150px;  /*类似150px 1fr 150px*/
grid-template-columns: auto auto auto;  /*类似1fr 1fr 1fr*/
grid-template-columns: auto 1fr 150px; /*自身最小宽度 剩余空间 150px*/

⑥repeat()：简化重复的值

grid-template-rows: repeat(3, 150px);

⑦minmax(min, max)：取值 >= 最小值，并且 <= 最大值

grid-template-columns: 1fr minmax(150px, 300px) 1fr;
grid-template-rows: repeat(3, 150px);

    3.grid-auto-flow

定义项目的排列顺序 

grid-auto-flow: row（默认值） | column | row dense | column dense;

①row（默认值）：先填满第一行，再放入第二行

②column：先填满第一列，再放入第二列

③row dense：row，在稍后出现较小的项目时，尝试填充网格中较早的空缺

④  column dense：column，在稍后出现较小的项目时，尝试填充网格中较早的空缺

    4.grid-auto-rows / grid-auto-columns

grid-auto-rows 定义浏览器自动创建的多余网格的行高

grid-auto-columns 定义浏览器自动创建的多余网格的列宽

    5.row-gap/column-gap/gap(设置间距的）

 row-gap 设置行间距， column-gap 设置列间距， gap 是 row-gap 和 column-gap 的简写形式

    6.grid-template-areas(人为设置区域）

定义区域

    7.align-items(项目垂直方向排列）/justify-items（项目水平方向排列）/place-items（前两个合并）

注意与：align-content/justify-content/place-content区别（这个是整体上的项目排列）

align-items 设置项目的垂直位置（上中下）

justify-items 设置项目的水平位置（左中右）

place-items 是 align-items 和 justify-items 的合并简写形式

align-items: stretch（默认值）| start | end | center;

justify-items: stretch（默认值）| start | end | center;

place-items: align-items justify-items;

①stretch（默认值）：拉伸，占满单元格的整个宽高

②start：对齐单元格的起始边缘

③end：对齐单元格的结束边缘

④center：单元格内部居中

    8.align-content/justify-content/place-content（这个是整体上的项目排列）

align-content 设置整个内容区域的垂直位置（上中下）

justify-content 设置整个内容区域的水平位置（左中右）

place-content 是 align-content 和 justify-content 的合并简写形式

align-content: stretch（默认值） | start | end | center | space-around | space-between | space-evenly;

justify-content: stretch（默认值） | start | end | center | space-around| space-between | space-evenly;

place-content: align-content justify-content

①stretch（默认值）：项目大小没有指定时，拉伸占据整个网格容器

②start：对齐容器的起始位置

③end：对齐容器的结束位置

④center：容器内部居中

⑤space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍

⑥space-between：项目与项目之间的间隔相等，项目与容器边框之间没有间隔

⑦space-evenly：项目与项目之间的间隔相等，项目与容器边框之间也是同样长度的间隔

    9.grid-template/grid(前面的属性的合并书写）

grid-template 是 grid-template-columns、grid-template-rows 和grid-template-areas 这三个属性的合并简写形式；

grid 是 grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow 这六个属性的合并简写形式；

注：既不易写也不易读，不建议使用

课程收获：

学西习了Grid网格布局的基础知识和Grid容器的属性，通过视频了解到Grid布局和flex布局类似，和flex布局一样，当设置grid布局后，Grid容器的所有子元素自动成为容器成员，称为Grid项目。

关于Grid容器的属性一共有9种，其中用的最多的是grid-template-rows/grid-template-columns(设置几行几列的）row-gap/column-gap/gap(设置间距的） grid-template-areas(人为设置区域） align-items(项目垂直方向排列）/justify-items（项目水平方向排列）/place-items（前两个合并） align-content/justify-content/place-content（这个是整体上的项目排列）

今天学习课程共用了1小时31分钟，Grid布局的第一个编程练习还算简单，写的时候注意写：display：grid；

今天连续性学习一共2小时20分钟，前面先复习了上节课内容，希望能够早日走上正轨，早点找工作！