網(wǎng)格是一種流行的網(wǎng)站構(gòu)建方法，它更加一致，使網(wǎng)頁各個(gè)部分比例正確。CSS Grid框架的兩個(gè)示例是960.gs或Skeleton。然而，使用網(wǎng)格框架的限制之一是靈活性會(huì)降低。

我們受制于框架的規(guī)范及其作者的方法，在許多情況下，這可能不適合我們的網(wǎng)站建設(shè)要求。

在這篇文章中，我們將向你展示如何為CSS和Photoshop創(chuàng)建一個(gè)自定義網(wǎng)格。為了簡化這個(gè)過程，我們將使用幾種工具。讓我們來看看吧！

安裝GuideGuide

首先，我們需要安裝GuideGuide，這是一個(gè)Photoshop擴(kuò)展來創(chuàng)建指南線，專門用來輕松創(chuàng)建網(wǎng)格。為了能夠安裝指南指南，你的Photoshop需要至少是CS4。

可以通過Adobe擴(kuò)展管理器安裝Photoshop擴(kuò)展，如下所示。

計(jì)算網(wǎng)格

在Photoshop中設(shè)置指導(dǎo)線之前，我們需要計(jì)算網(wǎng)格，包括總寬度、列寬、列號(hào)和列溝。使用Heroku.com的網(wǎng)格計(jì)算器可以很容易地完成這些任務(wù)。

在本例中，1000px為指定總寬度，為排水溝寬度指定30px，為列數(shù)指定10。然后，該工具將自動(dòng)生成實(shí)際的內(nèi)容寬度和適當(dāng)?shù)牧袑挾取?

您還可以下載生成的CSS網(wǎng)格。

創(chuàng)建網(wǎng)格

是時(shí)候回到Photoshop了，轉(zhuǎn)到這個(gè)菜單：窗口>擴(kuò)展來顯示Photoshop側(cè)邊欄中的指南面板。然后，創(chuàng)建一個(gè)新的Photoshop畫布，并設(shè)置畫布寬度根據(jù)完整的寬度-在我的情況下，是1000px。

填寫指南面板中的字段——欄距、欄寬和欄號(hào)，按照網(wǎng)格計(jì)算器中的字段填寫。

然后，在指南面板，轉(zhuǎn)到設(shè)置選項(xiàng)卡。在這個(gè)選項(xiàng)卡中，你可以找到一些預(yù)設(shè)的指導(dǎo)線。選擇輪廓預(yù)設(shè)在畫布的邊緣創(chuàng)建指導(dǎo)線。

我們完成了，這里是我們的自定義網(wǎng)格準(zhǔn)備用于設(shè)計(jì)一個(gè)網(wǎng)站。

此外，您可以通過擴(kuò)展畫布寬度在畫布的左右兩邊添加更多的空間，然后在新層中添加矩形，以創(chuàng)建網(wǎng)格列的可視助手。