第三周2

Posted 2021-01-09 husuiblogs

.wrapper {

/* 规定元素应该生成的框的类型为网格*/
display: grid; 

/*grid-网格；templa-模板；columns-列；repeat()生成多个值；3表示分为3列，1fr用于可用空间的1个部分*/
grid-template-columns: repeat(3, 1fr);

/*网格间隙为10px,属性grid-gap是grid-row-gap和grid-column-gap的简写形式*/
grid-gap: 10px; 

/*函数minmax()用于定义轨道最小/最大边界值;最小高度设置成100px，但是最大高度设置成auto，表示行高可以根据内容伸长超过100px;*/
grid-auto-rows: minmax(100px, auto);
}
.one {
/*网格线本质上是用来表示网格轨道的开始和结束。
每一条网格线编号都以1开始，以1为步长向前编号，其中包括行列两组网格线*/

/*属性grid-column 是 grid-column-start 和 grid-column-end的简写形式,如果两个值都指定，第一个表示 grid-row/column-start ，第二个值表示grid-row/column-end。而且你必须用斜杠"/"分隔这两个值。如此代码表示在列上从第1条网格线到第三条网格线，下同*/
grid-column: 1 / 3;

 /*属性grid-row 是 grid-row-start 和 grid-row-end的简写形式,如果只指定一个值，它表示 grid-row/column-start，如此代码表示在行上从第一个网格线开始以后，下同*/
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}