如何用CSS Grid布局实现首个div固定位置，其他div自动排列？

golang学习网今天将给大家带来《如何用CSS Grid布局实现首个div固定位置，其他div自动排列？》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

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

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

解决方案

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

html结构

  
固定不动
  
其他1
  
其他2
  
其他3
  
其他4
  
其他5
  
其他6
  
其他7

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     |
                    +-------+

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~