网页布局中，常常需要处理一个固定元素与多个动态生成的元素共存的情况。本文将演示如何利用CSS Grid布局优雅地解决这个问题，实现一个固定Div位于首位，其余Div动态排列的布局。
假设我们需要一个固定Div位于顶部，后面跟随若干个通过循环生成的Div。Grid布局的强大之处在于其灵活的网格控制能力，能轻松应对这种混合布局需求。
需求： 一个固定Div占据首位，其余1-4个Div动态生成并排列。
解决方案： 使用Grid布局，通过grid-row-start和grid-row-end属性控制固定Div的跨行显示，其余Div则自动填充剩余空间。
首先，构建HTML结构：
<div class="container"> <div class="fixed-item">固定位置Div</div> <div class="dynamic-item">动态Div 1</div> <div class="dynamic-item">动态Div 2</div> <div class="dynamic-item">动态Div 3</div> <div class="dynamic-item">动态Div 4</div> </div>
然后，编写CSS样式：
.container {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 两列布局 */
gap: 10px; /* 元素间距 */
border: 1px solid #ccc;
padding: 5px;
}
.fixed-item {
grid-column: 1 / 3; /* 跨两列 */
grid-row: 1 / 3; /* 跨两行 */
background-color: #f0f0f0;
border: 1px solid #aaa;
}
.dynamic-item {
background-color: #e0e0e0;
border: 1px solid #999;
}这段CSS代码将container定义为Grid容器，采用两列布局。fixed-item通过grid-column和grid-row属性占据前两行和两列，从而实现固定位置。其余dynamic-item则自动填充剩余网格单元格。
通过以上方法，我们成功地使用Grid布局实现了固定Div和动态Div的混合排列，简洁高效地完成了布局需求。 这种方法易于理解和维护，也方便根据实际需求调整列数和元素样式。
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
997
收藏
