前言
看了阮一峰的grid教程，做一个笔记，主要自己看，有理解错误的地方后续更正，有新的理解后续补充。教程链接如下：
grid主要分为容器属性和项目的属性，在行列布局（比如九宫格）这种具有二维特征的布局中还是挺好用的。
下面是笔记内容。
容器属性
1、grid-template-columns和grid-template-rows 用来划分区域
意义：定义布局的行和列，
1、可以指定具体的px(可以用repeat函数简化。【 repeat(num重复次数，fr重复数据) 】)。
2、也可以是百分比。
3、也可以是fr(表示片段，对容器的剩余可用空间(去除gap等)分比例，反正fr不会超出容器，而百分比则可能超出容器)。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
/* 简化： grid-template-columns: repeat(2, 1fr); */
grid-template-rows: 1fr 1fr;
}auto-fill和auto-fit 区别
关键字：auto-fill和auto-fit 。
在简单使用时，auto-fill和auto-fit差别不达，要查看他们的区别需要和minmax结合使用。
下面先看auto-fill的简单使用。
auto-fill简单使用：
比如容器宽300px，但是grid-template-columns值定义了 repeat(auto-fill, 80px) ,这样会尽可能多的容下宽80px的列。
最终这个容器有多少列，不是像上一节那样写死的，而是计算出来的。
.container{
/* 其他属性 */
grid-template-columns: repeat(auto-fill, 80px);
/* 每列80px，容器尽可能多的容下更多的列 */
width:300px;
}比如下图每列是80px，最多容下3*80=240px < width:300px，所以是3列。
区别
前提：要看出区别，repeat时的重复数据就不能是固定的值，需要结合minmax来使用，比如设置为： grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
1、 在剩余空间不足时，auto-fit和auto-fill没啥区别，他们都会以最小的宽来放下更多的项目，效果图如下：
2、在剩余空间充足的情况，区别就显现了。auto-fill【足够..的量】会判断剩余空间，如果剩余空间还够放下一个和前面等宽的项目（即使是空白的项目），则会用这写空白项目和已有的真实项目一起来平分剩余空间；
而auto-fit【适合、合身】则不会方空白的项目，直接是已有的真实项目来平分剩余空间。（这更符合常识）
效果图如下：
测试代码如下：
<style>
.grid-container-1 {
display: grid;
height: 200px;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
/* grid-template-columns: repeat(auto-fill, 100px); */
grid-template-rows: repeat(auto-fill, minmax(100px, 1fr));
gap: 10px;
justify-items: center;
align-items: center;
}
.grid-container-2 {
display: grid;
height: 200px;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
/* grid-template-columns: repeat(auto-fit, 100px); */
grid-template-rows: repeat(auto-fit, minmax(100px, 1fr));
gap: 10px;
justify-items: center;
align-items: center;
}
.grid-container-1>.grid-item {
width: 100%;
background-color: green;
font-size: 24px;
}
.grid-container-2>.grid-item {
width: 100%;
background-color: red;
font-size: 24px;
}
</style>
<!-- auto-fill和minmax结合使用，容器会计算剩余空间，如果能放下一项（比如大于最小值100px），则会放入空白项。
但是auto-fit则是会把已有的项进行拓宽，不会放入空白项。要验证这一效果需要把容器宽拖大。
-->
auto-fill
<div class="grid-container-1">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>
auto-fit
<div class="grid-container-2">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>minmax函数
产生一个范围，如下为：大于100ox小于1fr的值
grid-template-columns: 1fr 1fr minmax(100px, 1fr);网格线的名称
grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用。 【哈，感觉没啥用】
.container {
display: grid;
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4];
}
2、grid-gap 区域间隔
grid-gap：<grid-row-gap grid-column-gap> 的合并
省略第二个值默认取第一个的值，后面两个值的都是这样取值。
3、grid-template-areas 区域起名
需要和每个项目的grid-area属性相结合使用，
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-template-areas: 'a b c'
'd e f'
'g h i';
}4、grid-auto-flow 填充顺序
每项默认按照“先行后列” 顺序填充,值为row，可以改为column后“先列后行”。
grid-auto-flow: column;column的情况如下：
其他值
除了row和column两个值，还有设置row-dense和column-dense（dense:密集的），他们两个的意思尽可能填满，不要出现空格。
.grid-container-3 {
display: grid;
height: 200px;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
grid-auto-flow: row dense; /* //会保证第一行填满，依次尽量不出现空格 */
gap: 10px;
justify-items: center;
}
.grid-container-3>.grid-item:nth-child(1){
grid-column: span 2;
}
.grid-container-3>.grid-item:nth-child(2){
grid-column:span 2;
}本来3会在4的，但是设置需要row dense就需要把行填满，刚好位置也够，所以3会上去。
row的效果
row-dense的效果：
5、justify-item、align-item、place-item 单元格内容的对齐
justify-item设置单元格内容的左右对齐，align-item是单元格内容的上下对齐，place-item是align-item和justify-item的简写。
place-items: <align-items> <justify-items>;6、justify-content、align-content、place-content 内容区域在容器的对齐
同样justify-content是水平、align-content是垂直方向，place-content是align-content+justify-content的简写.
7、grid-auto-columns和grid-auto-rows 设置额外区域的网格大小
有时候项目只有3列，但是某个项目指定到第5列，如果不用这两个属性设置额外的单元格大小，则会根据这个单元格的内容来。
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
grid-auto-rows: 50px; /* 8,9的height就是50px*/
}
【我测下来，rows是有用，但是column好像因为指定了grid-template-columns，grid-auto-columns的值会等于grid-template-columns。后续用到了再探究。】
项目属性
1、grid-column和grid-row 指定某一项在网格中的位置
grid-column是 grid-column-start / grid-column-end 的简写，start和end用斜线分割。
grid-row 是grid-row-start / grid-row-end的简写
我们还可以用span 关键字来表示跨越
.item-1 {
grid-column-start: span 2;// 垮2列
}.item{
grid-column: 2 / span 2; /* 第2列，并且 垮2列*/
}2、grid-area 指定这个项目放在哪个区域
可以看做上面的简写。
/* 父容器 ：*/
.container {
display: grid;
grid-template-areas:
"a b c "
"d e f "
"g h i ";
}
/*要用区域名称的方式，就需要父容器用grid-template-areas定义了区域名称。*/
.item-1{
grid-area:e
}
这样1就位于e的位置:
除了用区域名字，还可以用行列下标的方式指定位置并扩展，用斜线分割：
.item-1 {
grid-area: 1 / 1 / 3 / 3;
/* start row / start column/ end row / end column*/
/* 从第1行线开始，第1列线开始，到第3行线结束，第3列线结束 */
/* 最左边是第一根列线，最右边是最后一根列线 */
}
3、justify-self、align-self 、place-self 设置单独一项单元格内容的对齐
.item-1 {
justify-self: start;
}
place-self=<align-self justify-self>
扫一扫
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
