自從CSS Grid的出現(xiàn)它就變得很受歡迎，它甚至被我們行業(yè)最新的官方流行語所引用。談?wù)撝俏磥淼木W(wǎng)頁設(shè)計和布局。我可以滔滔不絕地說，當(dāng)狂熱發(fā)生的時候，沒有使用網(wǎng)格的人會被拋在后面，維基百科的互聯(lián)網(wǎng)先驅(qū)名單上的每一個人都會回來帶我們?nèi)⒓犹炜罩械膫ゴ蟮木钟蚓W(wǎng)聚會。

我的觀點(diǎn)是，如果你一直在關(guān)注——如果你正在閱讀這篇文章，你可能會關(guān)注——那么你就已經(jīng)知道了。但是，讓我們假設(shè)您已經(jīng)聽說了很多關(guān)于CSS Grid的好東西，但是還沒有機(jī)會使用它。你從哪里開始呢?

教程

您的第一步將是熟悉CSS Grid的基本原理。我們有很多博客文章和視頻教程。我想說的是，當(dāng)你有時間的時候，讓我看看這里的一切，因為它們都提供了不同的視角，可以幫助你更好地理解CSS Grid。

網(wǎng)格的例子

Grid by Example是一個專門用于CSS Grid的網(wǎng)站，它是一個更完整的資源。他們有教程。他們的例子。他們有現(xiàn)成的HTML模板，視頻教程，還有比我們這里更多的資源鏈接。

這個網(wǎng)站碰巧是由Rachel Andrew創(chuàng)建的，她是CSS工作組的顧問，現(xiàn)在已經(jīng)推廣CSS Grid有一段時間了。所以她知道自己的事。

布局的土地

Layout Land是YouTube上的一個頻道，主要關(guān)注——你可能已經(jīng)猜到了——布局。這些視頻由珍·西蒙斯(Jen Simmons)創(chuàng)建和主持，她創(chuàng)造了“固有的網(wǎng)頁設(shè)計”(參見本文中鏈接的第一件事)，主要關(guān)注CSS Grid，以及其他一些非常有用的信息。

CSS網(wǎng)格

CSS網(wǎng)格是一個免費(fèi)的25視頻課程。這些視頻是由傳奇的韋斯·博斯(Wes Bos)制作的，他為網(wǎng)絡(luò)開發(fā)者制作了相當(dāng)多的視頻課程。本課程提供了入門文件，完成了每個問題的解決方案。

css技巧

對于那些沒有時間上視頻課程的人來說，我們有一些不錯的老式博客文章。而且他們是我們在CSS-Tricks的好朋友!(嗯，他們是我的朋友，但他們還不知道。)

對于快速而骯臟的介紹，您將希望閱讀Robin Rendle的CSS Grid。

要獲得一個包含示例的更完整的指南、所有您可能需要的代碼選項、術(shù)語介紹，以及更多內(nèi)容，您應(yīng)該查看關(guān)于Grid的完整指南。

工具

好吧，你知道基本的知識。現(xiàn)在我們有一些工具可以讓你的生活變得更簡單只要你把CSS網(wǎng)格放在一起：

瀏覽器的工具

無論你是像我一樣在瀏覽器中設(shè)計網(wǎng)站，還是僅僅需要在草圖中實(shí)現(xiàn)別人的設(shè)計，它都會幫助你看清你在做什么。當(dāng)談到CSS網(wǎng)格時，這并不是最簡單的事情。當(dāng)然，您可以收集一些示例內(nèi)容并開始布局，或者您可以使用基于瀏覽器的網(wǎng)格檢查器。

火狐量子：開發(fā)者版有一個，還有很多額外的好處。實(shí)際上，如果您在瀏覽器中進(jìn)行設(shè)計，這可能是最好的瀏覽器之一。

到目前為止，Chrome擁有Gridman - CSS網(wǎng)格檢查器擴(kuò)展?，F(xiàn)在，它是第三方的延伸，包含了所有的風(fēng)險。當(dāng)你用鼠標(biāo)懸停在網(wǎng)格上時，它也只能“顯示”網(wǎng)格。希望這能盡快得到解決。

CSS網(wǎng)格生成器

當(dāng)你已經(jīng)在瀏覽器中工作的時候，這些都很好，但是如果你想在CSS中構(gòu)建一個自定義網(wǎng)格，粘貼到你的文件中，然后呢?進(jìn)入CoffeeCup CSS網(wǎng)格構(gòu)建器。這是一個針對Windows和Mac桌面的免費(fèi)應(yīng)用程序，可以讓您快速、輕松地設(shè)計CSS布局，然后將其導(dǎo)入其他項目。

你可以設(shè)置網(wǎng)格、浮動布局等等，所有這些都是在視覺界面中設(shè)計的，可以幫助你完成很多基本的布局工作。現(xiàn)在，你必須提供一些個人數(shù)據(jù)(姓名/電子郵件)來下載這個應(yīng)用程序，否則它是免費(fèi)的。

由IBM GRIDISH

現(xiàn)在，CSS Grid擁有出色的現(xiàn)代瀏覽器支持，但并不是非常好的遺留瀏覽器支持。如果你也想支持舊瀏覽器，你會怎么做?你可以試試Gridish，它是一個節(jié)點(diǎn)。IBM創(chuàng)建的js項目。

基本上，你輸入你的網(wǎng)格的規(guī)格，你得到兩件事：

為您的設(shè)計團(tuán)隊自動生成帶有畫板和布局文件的草圖文件。

SASS/CSS代碼為您的網(wǎng)格，有一個內(nèi)置在Flexbox的后備網(wǎng)格，它目前有更好的瀏覽器支持。

他們還提供了一個Chrome擴(kuò)展，專門用于檢查用這個工具構(gòu)建的CSS網(wǎng)格。您可以在上面的官方鏈接上閱讀關(guān)于該項目的所有內(nèi)容，或者直接訪問GitHub repo。

就這些了，真的。CSS Grid仍然是一種相當(dāng)“新”的技術(shù)，因此盡管有大量的資源，但目前它們大多覆蓋相同的領(lǐng)域。但隨著時間的推移，我懷疑我們會看到更多。

本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶參考了本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請及時與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員徽在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.junxiaosheng.cn/1946.html