5個(gè)可視化 CSS 網(wǎng)格布局生成器
英文 | https://blog.bitsrc.io/top-5-css-grid-layout-generators-f7743f0dfad2
翻譯 | 楊小二
現(xiàn)代 Web 應(yīng)用程序是響應(yīng)式的。盡管很多 CSS 庫(kù)和框架都支持 Grid 系統(tǒng)，但使用純 CSS 網(wǎng)格也正在成為一種趨勢(shì)。因此，如果你知道正確的使用工具，則可以更輕松地從頭生成網(wǎng)格布局。
因此，在本文中，我將介紹 5 個(gè)最好的 CSS 布局生成器，并進(jìn)行功能比較，以幫助你直觀(guān)地生成 CSS 網(wǎng)格。
1、Griddy
Griddy 是設(shè)計(jì)師和開(kāi)發(fā)人員中最常用的 CSS 網(wǎng)格生成器之一。
使用 Griddy，你只需配置行、列、間隙和對(duì)齊即可輕松創(chuàng)建 2D 布局。
以下示例顯示了使用 Griddy 生成的 CSS 類(lèi)，其中 2 列、3 行對(duì)齊并居中對(duì)齊。
.container {display: grid;grid-template-columns: 100px 100px;grid-template-rows: 100px 100px;grid-column-gap: 20pxgrid-row-gap: 20pxjustify-items: centeralign-items: center}
Griddy的特點(diǎn)：
允許使用像素 (px)、小數(shù) (fr) 和百分比 (%) 調(diào)整列和行的大小。
你可以使用多個(gè)單位在單個(gè)網(wǎng)格中調(diào)整大小。
你可以測(cè)試不同的對(duì)齊和對(duì)齊選項(xiàng)。
2、Layoutit
Layoutit 是一個(gè)開(kāi)源的交互式 CSS 網(wǎng)格生成器。
Layoutit 的功能幾乎與 Griddy 相似。但是當(dāng)你對(duì)網(wǎng)格進(jìn)行更改時(shí)，它會(huì)實(shí)時(shí)更新 HTML 和 CSS 代碼。
以下示例顯示了使用 Layoutit 生成的簡(jiǎn)單網(wǎng)格的 HTML 和 CSS 代碼。
<div class=”container”><div ></div><div ></div></div>.container {display: grid;grid-template-columns: 10fr;grid-template-rows: 10fr;grid-auto-columns: 10fr;grid-auto-rows: 10fr;gap: 50px 50px;grid-auto-flow: row;justify-items: center;align-items: center;grid-template-areas:".";}
Layoutit的特點(diǎn)：
你可以從頭開(kāi)始，也可以從基本模板之一開(kāi)始。
你只需將元素拖放到要放置它們的列內(nèi)。
允許使用像素 (px)、小數(shù) (fr) 和百分比 (%) 調(diào)整列和行的大小。
支持 UI 中的網(wǎng)格放置選項(xiàng)。
3、CSS Grid Layout 生成器
CSS Grid Layout 提供了多種設(shè)置來(lái)配置網(wǎng)格容器和網(wǎng)格項(xiàng)。這個(gè)生成器的另一個(gè)特點(diǎn)是它為你提供 3 種不同格式的輸出代碼：通用 CSS、JSX 和樣式組件。
// Output as HTML and CSS Class.container {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;grid-gap: 1em 1em;}.item-2 {grid-area: 1 / 2 / 2 / 2;}.item-3 {grid-area: 2 / 1 / 2 / 2;}// Output as styled-componentimport styled from 'styled-components'const Container = styled.div`display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;grid-gap: 1em 1em;`const Item2 = styled.div`grid-area: 1 / 2 / 2 / 2;`const Item3 = styled.div`grid-area: 2 / 1 / 2 / 2;`
CSS Grid Layout Generator 的特點(diǎn)：
可以分別配置容器和項(xiàng)目設(shè)置。
與其他 CSS 生成器相比，它提供了多種調(diào)整大小的選項(xiàng)。你可以使用 fr、px、em、rem、vw、vh、%、min-content、max-content、minmax()、repeat()、auto-fit 和 auto-fill 調(diào)整行和列的大小。
可以使用 justify-items、align-items、justify-content 和 align-content 選項(xiàng)輕松對(duì)齊內(nèi)容。
輸出代碼可以生成為 CSS 類(lèi)、支持 JSX 的 CSS 模塊和樣式組件。
4、CSS Grid 生成器
使用 CSS Grid Generator，你需要做的就是給出行數(shù)、列數(shù)以及行列之間的間距。然后，單擊一個(gè)按鈕，它將提供一個(gè)如下所示的 CSS 類(lèi)：
.parent {display: grid;grid-template-columns: repeat(5, 1fr);grid-template-rows: repeat(5, 1fr);grid-column-gap: 1px;grid-row-gap: 1px;}
CSS 網(wǎng)格生成器的特點(diǎn)：
提供簡(jiǎn)單的界面并在幾秒鐘內(nèi)生成布局。
允許通過(guò)拖動(dòng)將潛水放置在框內(nèi)。
CSS Grid Generator 是一個(gè)托管在 Netlify 中的開(kāi)源項(xiàng)目，你也可以通過(guò)訪(fǎng)問(wèn)他們的 GitHub 存儲(chǔ)庫(kù)來(lái)為它做出貢獻(xiàn)。
5、cssgr.id
cssgr.id 是你能找到的最簡(jiǎn)單的 CSS 網(wǎng)格生成器之一。
CSS Grid Generator 是一個(gè)托管在 Netlify 中的開(kāi)源項(xiàng)目，你也可以通過(guò)訪(fǎng)問(wèn)他們的 GitHub 存儲(chǔ)庫(kù)來(lái)為它做出貢獻(xiàn)。
cssgr.id 的特點(diǎn)：
提供 5 種起始布局可供選擇，如 3x3、足球隊(duì)形、頁(yè)眉頁(yè)腳、畫(huà)廊和通用網(wǎng)站。
你可以添加占位符文本并查看你的布局與文本的外觀(guān)。
可以通過(guò)添加項(xiàng)數(shù)、列數(shù)和間隙數(shù)來(lái)輕松配置。
提供 HTML 和 CSS 類(lèi)作為輸出。
以下代碼顯示了一個(gè)與畫(huà)廊形態(tài)對(duì)齊的 5 個(gè)項(xiàng)目的示例。
// HTML<div class="grid"><div class="span-col-3 span-row-2">Item 1</div><div>Item 2</div><div class="span-row-2">Item 3</div><div class="span-row-3">Item 4</div><div>Item 5</div></div>// CSS Classes.grid {display: grid;grid-template-columns: repeat(6, 1fr);grid-gap: 10px;}.span-col-3{grid-column: span 3 / auto;}.span-row-2{grid-row: span 2 / auto;}.span-row-3{grid-row: span 3 / auto;}
結(jié)論
CSS 網(wǎng)格生成器是開(kāi)發(fā)人員在幾分鐘內(nèi)生成簡(jiǎn)單 CSS 布局的便捷工具。除了我在這里討論的這5款工具之外，還有很多類(lèi)似的工具，你應(yīng)該根據(jù)自己的需求進(jìn)行選擇。
例如，CSS Grid Generator 和 cssgr.id 等工具不提供對(duì)齊選項(xiàng)。但它們使用起來(lái)非常簡(jiǎn)單。
我希望我的建議能幫助到你，并為你的項(xiàng)目選擇最好的 CSS 網(wǎng)格生成器。并且不要忘記在使用這些庫(kù)后分享你的想法。
感謝閱讀！！！
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
