Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:非常的形象,直观, 不错, 不错, 没想到写得这么棒
1028作业
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: grid;
/* 转为网格容器 */
grid-template-columns: 10em 10em;
/* 生成两列的轨道,每列宽度10em */
grid-template-rows: 10em 10em;
/* 生成两行的轨道,每列行高10em */
/* gap: 1em 2em; */
/* 生成网格之间的间隙,水平(行间隙)为1em,垂直(列间隙)为2em */
gap: 1em;
/* 生成网格之间的间隙,水平(行间隙)和垂直(列间隙)都为1em */
/* 前面生成的网格模板是两行两列的共计四个,下面的网格项目第五个就是:
隐式网格单元 */
grid-auto-flow: row;
/* 默认项目排列方向 ,行优先*/
/* 行优先时候可以设置行高,不能设置列宽 */
/* 行高设置方式: */
grid-auto-rows: auto;
grid-auto-rows: min-content;
/* 浏览器自动设置高度 */
grid-auto-rows: 10em;
/* 给行高设置一个10em的固定高度 */
grid-auto-rows: minmax(10em, auto);
/* 设置一个最小10em,最大自适应的行高 */
grid-auto-flow: column;
/* 将项目排列方向改成列 */
/* 列优先时候可以设置列宽,不能设置行高 */
/* 列宽设置方式: */
grid-auto-columns: auto;
grid-auto-columns: min-content;
/* 浏览器自动设置宽度 */
grid-auto-columns: 10em;
/* 给行高设置一个10em的固定宽度 */
/* grid-auto-columns: minmax(10em, auto); */
/* 设置一个最小10em,最大自适应的列宽 */
}
.container>.item {
width: 3em;
height: 3em;
background-color: aquamarine;
}
</style>
</head>
<body>
<!-- container:网格容器 -->
<div class="container">
<!-- item:网格项目 -->
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
图片案例: