為了更好的服務(wù)與網(wǎng)站開發(fā)業(yè)務(wù)，CSS產(chǎn)生了更多的可能，尤其是你可以用CSS做定制網(wǎng)站開發(fā)時，已經(jīng)變得越來越多樣化。有了CSS Grid的附加功能，現(xiàn)在可以實現(xiàn)看起來像是手工布置的布局。

在這篇文章中我們想談?wù)凜SS網(wǎng)格的驚人的可能性，以及它如何允許更接近印刷設(shè)計的復(fù)雜布局。我們將要討論的設(shè)計實際上是我為一個客戶做的(根據(jù)一個演示案例稍微修改了一下)。它將涵蓋CSS網(wǎng)格的兩大用例:有一個靜態(tài)網(wǎng)格，我們在其中為每個元素定義指定的起點和終點；使用CSS網(wǎng)格模板區(qū)域來重新排序一個簡單的HTML布局，無需更新HTML。


在這里你可以看到我們將要實現(xiàn)的設(shè)計:左邊是桌面，右邊是移動的裁剪版本(想象移動視圖繼續(xù)第3和第4部分)。這里發(fā)生了很多事情，沒有什么真正適合整齊的行和列。圖像被放置在不均勻的網(wǎng)格上，有時甚至重疊，我們有一些狹窄的文本和一個編號元素，兼作設(shè)計元素。

讓我們首先看看每個彩色組件中的圖像網(wǎng)格元素。雖然我們有四種顏色的成分，但只有兩種重復(fù)出現(xiàn)。為了更容易比較，我把桌面版切成兩半，把兩半放在一起——這樣更容易比較。如你所見，第一個和第三個是一樣的，第二個和第四個也是一樣。如果我們只比較第一個和第二個變體，它們是不同的，但是基本的構(gòu)建塊是非常相似的(一個全尺寸的背景顏色、一個大的圖像塊、一個帶有數(shù)字的列和一些文本)。由于這一點，我們可以認(rèn)為它是同一個組件，只是有兩種選擇。

在過去我們必須在Photoshop中制作圖像網(wǎng)格，然后將它作為一個圖像添加到頁面中。顯然，我們?nèi)匀豢梢赃@樣做，但是這種解決方案對于響應(yīng)性網(wǎng)站來說從來都不是特別好，而且使用象素可以，但是如果我們想改變一張圖片，我們必須在Photoshop中做一些布局，然后重做所有的東西。我們將需要這樣做，每次這個元素添加了不同的圖片。

但是如果沒有其他選擇，我們就不會在本文的這一部分了！一段時間以來，它一直是安全使用CSS網(wǎng)格，并且它能夠用幾行CSS就相當(dāng)靈活地解決這個布局。