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

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

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

安裝GuideGuide

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

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

計算網格

在Photoshop中設置指導線之前，我們需要計算網格，包括總寬度、列寬、列號和列溝。使用Heroku.com的網格計算器可以很容易地完成這些任務。

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

您還可以下載生成的CSS網格。

創(chuàng)建網格

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

填寫指南面板中的字段——欄距、欄寬和欄號，按照網格計算器中的字段填寫。

然后，在指南面板，轉到設置選項卡。在這個選項卡中，你可以找到一些預設的指導線。選擇輪廓預設在畫布的邊緣創(chuàng)建指導線。

我們完成了，這里是我們的自定義網格準備用于設計一個網站。

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