关于grid布局

前几日遇到这样一道笔试题目:

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兼容性

白白~

关于grid布局

推荐阅读更多精彩内容