自從CSS存在以來，網(wǎng)站設(shè)計師就一直難以使用它來操作網(wǎng)站設(shè)計布局。因為在頁面上定位元素從來都不是件容易的事，通常需要使用浮點(diǎn)數(shù)或表之類的方法，而不是專門為此設(shè)計CSS系統(tǒng)。
所有這些都隨著CSS網(wǎng)格的出現(xiàn)而改變，直到最近才被所有主流瀏覽器采用。最后，有一種簡單的方法可以在網(wǎng)頁上創(chuàng)建二維布局，并在其中放置元素。對于這樣一個簡單的問題，沒有比這更復(fù)雜的解決方案了。
CSS網(wǎng)格只有一個問題：許多開發(fā)人員，尤其是新手，在學(xué)習(xí)如何使用它們時遇到了困難！如果你很難使用flexbox，那么學(xué)習(xí)網(wǎng)格似乎是一項不可能完成的任務(wù)。
幸運(yùn)的是，其他開發(fā)人員在這里用他們的網(wǎng)格布局生成器來拯救internet。只要點(diǎn)擊或填寫一些框，你就有了一個框架。
下面是一些偉大的網(wǎng)格生成器的集合，從非常簡單的布局生成器到涉及CSS系統(tǒng)更復(fù)雜特性的生成器。
CSS網(wǎng)格生成器
首先是簡單但有效的CSS網(wǎng)格生成器，沒有多余的或令人困惑的插件，只是創(chuàng)建一個網(wǎng)格，調(diào)整一些數(shù)字，并把代碼粘貼到您的網(wǎng)站上，就這么簡單。如果您是CSS網(wǎng)格的新手，這是一個很好的入門工具。
Griddy
Griddy是一個有用的CSS網(wǎng)格生成器，它允許您添加任意數(shù)量的元素，并根據(jù)行或列的大小調(diào)整元素的大小。你可以用分?jǐn)?shù)（fr），像素，百分比，或自動調(diào)整它們的大小——而且你不需要為整個網(wǎng)格使用一個單元。有兩列使用fr和小心大小的其他像素！
LayoutIt
使用layouit，您可以輕松創(chuàng)建任何大小的網(wǎng)格，甚至可以將網(wǎng)格放在其他網(wǎng)格中。在單獨(dú)的框內(nèi)和框外，根據(jù)需要添加更多的列和行，并完全控制創(chuàng)建的布局。
網(wǎng)格奇才
這是一個高級用戶準(zhǔn)備學(xué)習(xí)更多關(guān)于CSS網(wǎng)格的工具，Grid Wiz不僅僅是一個簡單的生成器。您可以在側(cè)欄中編輯代碼，并看到它的實時更新。然后下載它，或者添加Grid Wiz作為依賴項并編譯它。
cssgr.id
cssgr是最靈活的CSS布局生成器之一，id為您提供了許多選擇。有五種初始布局，您可以添加任意多的項、列和行。甚至還有一個占位符文本選項，這樣您就可以看到這個布局的實際效果。
很容易在CSS中創(chuàng)建網(wǎng)格
Web開發(fā)人員總是朝著更好、更高效的internet后端邁進(jìn)。CSS網(wǎng)格只是最新的發(fā)展之一，它最終解決了一個長期困擾CSS設(shè)計師的問題。
CSS網(wǎng)格自2011年提出以來就一直存在，但直到2017年，所有主流瀏覽器才最終采用了對它們的支持。
現(xiàn)在開發(fā)人員不再需要擔(dān)心使用它們，已經(jīng)有了大量的CSS網(wǎng)格指南、教程和資源，就像這些布局生成器一樣。所以，如果你還在使用flexboxes或者float之類的方法來設(shè)計網(wǎng)頁，可以考慮使用網(wǎng)格。網(wǎng)上有很多幫助你學(xué)習(xí)的支持。
如果你還在學(xué)習(xí)使用網(wǎng)頁設(shè)計的網(wǎng)格布局，看看這個全面的指南，讓你開始吧！
