三個網站玩轉 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 佈局，然後就可以使用生成對應的代碼，幫助咱們快速佈局。

以聖盃佈局爲例

通過修改邊距和柵格，可以很容易的完成，隨後即可查看生成的代碼 生成的樣例代碼如下

1<div>
2<div> </div>
3<div> </div>
4<div> </div>
5<div> </div>
6<div> </div>
7</div>
8複製代碼
9

 1.parent {
 2display: grid;
 3grid-template-columns: repeat(6, 1fr);
 4grid-template-rows: 2fr repeat(5, 1fr) 1.5fr;
 5grid-column-gap: 20px;
 6grid-row-gap: 20px;
 7}
 8
 9.div1 { grid-area: 1 / 1 / 2 / 7; }
10.div2 { grid-area: 2 / 1 / 7 / 2; }
11.div3 { grid-area: 7 / 1 / 8 / 7; }
12.div4 { grid-area: 2 / 6 / 7 / 7; }
13.div5 { grid-area: 2 / 2 / 7 / 6; }
14複製代碼
15

使用 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 系列屬性對設計稿進行合理劃分以柵格化。
1display
2grid-template-columns
3grid-template-rows
4grid-gap
5grid-template-areas
6grid-auto-flow
7grid-auto-columns:
8複製代碼
9
  1. 如何利用好 grid-area 系列屬性對容器內部內容進行定位
1grid-column-start
2grid-column-end 
3grid-row-start 
4grid-row-end 
5grid-column 。
6grid-row 
7grid-area 
8複製代碼
9
  1. 還有一些相對於軸定位的屬性如 justify-item , align-content 這類屬性與 flex 佈局中大致一致。可以遷移學習
1justify-item
2justify-content
3justify-self
4align-item
5align-content
6align-self
7複製代碼
8

總結

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://juejin.cn/post/6939437900954091551?utm_source=gold_browser_extension

猜你喜歡