如何用 CSS 網(wǎng)格快速做出網(wǎng)站原型

時間：2023-09-01 10:06:02 | 來源：網(wǎng)站運營

時間：2023-09-01 10:06:02 來源：網(wǎng)站運營

如何用 CSS 網(wǎng)格快速做出網(wǎng)站原型：

簡評：CSS 網(wǎng)格模塊是創(chuàng)建網(wǎng)站模型的絕佳工具。它是我嘗試過的任何其他系統(tǒng)中最快讓你體驗布局的工具。

我們的網(wǎng)格

我們將從模仿一個經(jīng)典網(wǎng)站的非常基本的網(wǎng)格開始：







首先，我將解釋我們需要的 HTML 和 CSS 代碼，我將之分為 4 個部分。一旦你弄明白了，我們將繼續(xù)布局試驗。
如果你對 CSS 網(wǎng)格完全陌生，你可能要瀏覽一下我的 5 分鐘介紹 CSS 網(wǎng)格的文章。

1. 標記

首先我們需要一點點 HTML 代碼。一個容器（我們把它變成網(wǎng)格的元素）和一些項目（標題，菜單，內(nèi)容，頁腳）。

<div class="container"> <div class="header">HEADER</div> <div class="menu">MENU</div> <div class="content">CONTENT</div> <div class="footer">FOOTER</div> </div>

2. CSS 中的基礎設置

然后我們需要設置我們的網(wǎng)格，并聲明我們需要多少行和列。這是我們最初的 CSS：

.container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; }稍后我們會添加更多代碼，但首先我想解釋一下。
上面的代碼意思是：創(chuàng)建一個有 12 列的網(wǎng)格，每列寬度為總寬度的十二分之一。創(chuàng)建三行，第一行高 50px，第二行高 350px，第三行高 50px，最后，網(wǎng)格中每個元素添加一個間隙。

3. 添加 grid-template-areas

讓我們能輕松體驗布局的功能叫模版區(qū)域。
把它添加到網(wǎng)格中，我們只需要簡單地給 container 添加一個 grid-template-area 屬性即可。語法可能有點怪，因為它不像任何其他的 CSS 語法。就像這樣：

.container { display: grid; grid-gap: 5px; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-template-areas: "h h h h h h h h h h h h" "m m c c c c c c c c c c" "f f f f f f f f f f f f"; }grid-template-areas 屬性背后的邏輯是你在代碼中創(chuàng)建一個可視化的網(wǎng)格。你可以看到，它有 3 行、12 列。就像我們在定義 grid-template-columns 和 grid-template-rows 一樣。

每一行代表一行，每一個字符（h，m，c，f）代表一個網(wǎng)格元素。

四個字符中的每一個都形成一個矩形：grid-area。

可能你已經(jīng)猜到了，我選擇的四個字符 h，m，c，f 分別代表了 header，menu，content，footer。我當然可以把它們換成我想要的任何字符，但使用它們描述的項目的第一個字符顯然比較合理。

4. 把網(wǎng)格區(qū)域賦給項目

現(xiàn)在我們需要連接字符和網(wǎng)格中的項目。我們將使用 grid-area 屬性：

.header { grid-area: h; } .menu { grid-area: m; } .content { grid-area: c; } .footer { grid-area: f; }布局結(jié)果如下：

試驗布局

現(xiàn)在終于到了我們體驗這個功能的強大時候了，我們可以輕松地實驗布局。只需要修改一下 grid-template-areas 中的字符即可。例如我們把上面的菜單移動到右邊：

grid-template-areas: “h h h h h h h h h h h h” "c c c c c c c c c c m m” “f f f f f f f f f f f f”;結(jié)果就會變成：







我們可以使用 . 來創(chuàng)建空白網(wǎng)格：

grid-template-areas: “. h h h h h h h h h h .” "c c c c c c c c c c m m” “. f f f f f f f f f f .”;看起來是這樣的：







現(xiàn)在我推薦你看一下我的 CSS 網(wǎng)格課程，你可以自己實驗代碼。

添加響應能力

把這個和響應能力相結(jié)合簡直就是一大殺器，以前這是不可能只用 HTML 和 CSS 就能達到這種效果的。假設當你用手機瀏覽時想讓菜單放在標題旁邊，你可以這樣做：

@media screen and (max-width: 640px) { .container { grid-template-areas: "m m m m m m h h h h h h" "c c c c c c c c c c c c" "f f f f f f f f f f f f"; } }結(jié)果看起來像這樣：

記住這些是用純 CSS 代碼完成的，不需要改動 HTML。無論 div 標簽在標記中是如何放置的，我們都能隨意轉(zhuǎn)換。

這被稱為源代碼的獨立性，這是 CSS 的一大進步。

它讓 HTML 回歸本職工作：標記內(nèi)容。至于樣式，那是 CSS 的工作。




來自公眾號：網(wǎng)頁設計自學平臺



英文原文：How to prototype websites quickly with CSS Grid