三個網站玩轉 Grid 佈局

CSS Grid 佈局是現在 CSS 中最強大的佈局系統。與 flexbox 的一維佈局系統不一樣，CSS Grid 佈局是一個二維佈局系統，也就意味着它能夠同時處理列和行。經過將 CSS 規則應用於父元素 (成爲 Grid Container 柵格容器)和其子元素（成爲 Grid Items 柵格項），你就能夠輕鬆使用 Grid 柵格佈局。

Grid 柵格佈局有着目前佈局中最多的屬性，初學者很容易被直接勸退，本着方便你們入門的目的推薦三個學習 Grid 佈局的網站。

GRID GARDEN 小遊戲

《GRID GARDEN》小遊戲可經過書寫 CSS 代碼來栽種你的胡蘿蔔花園！ 經過遊戲來學習grid佈局，很是有意思。

親測半小時通關，可視化的帶你學習了（Grid Container） grid-template 和（Grid Items）grid-area 相關屬性的應用。讓你不會 Grid 複雜的 API 擋在門外。 資源連接：GRID GARDEN

CSS Grid Generator 在線生成器

CSS Grid Generator 是一個由Sarah Drasner建立的免費工具。它是一個可視化設計工具，容許我們建立一個基本的 Grid 佈局，而後就可使用生成對應的代碼，幫助我們快速佈局。

以聖盃佈局爲例

經過修改邊距和柵格，能夠很容易的完成，隨後便可查看生成的代碼 生成的樣例代碼以下

<div class="parent">
<div class="div1"> </div>
<div class="div2"> </div>
<div class="div3"> </div>
<div class="div4"> </div>
<div class="div5"> </div>
</div>
複製代碼

.parent {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: 2fr repeat(5, 1fr) 1.5fr;
grid-column-gap: 20px;
grid-row-gap: 20px;
}

.div1 { grid-area: 1 / 1 / 2 / 7; }
.div2 { grid-area: 2 / 1 / 7 / 2; }
.div3 { grid-area: 7 / 1 / 8 / 7; }
.div4 { grid-area: 2 / 6 / 7 / 7; }
.div5 { grid-area: 2 / 2 / 7 / 6; }
複製代碼

使用 CSS Grid Generator 能夠直觀的幫咱們建立柵格模型，Grid 佈局是柵格的藝術，創建一個基於柵格的思惟也是很重要的，CSS Grid Generator 可讓你更快的對總體佈局認識，值得推薦。

資源連接：CSS Grid Generator

A Complete Guide to Grid 學習導航

CSS Tricks是一個國外的優秀前端開發博客，主要分享使用CSS樣式的技巧、經驗和教程等。值得前端開發者閱讀收藏的國外網站。

其中的 Guides板塊 A Complete Guide to Grid 深刻淺出的系統介紹了 Grid 佈局的衆多API，代碼配合插圖讓咱們學習起來更容易。教程質量很高值得一看。

CSS-Tricks網站是一個很是優秀的網站，特別對於CSSer而言，該網站不斷的在更新一些優秀的教程和技巧，爲前端社區作出了具大的貢獻。

資源連接：A Complete Guide to Grid

Grid 佈局學習重點

1. 如何利用好 grid-template 系列屬性對設計稿進行合理劃分以柵格化。

display
grid-template-columns
grid-template-rows
grid-gap
grid-template-areas
grid-auto-flow
grid-auto-columns:
複製代碼

2. 如何利用好 grid-area 系列屬性對容器內部內容進行定位

grid-column-start
grid-column-end 
grid-row-start 
grid-row-end 
grid-column 。
grid-row 
grid-area 
複製代碼

3. 還有一些相對於軸定位的屬性如 justify-item , align-content 這類屬性與 flex 佈局中大體一致。能夠遷移學習

justify-item
justify-content
justify-self
align-item
align-content
align-self
複製代碼

總結

2021年了瀏覽器的兼容問題已經再也不是最頭疼的一個問題了，Grid 佈局有着極高的適應性和靈活性，grid不會代替flex, 相反他兩位是很是棒的搭檔，能夠搭配flex解決不少棘手的問題，彌補了flex的一些缺陷，值得咱們一學。

❤️ 感謝你們

若是你以爲這篇內容對你挺有有幫助的話：

點贊支持下吧，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）

關注公衆號鹹魚愛前端，咱們一塊兒學習一塊兒進步。

以爲不錯的話，也能夠閱讀其餘文章（感謝朋友的鼓勵與支持🌹🌹🌹）：

Nodejs 實現定時爬蟲

React-Query 讓你的狀態管理更優雅

前端頁面佈局學習神器

面試必備知識點之深淺拷貝

SPA 前端路由原理與實現