使用 CSS Grid Generator來快速使用及學(xué)習(xí) Grid 布局
CSS Grid Generator
CSS Grid Generator是一個(gè)由Sarah Drasner創(chuàng)建的免費(fèi)工具。它是一個(gè)可視化設(shè)計(jì)工具，允許咱們創(chuàng)建一個(gè)基本的 grid 布局，然后就可以使用生成對應(yīng)的代碼，幫助咱們快速布局。
第一次進(jìn)入是界面是這樣子的：
CSS Grid 布局示例
當(dāng)我正在學(xué)習(xí)一些東西時(shí)，我發(fā)現(xiàn)最好的學(xué)習(xí)方法是使用現(xiàn)有的工具構(gòu)建實(shí)用的東西。 在本文中，咱們先從一個(gè)簡單的布局開始，然后使用CSS Grid Generator創(chuàng)建在實(shí)際項(xiàng)目中使用所需的代碼。
首先從一個(gè)典型的布局開始，如下所示：
接著在 CSS Grid Generator 界面的右側(cè)更新對應(yīng)的以下內(nèi)容：
- 行: 4
- 列: 3
- 列間距: 20
- 行間距: 20
間距讓咱們的內(nèi)容之間有一定的空白。可以只使用列間距，但我想在 Header 和 Footer 之前留出一些空白，所以還同時(shí)使用行間距。
接下來，就是需要定義應(yīng)用程序的不同區(qū)域。在 CSS Grid Generator 中，可以單擊并拖動(dòng)到需要合并地方來創(chuàng)建一個(gè)區(qū)域。咱們希望Footer跨越整個(gè)網(wǎng)格，側(cè)邊欄占用一個(gè)單元格，主內(nèi)容區(qū)域跨越2列，F(xiàn)ooter 跨越4列,最終效果，如下：
這看起來有點(diǎn)像咱們想要的布局，但仍然需要定義一些具體的尺寸。 在CSS Grid Generator會(huì)注意到每行和每列旁邊都有一個(gè)輸入框，可用于設(shè)置特定大小。
- Header: 100px height
- Sidebars: 200px width
- Footer: 50px height
這看起來更像更像咱們想要的布局，但是你可能會(huì)問1fr是多少。
軌道可以用任何長度單位來定義。Grid還引入了一個(gè)額外的長度單位，以幫助各位創(chuàng)建靈活的Grid軌道。新的fr單元表示網(wǎng)格容器中可用空間的一小部分。
第二行的1fr會(huì)告訴區(qū)域占用剩余的可用空間。如果將容器設(shè)置為100vh，就會(huì)占據(jù)整個(gè)頁面的內(nèi)容，列也是如此。
CSS Grid Generated 生成的代碼
點(diǎn)擊“請給我示例中的代碼”就可以查看對應(yīng)布局生成的 CSS 代碼：
創(chuàng)建一個(gè)simple-layout.htm并添加以下代碼：
接下來添加上面生成的 CSS:
接著添加對應(yīng)的標(biāo)簽：
最后添加下面的CSS，它將為.div1 - .div5添加一些背景色：
- div:not(.parent) {
- padding: 10px;
- background-color: rgb(199, 199, 199);
- }
運(yùn)行：
這看起來很好，但你希望它占據(jù)整個(gè)瀏覽器窗口。所以需要向.parent類添加height: 100vh：
- .parent {
- display: grid;
- grid-template-columns: 200px 1fr 1fr 200px;
- grid-template-rows: 100px 1fr 50px;
- grid-column-gap: 20px;
- grid-row-gap: 20px;
- height: 100vh;
- }
最終效果：
網(wǎng)格軌道(Grid Track) 加餐
兩個(gè)相鄰的網(wǎng)絡(luò)線之間為網(wǎng)絡(luò)軌道。
圖中的同方向 1 和 2， 2 和 3 都是相鄰的網(wǎng)絡(luò)線，當(dāng)然同方向的 1 和 3 或者不同方向的 1 和 2 就不是相鄰的網(wǎng)絡(luò)線。
相鄰的網(wǎng)絡(luò)線為網(wǎng)格軌道，如下，黑色1 和 2 之間就構(gòu)成了網(wǎng)絡(luò)軌道(背景深橘色)：
上面總共有 5 個(gè)網(wǎng)絡(luò)軌道，水平方向灰色 1 和 2， 2 和 3， 3 和 4，豎直方向黑色的 1 和 2， 2 和 3，共 5 個(gè)。
網(wǎng)格單元(Grid Cell) 加餐
兩個(gè)相鄰的列網(wǎng)絡(luò)線和兩個(gè)相鄰的行網(wǎng)絡(luò)線組成的就是網(wǎng)絡(luò)單元，如下面的深橘色背景就是網(wǎng)絡(luò)單元。
網(wǎng)絡(luò)單元要與網(wǎng)絡(luò)項(xiàng)(項(xiàng)目)區(qū)別開來，網(wǎng)絡(luò)項(xiàng)是 Html 中可以找的到 Dom 元素，網(wǎng)絡(luò)單元是在定義容器的時(shí)候，它就會(huì)分割出來的一個(gè)一個(gè)單元格。
網(wǎng)格區(qū)域(Grid Area) 加餐
四個(gè)網(wǎng)絡(luò)線包圍的總空間。
fr單位(加餐)
剩余空間分配數(shù)，用于在一系列長度值中分配剩余空間，如果多個(gè)已指定了多個(gè)部分，則剩下的空間根據(jù)各自的數(shù)字按比例分配。
