前几日遇到这样一道笔试题目:
image.png
要求是不改变dom结构实现这样的效果
<!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>Document</title>
</head>
<style>
/* 在这里书写样式 */
.box{}
</style>
<body>
<!-- 不改变dom结构 -->
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
反正当时我是一脸懵，里面的div不是按照顺序排列的，但是就没有想出来，后来有了用grid布局的思路，然后发现自己并没有用过这种布局，今天就来记录一下。
首先先列举一下用到的属性:
display:grid 转换为grid布局
grid-template-rows设置行数
grid-template-columns设置列数
grid-template-areas可自定义名称来分配区域
grid-area根据名称进行具体分配
首先我们先将盒子设置为网格布局
<style>
.box{
width:330px;
height:430px;
border: 1px solid #000;
/* 网格布局 */
display:grid;
}
</style>
image.png
然后设置要显示的行数和列数
<style>
.box{
width:330px;
height:430px;
display:grid;
/* 显示三行并且每行的高度为100px */
grid-template-rows:100px 100px 100px;
/* 显示列数并且每列的宽度为100px */
grid-template-columns:100px 100px 100px;
}
</style>
image.png
接下来就只剩下如何分配空间的问题了
<style>
.box{
width:330px;
height:430px;
display:grid;
grid-template-rows:100px 100px 100px;
grid-template-columns:100px 100px 100px;
/* 属性值类似于一个字符串，用于标识，与grid-area搭配使用 */
grid-template-areas:'box1 box1 box3' //这里就代表在一行中box1的div占两份，box3的div占一份
'box2 box2 box4';
/* box+数字就是一个标识(自定义的)，代表每一个div的一个大致分配，这一步就完成了一个大致的分配
空间 */
}
/* 根据grid-template-areas的设置来具体分配管理div的布局 */
.wrap div:nth-child(1) {
/* 通过grid-area属性把box1给到实际的第一个div */
grid-area: box1;
}
.wrap div:nth-child(2) {
grid-area: box2
}
/* 注意：这里只设置1和2的div就可以了，其余的div不用设置，只需按照默认的排列方式即可 md这里掉坑了~~~*/
/* 数字居中 */
.wrap>div {
text-align: center;
line-height: 94px;
}
</style>
<body>
<div class="wrap">
<div style="background: red;">1</div>
<div style="background: blue;">2</div>
<div style="background: pink;">3</div>
<div style="background: green;">4</div>
<div style="background: yellow;">5</div>
<div style="background: orange;">6</div>
<div style="background: orangered;">7</div>
<div style="background: blueviolet">8</div>
<div style="background: skyblue;">9</div>
</div>
</body>
image.png
这样就实现啦！
看来还是不能只会flex布局，grid对比flex兼容性差一些，但是比flex要强大一点。
flex兼容性
grid兼容性
白白~
