整理grid布局

本文章直接展示网格（GRID）布局的使用场景
由于flex的流行，一个页面文件中可能有很多都是flex布局，所有实例都会与flex做一个比较。
相较于flex布局的优点（个人意见）：

• 在垂直布局上的变化
• 从整体布局上来说，flex改变内容去适应布局，grid改变布局去适应内容

所有的HTML都以下面为实例

<ul class="container">
	<li class="item"></li>
	<li class="item"></li>
	<li class="item"></li>
	...
</ul>

1：内容呈有规律的排列。

相较于使用flex布局，得去设置每个单元格的大小

.container {
	display: grid;gap: 20px;
	grid-template-columns: repeat(2, 100px 40px 60px)
}

2：单元格内容固定，但是容器大小不固定。

相较于使用flex布局，可以去掉最右边一列右边的padding-right/marin-right

.container {
	display: grid;gap: 20px;
	grid-template-columns: repeat(auto-fill, 300px);
}

3：某一列固定，其它列不固定并按比例填充

相较于flex会少一层嵌套（先分成两列，左固定，右边再继续flex布局）
下面的代码表示把一行分成100px加上剩下的平均分成3份，1fr表示一份

.container {
	display: grid;gap: 20px;
	grid-template-columns: 100px 1fr 2fr
}

4：某一列内容为范围宽度

相较于flex，去设置min-width,差别不大，感觉就是稍微灵活一点，

.container {
	display: grid;gap: 20px;
	grid-template-columns: 1fr 1fr (100px, 1fr);
}

5：容器宽度不固定，某一个单元格占满整个宽度

这种特殊的单元格，都是控制内容的方式，比flex稍复杂（需要设置下一行也从第一个开始，而flex只需要设置当前行100%），设置当前项目和下一个项目都从第一列开始

.item_start {
	grid-column: 1;
}

6：容器宽度不固定，某一个单元格比其它的更宽

相较于flex差不多
因为需要单行显示，所以需要设置容器宽度最小值

.container {
	display: grid;gap: 20px;
	grid-template-columns: repeat(auto-fill, 300px);
	min-width: 400px;
}
.item_column_2 {
	grid-column: span 2;
}
/* 如果需要和场景5的情况合并，则这样写：*/
.item_start_column_2 {
	grid-column: 1 / span 2;
}

…
…
…
遇到了再继续更新，先开个头做个笔记