css布使用固定布局和遍历div

如图所示，有一个大的div固定在第一个位置，里面有若干个通过for循环生成的div，编号为1、2、3、4。

解决方案

使用css的grid布局可以完美解决这个问题。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

html结构

<div class="box">
  <div class="box-item">固定不动</div>
  <div class="box-item">其他1</div>
  <div class="box-item">其他2</div>
  <div class="box-item">其他3</div>
  <div class="box-item">其他4</div>
  <div class="box-item">其他5</div>
  <div class="box-item">其他6</div>
  <div class="box-item">其他7</div>
</div>

css样式

.box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid #eee;
  gap: 10px;
  padding: 5px;
}

.box .box-item {
  border: 1px solid #eee;
}

.box .box-item:first-child {
  grid-row-start: 1;
  grid-row-end: 3;
}

效果

采用grid布局后，固定不动的div将占据两行一列，而其他div会自动排列在下面。

+-------------+-------+
| 固定不动   | 1     |
|             +-------+
+-------------+ 2     |
                    +-------+
                    3     |
                    +-------+
                    4     |
                    +-------+
                    5     |
                    +-------+

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！