使用CSS Grid快速建立網(wǎng)站原型

時間：2023-07-29 22:09:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-07-29 22:09:01 來源：網(wǎng)站運(yùn)營

使用CSS Grid快速建立網(wǎng)站原型：

我們的網(wǎng)格

我們將從一個模仿經(jīng)典網(wǎng)站的非?；镜木W(wǎng)格開始：




我對我們的示例進(jìn)行了一些設(shè)計，但這與CSS Grid無關(guān)，所以我將其排除在外。

首先，我將解釋我們需要使用的HTML和CSS，我將其分解為四個部分。一旦你理解了這些，我們將繼續(xù)進(jìn)行布局實(shí)驗(yàn)。

1.標(biāo)記

我們需要的第一件事是HTML。一個容器（我們將變成網(wǎng)格的元素）和項目（標(biāo)題，菜單，內(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中的基本設(shè)置

然后我們需要設(shè)置網(wǎng)格并指定我們需要的行數(shù)和列數(shù)。這是第一個用于此的CSS：

.container { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; }我稍后會添加更多，但我首先要你理解這一點(diǎn)。

以下是上述代碼所說的內(nèi)容：創(chuàng)建一個包含12列的網(wǎng)格，每列為一個單位寬度（總寬度的1/12）。創(chuàng)建三行，其中第一行為50px高，第二行為350px，第三行為50px。最后，在網(wǎng)格中的項之間添加間隙。

3.添加網(wǎng)格模板區(qū)域

允許我們超級輕松地進(jìn)行布局實(shí)驗(yàn)的功能稱為模板區(qū)域。

要將它添加到網(wǎng)格中，我們只需給容器一個grid-template-areas屬性。語法可能有點(diǎn)奇怪，因?yàn)樗c其他任何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)格的可視化表示。如您所見，它有三行十二列，就像我們在grid-template-columns和中定義的一樣grid-template-rows。

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

四個字母中的每一個現(xiàn)在形成矩形grid-area。

正如你可能已經(jīng)猜到了，我選擇的人物h，m，c，f因?yàn)槲覀兊碾娋W(wǎng)包括header，menu，content和footer。當(dāng)然，我可以把它們稱為任何我想要的東西，但是使用他們描述的項目的第一個字符是有意義的。

4.給予物品區(qū)域

現(xiàn)在我們需要將這些字符與網(wǎng)格中的項目連接起來。要做到這一點(diǎn)，我們將使用該grid-area屬性：

.header { grid-area: h; }.menu { grid-area: m; }.content { grid-area: c; }.footer { grid-area: f; }這導(dǎo)致以下布局：

嘗試布局

現(xiàn)在我們終于達(dá)到了這個功能的美妙，因?yàn)槲覀兛梢暂p松地試驗(yàn)布局。這只是改變grid-template-areas房產(chǎn)特征的問題。例如，讓我們將菜單移到右側(cè)：

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”;這導(dǎo)致了這種布局：







我們可以使用點(diǎn)來創(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 .”;這是看起來如何：

增加對混合的響應(yīng)能力

將其與響應(yīng)性相結(jié)合也是一個殺手級的功能，因?yàn)橹爸荒苁褂肏TML和CSS。假設(shè)您想在移動設(shè)備上查看菜單旁邊的菜單。然后你可以這樣做：

@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";} }這將產(chǎn)生以下結(jié)果：




請記住，所有這些更改都是使用純CSS完成的，而不會觸及HTML。無論div標(biāo)簽如何在標(biāo)記中布局，我們都可以隨心所欲地進(jìn)行隨機(jī)播放。

這稱為源序獨(dú)立性，它是CSS的一大進(jìn)步。

它允許HTML成為它的目的：內(nèi)容標(biāo)記。而不是造型，因?yàn)檫@是CSS的工作