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