步驟1：確定您的網格寬度

在開始之前，您需要確定您的網格，將需要有多寬。對于我的WordPress網站，我可以看到，通過使用谷歌瀏覽器的“檢查元素”功能，當你右鍵點擊對象，我的主柱的寬度是450px。這是我發現最快的方式，可以快速確定網頁上的對象的寬度和高度

步驟2：網格設計

而不是hand-building網格，您可以做的，如果你想要的，我建議要與許多可用網格生成器工具。在本文中，我將使用網格MindPlay生成器。這是一個非常簡單的和輕型網格生成器。

我想要一個三列的顯示和我需要確保我的像素是450。所以做相應的調整和跳到“Export”選項卡。

在導出選項卡，使用top-most的“Style Sheet”的框架并向下滾動，直到你看到“Grid”的評論。你要拷貝一切從評論底下的框架。它應該只會在大約30行<pre >。

第3步：更新你的WordPress的樣式

登錄到你的WordPress網站和外觀>編輯器

在編輯器的右下角面板，你將看到一個風格。css文件（或類似的東西，這取決于你的主題）。點擊這個打開。

滾動到底部的表并粘貼您從MindPlay.dk pre：

步驟4：實施網格

使用網格，您只需創建一個“網格”類<DIV>。每個網格面積在CSS定義。開辟了新的一頁或后。去的HTML標簽，開始建立您的網格

下面是一些示例前，您可以粘貼到位，讓你開始：

<div class="grid">

<p class="grid-m1"> </p>

<p class="grid-c1">Left Column</p>

<p class="grid-m2"></p>

<p class="grid-c2">Middle Column</p>

<p class="grid-m3"> </p>

<p class="grid-c3">Right Column</p>

<p class="grid-m4"> </p>

</div>

下面是它看起來像在WordPress：

保存/更新的頁面，看看結果。在我的情況，這是該網站的主頁：

正如您可以看到的從上面的屏幕截圖中，我們有三列，一切都是正確的，我們希望它能。你可以添加任意數量的行作為你想通過簡單地從以下<pre >：

<div class="grid">

<!-- Row #1 -->

<p class="grid-m1"></p>

<p class="grid-c1"> Left Column</p>

<p class="grid-m2"></p>

<p class="grid-c2"> Middle Column</p>

<p class="grid-m3"></p>

<p class="grid-c3"> Right Column</p>

<p class="grid-m4"></p>

<!-- Row #2 -->

<p class="grid-m1"></p>

<p class="grid-c1"> Left Row #2</p>

<p class="grid-m2"></p>

<p class="grid-c2"> Middle Row #2</p>

<p class="grid-m3"></p>

<p class="grid-c3"> Right Row #2</p>

<p class="grid-m4"></p>

</div>

這是到目前為止，它看起來如何：

技巧的調整

你可能無法在一些瀏覽器中當你有多行。如果您使用的是250像素250像素的圖像，然后在grid-m4行的高度是250像素。

.grid-m4 {

float:left;

width:20px;

height:250px;

}

這將確保你的。grid-m1左邊的下一行不飄到它上面的行。

如果你想風格整個網格的背景，您可能需要調整網格的高度。我們假定您有四行網格，每個250 px。你要加的高度。網格類在1000 px所以任何樣式元素添加將覆蓋整個網格的設計。

.grid {

width:450px;

height:1000px;

margin:auto;

}

根據MindPlay的版本.dk網格generator 使用，該網站可能不會生成”.grid-m4”，相反，您將需要使用.grid-m1之后。確保你的網格grid-c3延伸到合適位置：

<div class="grid">

<p class="grid-m1"> </p>

<p class="grid-c1"> Left Column</p>

<p class="grid-m2"> </p>

<p class="grid-c2"> Middle Column</p>

<p class="grid-m3"> </p>

<p class="grid-c3"> Right Column《/p>

<p class="grid-m1"> </p>

</div>

最終結果

下面是我最后的結果看起來像有兩行和一些簡單的圖形：

有樂趣的設計，并記住，你可以在你想要的任何方式的風格你的網格。