Grid布局之旅-Grid基础知识-PHP培训十期线上班

12月30日 作业

归零心态，写博客的目的一是记录自己怎么解决不会的问题和易忘的知识，二是分享一些知识帮助别人解决问题

---

在开始介绍Grid基础知识之前，我先讲一下网页布局的“今生前世”

引语

对于web开发者来说布局一直是很重要的问题，页面元素怎么放置都与布局相关。我们的Web布局经历了一下四个阶段：

1. table表格布局，通过table标签布局（当然有些工具提供可视化界面拖拽表格dreamwear），不是很清楚表格布局的可以参考这篇文章前端HTML基础知识复习

2. float浮动加position定位布局，借助盒模型及float position等属性进行布局，如果缺乏案例可以看看这篇文章前端布局小案例（采用float+position布局等传统布局）

3. flex弹性布局，一个解决传统布局方案上三大痛点（排列方向、对齐方式、自适应尺寸）的强大布局。

4. Grid网格布局，也叫栅格布局，具有强大的内容尺寸和定位能力，适合需要在两个维度上对齐内容的布局。

---

现在开始Grid的一些基础知识学习吧~
学习布局属性之前，我们先来了解一下，Grid网格布局中的一些术语

1.Grid中的术语

1.1 网格容器（grid container）

是所有网格项的父元素，元素应用display:grid
container就是网格容器
HTML代码：

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

1.2 网格项（grid items）

是display:grid（网格容器）下的子元素，这里 item 元素就是网格项(Grid Item)，但是 sub-item 不是。
HTML 代码:

<div class="container">
  <div class="item"></div>
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

1.3 网格线（grid lines）

组成网格项，网格线可以编号、命名，如下图：

1.4 轨道（grid tracks）

两条相邻平行的网格线之间的空间，特点：相邻，不相交

1.5 单元格（grid cell）

四条网格线（两个相邻的列网格线和两个相邻的行网格线）包起来的封闭空间
注意：网格项是页面上可以找到的dom元素，网格单元是网格线划分的，不能找到

1.6 网格区域（grid area）

多个单元格形成的矩形区域

1.7网格间距（grid gap）

行和列之间的间隙

" class="reference-link">

2.Grid容器属性

2.1 创建显式网格轨道

• grid-template-colums: 基于列,定义网络线的名称与与轨道大小
• grid-template-rows: 基于行,定义网络线的名称与与轨道大小
• grid-template-areas: 命名网格区域(配合gird项目的grid-area属性)

2.2 创建隐式网格轨道

• grid-auto-flow: 网格中项目的流动方/排列方向(默认先行后列)
• grid-auto-columns: 隐式网格的列宽
• grid-auto-rows: 隐式网格的行高

2.3 创建轨道间距

• grid-column-gap | grid-row-gap | grid-gap | gap: 行/列间隙

2.4 所有项目在网络容器中的对齐方式

• justify-conten: 设置所有项目在网格容器中的水平对齐方式
• align-content: 设置所有项目在网格容器中的垂直对齐方式
• place-content: justify-content和align-content的属性简写

justify-content可以取一下值：
start：将网格对齐到 网格容器(grid container) 的左侧起始边缘（左侧对齐）
end：将网格对齐到 网格容器 的右侧结束边缘（右侧对齐）
center：将网格对齐到 网格容器 的水平中间位置（水平居中对齐）
stretch：调整 网格项(grid items) 的宽度，允许该网格填充满整个 网格容器 的宽度
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
space-evenly：在每个网格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

(不限制列宽的时候justify-conten:stretch,才有效果)

CSS代码：justify-content: center

.container{
     justify-content: center;
}

CSS代码：justify-content: start

.container{
     justify-content: start;
}

CSS代码：justify-content: end

CSS代码：justify-content: space-around

CSS代码：justify-content: space-between

CSS代码：justify-content: space-evenly

这里方便显示平均的含义，我将网格间隙取消了

2.5 所有项目在单元格中的对齐方式

• justify-items: 设置所有项目在单元格内的水平对齐方式
• align-items: 设置所有项目在单元格内的垂直对齐方式
• place-items: justify-items和align-items的属性简写

align-items
start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
stretch：填满单元格的高度（默认值）
这里去掉了项目的固定宽高

.container {
  align-items: start | end | center | stretch;
}

CSS:align-items: start

CSS:align-items: center

CSS:align-items: end

CSS:align-items: stretch

" class="reference-link">

3.Grid项目属性

3.1 将项目放置到单元格中

• grid-column-start: 起始列编号
• grid-column-end: 终止列编号

• grid-column: 上面二属性缩写

• grid-row-start: 起始行编号

• grid-row-end: 终止行编号

• grid-row: 上面二属性编写
  

  3.2 将项目放置到网格区域中

• grid-area: top/left/bottom/right: 将项目按逆时针顺序放置

• grid-area: area-name: 将项目放置到已命名的网格区域中

3.1 项目在单元格中的对齐方式

• justify-self: 设置项目在单元格中的水平对齐方式
• align-self: 设置项目在单元格中的垂直对齐方式
• place-self: justify-self和align-self的属性简写

align-self:
start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
stretch：填满单元格的高度（默认值）

CSS代码

.item{
  align-self: start | end | center | stretch;
}

总结：有时候属性align-content,align-items,align-self,容易搞混，前两者都是容器里面的属性，后者是项目属性
align-content:是容器中所有项目的在容器里面的对齐方式
align-items:是容器中所有项目在单元格里面的对齐方式
align-self:是在项目中，某个项目在单元格里面的对齐方式

附手写属性稿：