日本乱中文字幕系列-日本伦理黄色大片在线观看网站-日本伦理片网站-日本伦理网站-韩国三级视频网站-韩国三级视频在线观看

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

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

教程

您的第一步將是熟悉CSS Grid的基本原理。我們有很多博客文章和視頻教程。我想說的是，當你有時間的時候，讓我看看這里的一切，因為它們都提供了不同的視角，可以幫助你更好地理解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)格是一個免費的25視頻課程。這些視頻是由傳奇的韋斯·博斯(Wes Bos)制作的，他為網(wǎng)絡(luò)開發(fā)者制作了相當多的視頻課程。本課程提供了入門文件，完成了每個問題的解決方案。

css技巧

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

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

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

工具

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

瀏覽器的工具

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

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

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

CSS網(wǎng)格生成器

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

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

由IBM GRIDISH

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

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

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

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

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

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