如何使用grid布局實(shí)現(xiàn)固定和動(dòng)態(tài)排列的div布局？

巧用grid布局：兼顧固定與動(dòng)態(tài)Div排列

網(wǎng)頁(yè)布局中，常常需要處理一個(gè)固定元素與多個(gè)動(dòng)態(tài)生成的元素共存的情況。本文將演示如何利用css Grid布局優(yōu)雅地解決這個(gè)問(wèn)題，實(shí)現(xiàn)一個(gè)固定Div位于首位，其余Div動(dòng)態(tài)排列的布局。

假設(shè)我們需要一個(gè)固定Div位于頂部，后面跟隨若干個(gè)通過(guò)循環(huán)生成的Div。Grid布局的強(qiáng)大之處在于其靈活的網(wǎng)格控制能力，能輕松應(yīng)對(duì)這種混合布局需求。

需求： 一個(gè)固定Div占據(jù)首位，其余1-4個(gè)Div動(dòng)態(tài)生成并排列。

解決方案： 使用Grid布局，通過(guò)grid-row-start和grid-row-end屬性控制固定Div的跨行顯示，其余Div則自動(dòng)填充剩余空間。

首先，構(gòu)建html結(jié)構(gòu)：

<div class="container">   <div class="fixed-item">固定位置Div</div>   <div class="dynamic-item">動(dòng)態(tài)Div 1</div>   <div class="dynamic-item">動(dòng)態(tài)Div 2</div>   <div class="dynamic-item">動(dòng)態(tài)Div 3</div>   <div class="dynamic-item">動(dòng)態(tài)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通過(guò)grid-column和grid-row屬性占據(jù)前兩行和兩列，從而實(shí)現(xiàn)固定位置。其余dynamic-item則自動(dòng)填充剩余網(wǎng)格單元格。

通過(guò)以上方法，我們成功地使用Grid布局實(shí)現(xiàn)了固定Div和動(dòng)態(tài)Div的混合排列，簡(jiǎn)潔高效地完成了布局需求。 這種方法易于理解和維護(hù)，也方便根據(jù)實(shí)際需求調(diào)整列數(shù)和元素樣式。