如何用 CSS 網格快速做出網站原型

thursday 發布于2019-08-29 14:05 / 1520人閱讀

摘要：簡評網格模塊是創建網站模型的絕佳工具。如果你對網格完全陌生，你可能要瀏覽一下我的分鐘介紹網格的文章。每一行代表一行，每一個字符，，，代表一個網格元素。無論標簽在標記中是如何放置的，我們都能隨意轉換。這被稱為源代碼的獨立性，這是的一大進步。

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

我們的網格

我們將從模仿一個經典網站的非常基本的網格開始：

首先，我將解釋我們需要的 HTML 和 CSS 代碼，我將之分為 4 個部分。一旦你弄明白了，我們將繼續布局試驗。

如果你對 CSS 網格完全陌生，你可能要瀏覽一下我的 5 分鐘介紹 CSS 網格的文章。

1. 標記
首先我們需要一點點 HTML 代碼。一個容器（我們把它變成網格的元素）和一些項目（標題，菜單，內容，頁腳）。


  HEADER
  MENU
  CONTENT
  FOOTER

2. CSS 中的基礎設置
然后我們需要設置我們的網格，并聲明我們需要多少行和列。這是我們最初的 CSS：

.container {
    display: grid;    
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px 350px 50px;
    grid-gap: 5px;
}

稍后我們會添加更多代碼，但首先我想解釋一下。

上面的代碼意思是：創建一個有 12 列的網格，每列寬度為總寬度的十二分之一。創建三行，第一行高 50px，第二行高 350px，第三行高 50px，最后，網格中每個元素添加一個間隙。

3. 添加 grid-template-areas

讓我們能輕松體驗布局的功能叫模版區域。

把它添加到網格中，我們只需要簡單地給 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 屬性背后的邏輯是你在代碼中創建一個可視化的網格。你可以看到，它有 3 行、12 列。就像我們在定義 grid-template-columns 和 grid-template-rows 一樣。

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

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

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

4. 把網格區域賦給項目

現在我們需要連接字符和網格中的項目。我們將使用 grid-area 屬性：

.header {
    grid-area: h;
}
.menu {
    grid-area: m;
}
.content {
    grid-area: c;
}
.footer {
   grid-area: f;
}

布局結果如下：

試驗布局

現在終于到了我們體驗這個功能的強大時候了，我們可以輕松地實驗布局。只需要修改一下 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”;

結果就會變成：

我們可以使用 . 來創建空白網格：

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 .”;

看起來是這樣的：

現在我推薦你看一下我的 CSS 網格課程，你可以自己實驗代碼。

添加響應能力

把這個和響應能力相結合簡直就是一大殺器，以前這是不可能只用 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";
    }
}

結果看起來像這樣：

GIF 鏈接（總是上傳失敗，也是醉了）

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

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

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

原文鏈接：How to prototype websites quickly with CSS Grid

云服務器 GPU云服務器如何用css 如何用php做網站如何用vps搭建網站如何用虛擬主機搭建網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112909.html

【譯】編寫更好的CSS必備的40個工具

摘要：一個叫的人用純重繪并模擬了種不同的移動設備包括可以給你的網站添加不相關的獨立組件的一個庫。每一個組件都是針對移動設備定制的，并且它有很多你在傳統的框架中看不到的功能。如果你用開發移動優先的網站，并想要網站正常運行在低版本的上，可以考慮。眾所周知，CSS是非常棒的，它使網站看起來很漂亮，可以為網站添加動畫，并讓呈現和內容分離。去了解CSS的一切是非常難做到的，它只會變得更加困難,因為我...

moven_j 2019-08-28 18:09 評論0 收藏0
前端每日實戰：150# 視頻演示如何用 CSS 和 D3 創作一個集體舞動畫

摘要：接下來用批量增加的元素。引入庫聲明一個常量，表示網格的邊長刪除掉文件中的子元素，改為用動態創建繼續用連綴語法增加子元素刪除掉文件中的變量聲明，改為用動態聲明略最后，把邊長改為，即讓個一起動畫大功告成 showImg(https://segmentfault.com/img/bVbhJZg?w=400&h=301); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預...

AlphaWatch 2019-08-29 16:53 評論0 收藏0
前端每日實戰：150# 視頻演示如何用 CSS 和 D3 創作一個集體舞動畫

摘要：接下來用批量增加的元素。引入庫聲明一個常量，表示網格的邊長刪除掉文件中的子元素，改為用動態創建繼續用連綴語法增加子元素刪除掉文件中的變量聲明，改為用動態聲明略最后，把邊長改為，即讓個一起動畫大功告成 showImg(https://segmentfault.com/img/bVbhJZg?w=400&h=301); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預...

tabalt 2019-08-23 12:13 評論0 收藏0