第12章 1224- Grid布局基础知识，学习心得、笔记

今天所学心得、笔记

1、grid布局理解，与代码实践

1、采用grid布局的区域，称为“容器”。容器子元素称为“项目”，“项目”中子元素不是“项目”；
2、容器里面的水平区域为"行"（row），垂直区为"列"（column），行和列的交叉区为"单元格"（cell）；
3、使用grid布局后，所有“项目”元素都会变为块元素；
display: grid;
/*设置大小为100px，3 * 3的布局*/
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
/*项目间，行列间距10px，支持缩写;*/
gap: 10px 10px;
gap: 10px;
/* 轨道列宽 */
/*使用固定值*/
grid-template-columns: 10em 10em 10em;
/*使用fr单位，中间项目，比两边大1倍*/
grid-template-columns: 1fr 2fr 1fr;
/*使用百分比*/
grid-template-columns: 20% 60% 20%;
/*各种单位混合使用*/
grid-template-columns: 8em 1fr 2fr 200px;
/*各种单位混合使用*/
grid-template-columns: 30% auto 10em;
/*fr单位，与auto不能共用*/
grid-template-columns: 1fr auto 1fr;
/* 轨道行高 */
grid-template-rows: 5em 5em 5em;
/*------------------------------------------------------------*/
/*使用repeat()参数*/
grid-template-columns: repeat(3, 10em);
/* 第二个参数可以是多个值 */
grid-template-columns: repeat(3, 10em 3em 3em);
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr 2fr);
/* 混合使用 */
grid-template-columns: repeat(2, 1fr) 2fr;
/*------------------------------------------------------------*/
/* minmax() */
/* 中间列,最小宽度是20em,最大宽高是左右的2倍 */
grid-template-columns: 1fr minmax(10em, 2fr) 1fr;
/*------------------------------------------------------------*/
/* 此时,默认项目在容器中按: 先行后列的顺序排列,“行优先” */
grid-auto-flow: column;
grid-auto-flow: row;
/* 自动生成的隐式轨道的高度是自动的 */
/* 行优先时要设置隐式轨道的行高 */
grid-auto-rows: 8em;

---

1、自定义项目在容器的显示位置

.container span {
background-color: pink;
text-align: center;
line-height: 5em;
}
.container {
display: grid;
border: solid 1px;
padding: .5em;
gap: .5em;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 5em);
}
.container span:nth-of-type(10) {
background-color: lightblue;
/* grid-area: 设置任何一个项目所在的网格单元的区域 */
/* grid-area: 行起始编号 / 列起始编号 / 行结束编号 / 列结束编号  */
/* 以第10个项目来举例，将它放入到第一个网格单元中 */
grid-area: 1 / 1 / 2 / 2;
grid-area: 1 / 1;
/* 例如要跨2行3列 */
grid-area: 1 / 1 / 3 / 4;
/* 通常写法，只关心跨几行或几列,并不关心结束的编号 */
grid-area: 1 / 1 / span 3 / span 4;
}
/* 选中第一个项目 */
.container>span:first-of-type {
background-color: lightyellow;
grid-area: 4 / 1 / span 1 / span 4;
/* 因为 4  / 1 是当前位置,所以可省 */
grid-area: span 1 / span 4;
/* 之前说过,默认是跨一行一列 */
grid-area: auto / span 4;
}

代码示例截图