使用CSS Grid的repeat(auto-fit)和minmax()可實(shí)現(xiàn)動(dòng)態(tài)響應(yīng)式網(wǎng)格布局，通過設(shè)置最小列寬和自動(dòng)填充特性，使網(wǎng)格在不同屏幕尺寸下自動(dòng)調(diào)整行列；配合gap、對齊屬性及媒體查詢斷點(diǎn)優(yōu)化，能構(gòu)建靈活自適應(yīng)的頁面結(jié)構(gòu)。

使用 CSS Grid 實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)格布局，關(guān)鍵在于利用響應(yīng)式單位和自動(dòng)排列特性，讓網(wǎng)格容器能根據(jù)內(nèi)容或屏幕尺寸自動(dòng)調(diào)整列數(shù)和行高。下面介紹幾種實(shí)用方法，幫助你構(gòu)建靈活、自適應(yīng)的網(wǎng)格布局。

1. 使用 repeat(auto-fit) 和 minmax()

示例代碼：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

• auto-fit：自動(dòng)計(jì)算可容納多少列，并拉伸填滿容器。
• minmax(200px, 1fr)：每列最小 200px，最大為等分的 1fr（即剩余空間均分）。
• 當(dāng)容器變窄，列寬小于 200px 時(shí)，會(huì)自動(dòng)換到下一行。

2. 使用 auto-fill 的差異

對比場景：

知網(wǎng)AI智能寫作

知網(wǎng)AI智能寫作，寫文檔、寫報(bào)告如此簡單

38

查看詳情

• 用 auto-fit：有幾項(xiàng)就顯示幾列，多余空間被已存在列共享。
• 用 auto-fill：即使只有 2 個(gè)子項(xiàng)，也可能創(chuàng)建 5 列，后面 3 列為空白。

3. 控制對齊與間距

示例：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
  justify-items: center;
  align-items: stretch;
}

4. 響應(yīng)式斷點(diǎn)微調(diào)（可選）

例如，在大屏強(qiáng)制最多 4 列：

@media (min-width: 1200px) {
  .grid-container {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

以上就是如何通過css grid實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)格布局的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！