Correcting teacher:PHPz
Correction status:qualified
Teacher's comments:
1、grid:创建grid容器
2、grid-template-rows/columns:显示网格单元
3、grid-area:将项目放到指定的网格单元中
4、grid-auto-flow:行与列的排序规则,默认是rows;
5、grid-auto-rows/columns:显示网格的行/列的大小
6、gap:行与列的间距,只写一个则第二个默认同第一个相同
7、place-content:所有项目在容器的对齐方式(容器元素)
8、place-items:所有项目在单元格的对齐方式(容器元素)
9、place-self:某个项目在网格单元中对齐方式(项目元素)
10、grid-row/column:行或列的跨越数量(项目元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid布局容器框架</title>
<link rel="stylesheet" href="grid.css">
</head>
<body>
<div class="main">
<div class="grd"></div>
</div>
<!--
<style>
/*
1、创建grid
2、划分网格单元
*/
body * {
outline: 1px solid rgb(221, 23, 23);
}
.nav{
width: 30em;
height: 30em;
width: 40em;
height: 50em;
display: grid;
background-color: rgb(209, 142, 142);
grid-template-columns:repeat(3,10em);
grid-template-rows: 10em 10em 10em;
place-content: start start;
place-content: center center;
place-content: place-between;
}
.nav .sa1{
background-color: blueviolet;
grid-row: 2 / 3;
grid-column: 2 / 3;
grid-row: 2 / 4;
grid-column: 2 / 4;
grid-row:2 / span 2;
grid-column: 2 / span 2;
}
.nav .sad{
width: 3em;
height: 3em;
background-color: blueviolet;
place-items: center;
place-content: content;
}
</style>
---->
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body * {
outline: 1px solid rgb(27, 4, 4);
}
/*
1、创建grid
2、画格子
*/
.main{
height: 50em;
width: 50em;
background-color: rgb(247, 211, 8);
display: grid;
/*
grid-template-columns: 10em 10em 10em;
grid-template-rows: 10em 10em 10em;
创建格子简化用 repeat共2个参数 重复的次数,重复的值*/
grid-template-rows: repeat(3,10em);
grid-template-columns: repeat(3,10em);
grid-auto-flow: column;
grid-auto-flow: row;
gap:5px 10px;
gap:0px;
place-content: center center;
place-content: center start;
place-content: start;
place-content: end;
place-content: space-between end;
place-content: space-between;
place-items: center;
place-content: end;
place-content: start;
place-items: center;
place-content: center center;
}
.main .grid:nth-of-type(3){
place-self: end;
}
.main .grid{
height: 5em;
width: 5em;
background-color: rgb(209, 178, 178);
/*
grid-row: 1 / 2;
grid-column: 1 / 2;
grid-row: 2 / 4;
grid-column: 2 / 4;
grid-row-start: 2;
grid-column-start: 2;
grid-row-end: 1;
grid-column-end:3;
height: 5em;
width: 5em;
grid-area:直接定义网格区域
有4个数值:行开始,列开始,行结束(跨越的行数),列结束(跨越的列数)
*/
/* grid-row: 3 / span 1;
grid-column: 1 / span 3;
grid-area: 2 / 1 / span 1 /span 3;
新生成的项目,自动放入自动生产的单元格,并且与新单元格的宽度自适应
gap 有行间距,列间距
*/
}