在上一篇《CSS 布局大比拼：浮動、Flex、Grid 實(shí)戰(zhàn)對比，看完就知道該用哪個！?》文章中我們主要是對常見的布局方式做了個對比，我們今天主要是通過常見的布局場景來看看Grid怎么用。
基礎(chǔ)網(wǎng)格布局
我們先來看看一個簡單的3x3網(wǎng)格，使用 fr 單位和 gap，第二列的寬度是另外兩列的兩倍(2fr vs 1fr)。中間的行高度會隨著內(nèi)容變化，而首尾行高度固定。每個項(xiàng)目（item）之間都有20px的間隙。
<style> .container { display: grid; grid-template-columns: 1fr 2fr 1fr; grid-template-rows: 80px auto 80px; gap: 20px; height: 100vh; padding: 20px; box-sizing: border-box; background-color: #f0f0f0; }
.item { background-color: #3498db; color: white; border-radius: 5px; display: flex; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: bold; }
.item:nth-child(even) { background-color: #2ecc71; } </style> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> </div>
經(jīng)典的圣杯布局
使用Grid輕松實(shí)現(xiàn)Header, Footer, Sidebar, Main Content區(qū)域，并添加簡單的響應(yīng)式。在桌面端，會看到經(jīng)典的Header、左右布局、Footer結(jié)構(gòu)。調(diào)整瀏覽器窗口寬度小于768px時(shí)，布局會自動變?yōu)閱瘟卸询B，Sidebar移動到Main Content上方，非常適合移動設(shè)備瀏覽。
?
<style> body { margin: 0; padding: 0; }
.container { display: grid; grid-template-areas: "header header" "sidebar main" "footer footer"; grid-template-columns: 200px 1fr; grid-template-rows: 80px 1fr 80px; height: 100vh; gap: 10px; padding: 10px; box-sizing: border-box; } .header { grid-area: header; background-color: #ff7979; }
.sidebar { grid-area: sidebar; background-color: #7ed6df; }
.main { grid-area: main; background-color: #f6e58d; }
.footer { grid-area: footer; background-color: #badc58; }
.header, .sidebar, .main, .footer { padding: 15px; border-radius: 5px; color: #333; font-weight: bold; }
@media (max-width: 768px) { .container { grid-template-areas: "header" "sidebar" "main" "footer"; grid-template-columns: 1fr; grid-template-rows: 80px auto auto 80px; } } </style> <div class="container"> <header class="header">Header</header> <aside class="sidebar">Sidebar</aside> <main class="main">Main Content</main> <footer class="footer">Footer</footer> </div>
照片墻/瀑布流布局
使用 grid-auto-rows 和 span 關(guān)鍵字創(chuàng)建高度不一的卡片布局。一個不均勻的網(wǎng)格布局，有些卡片較高，有些較矮，形成了類似瀑布流的效果。用grid-auto-rows 設(shè)置了基礎(chǔ)行高，而 grid-row: span X 讓某些項(xiàng)目跨越多個行軌道。repeat(auto-fit, minmax(200px, 1fr)) 確保了布局是響應(yīng)式的。
<style> .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-auto-rows: 150px; gap: 15px; padding: 20px; }
.item { background-color: #9b59b6; border-radius: 8px; display: flex; justify-content: center; align-items: center; color: white; font-weight: bold; font-size: 1.2rem; }
.tall { grid-row: span 2; background-color: #e74c3c; }
.very-tall { grid-row: span 3; background-color: #34495e; }
.item:nth-child(3n) { background-color: #16a085; } .item:nth-child(5n) { background-color: #f39c12; } </style> <div class="container"> <div class="item">1</div> <div class="item tall">2 (Tall)</div> <div class="item">3</div> <div class="item very-tall">4 (Very Tall)</div> <div class="item">5</div> <div class="item tall">6 (Tall)</div> <div class="item">7</div> <div class="item">8</div> <div class="item tall">9 (Tall)</div> <div class="item">10</div> <div class="item very-tall">11 (Very Tall)</div> <div class="item">12</div> </div>
電商產(chǎn)品卡片
結(jié)合Flexbox和Grid，并使用 auto-fit 和 minmax() 實(shí)現(xiàn)完全響應(yīng)式，典型的電商產(chǎn)品列表，Grid布局 (products-grid) 負(fù)責(zé)外部的響應(yīng)式網(wǎng)格，會根據(jù)容器寬度自動調(diào)整每行顯示的產(chǎn)品數(shù)量（至少250px寬）。每個產(chǎn)品卡片的內(nèi)部則使用Flexbox進(jìn)行精細(xì)的排版，確保按鈕始終位于卡片底部。無需媒體查詢即可實(shí)現(xiàn)響應(yīng)式。
<style> body { background-color: #ecf0f1; padding: 20px; font-family: ; }
.products-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; max-width: 1200px; margin: 0 auto; }
.product-card { display: flex; flex-direction: column; background-color: white; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; }
.product-card:hover { transform: translateY(-5px); }
.product-image { height: 180px; background-color: #ddd; display: flex; align-items: center; justify-content: center; color: #777; font-size: 0.9rem; }
.product-info { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; }
.product-title { margin-top: 0; color: #2c3e50; }
.product-price { color: #e74c3c; font-size: 1.2rem; font-weight: bold; margin: 10px 0; }
.product-description { color: #7f8c8d; font-size: 0.9rem; flex-grow: 1; }
.add-to-cart-btn { background-color: #3498db; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; margin-top: 15px; font-weight: bold; transition: background-color 0.2s ease; }
.add-to-cart-btn:hover { background-color: #2980b9; } </style> <div class="products-grid"> <div class="product-card"> <div class="product-image">產(chǎn)品圖片</div> <div class="product-info"> <h3 class="product-title">優(yōu)質(zhì)產(chǎn)品名稱</h3> <p class="product-price">￥199.00</p> <p class="product-description">這是一段關(guān)于這個產(chǎn)品的精彩描述，說明它的特點(diǎn)和優(yōu)點(diǎn)。</p> <button class="add-to-cart-btn">加入購物車</button> </div> </div>
<div class="product-card"> <div class="product-image">產(chǎn)品圖片</div> <div class="product-info"> <h3 class="product-title">另一個很棒的產(chǎn)品</h3> <p class="product-price">￥259.00</p> <p class="product-description">這是另一個產(chǎn)品的描述，可能更長一些，以展示卡片高度的靈活性。</p> <button class="add-to-cart-btn">加入購物車</button> </div> </div>
<div class="product-card"> <div class="product-image">產(chǎn)品圖片</div> <div class="product-info"> <h3 class="product-title">超級產(chǎn)品三號</h3> <p class="product-price">￥99.00</p> <p class="product-description">簡潔的描述。</p> <button class="add-to-cart-btn">加入購物車</button> </div> </div>
<div class="product-card"> <div class="product-image">產(chǎn)品圖片</div> <div class="product-info"> <h3 class="product-title">旗艦產(chǎn)品</h3> <p class="product-price">￥599.00</p> <p class="product-description">這是我們最高端的產(chǎn)品，擁有所有你能想到的功能和卓越的性能表現(xiàn)。</p> <button class="add-to-cart-btn">加入購物車</button> </div> </div> </div>
使用基于線的定位，讓網(wǎng)格項(xiàng)跨越多個行列，創(chuàng)建視覺沖擊力強(qiáng)的布局，這個布局打破了整齊的網(wǎng)格，創(chuàng)建了一個視覺重心。最大的「特色文章」區(qū)塊橫跨4列2行，立即吸引用戶的注意力。其他文章區(qū)塊大小不一，交錯排列，形成了動態(tài)且有趣的雜志或新聞網(wǎng)站首頁布局。關(guān)鍵在于使用 grid-column 和 grid-row 并指定起始和結(jié)束的網(wǎng)格線來精確控制每個項(xiàng)目的位置和大小。
<style> .magazine-layout { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(150px, auto); gap: 15px; max-width: 1200px; margin: 0 auto; padding: 20px; }
.featured { grid-column: 1 / 5; grid-row: 1 / 3; background-color: #e74c3c; }
.secondary { grid-column: 5 / 7; background-color: #3498db; }
.tertiary { grid-column: span 2; background-color: #2ecc71; }
.tall { grid-row: span 2; background-color: #f39c12; }
.magazine-layout > div { padding: 20px; border-radius: 8px; color: white; font-weight: bold; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; } </style> <div class="magazine-layout"> <div class="featured">特色文章 (占據(jù)4x2)</div> <div class="secondary">次要文章 (占據(jù)2x1)</div> <div class="tertiary tall">文章 3 (占據(jù)2x2)</div> <div class="tertiary">文章 4 (占據(jù)2x1)</div> <div class="tertiary">文章 5 (占據(jù)2x1)</div> <div class="tertiary tall">文章 6 (占據(jù)2x2)</div> <div class="tertiary">文章 7 (占據(jù)2x1)</div> <div class="tertiary">文章 8 (占據(jù)2x1)</div> </div>
閱讀原文：https://mp.weixin.qq.com/s/Trp31UUbZzMCdb76TSkzFw
該文章在 2025/9/22 15:31:28 編輯過
400 186 1886
