如何用 CSS 实现固定布局和遍历生成的 DIV，使其第一个固定不动，剩余的以 1234 顺序排列？

一分耕耘，一分收获！既然都打开这篇《如何用 CSS 实现固定布局和遍历生成的 DIV，使其第一个固定不动，剩余的以 1234 顺序排列？》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！

如何实现固定布局和遍历div

如图所示，大的div固定在第一个位置，而标有1234的div则是通过for循环生成的。能否实现这样的布局，或者有更好的解决方案？

解决方案：

要实现这样的布局，推荐使用grid布局，它可以完美地解决这个问题。

布局如下：

• 第一个div固定不动。
• 其余div动态渲染出来。

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布局实现效果](https://segmentfault.com/img/bvdaqja)

理论要掌握，实操不能落！以上关于《如何用 CSS 实现固定布局和遍历生成的 DIV，使其第一个固定不动，剩余的以 1234 顺序排列？》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！