CSS Grid 佈局很差理解？可藉助 CSS Grid Generator 快速上手並掌握 Grid 佈局！

時間 2020-03-27

標籤 css grid 佈局很差理解藉助 generator 快速上手掌握欄目 CSS 简体版

原文原文鏈接

點贊再看，養成習慣
本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了不少個人文檔，和教程資料。歡迎Star和完善，你們面試能夠參照考點複習，但願咱們一塊兒有點東西。css

爲了保證的可讀性，本文采用意譯而非直譯。html

CSS Grid Generator

CSS Grid Generator是一個由Sarah Drasner建立的免費工具。它是一個可視化設計工具，容許我們建立一個基本的 grid 佈局，而後就能夠使用生成對應的代碼，幫助我們快速佈局。前端

第一次進入是界面是這樣子的：git

CSS Grid 佈局示例

當我正在學習一些東西時，我發現最好的學習方法是使用現有的工具構建實用的東西。在本文中，我們先從一個簡單的佈局開始，而後使用CSS Grid Generator建立在實際項目中使用所需的代碼。 github

首先從一個典型的佈局開始，以下所示：面試

接着在 CSS Grid Generator 界面的右側更新對應的如下內容：瀏覽器

行: 4
列: 3
列間距: 20
行間距: 20

間距讓我們的內容之間有必定的空白。能夠只使用列間距，但我想在 Header 和 Footer 以前留出一些空白，因此還同時使用行間距。服務器

接下來，就是須要定義應用程序的不一樣區域。在 CSS Grid Generator 中，能夠單擊並拖動到須要合併地方來建立一個區域。我們但願Footer跨越整個網格，側邊欄佔用一個單元格，主內容區域跨越2列，Footer 跨越4列,最終效果，以下：網絡

這看起來有點像我們想要的佈局，但仍然須要定義一些具體的尺寸。在CSS Grid Generator 會注意到每行和每列旁邊都有一個輸入框，可用於設置特定大小。ide

Header: 100px height
Sidebars: 200px width
Footer: 50px height

這看起來更像更像我們想要的佈局，可是你可能會問1fr是多少。

軌道能夠用任何長度單位來定義。 Grid還引入了一個額外的長度單位，以幫助各位建立靈活的 Grid軌道。新的 fr單元表示網格容器中可用空間的一小部分。

第二行的1fr會告訴區域佔用剩餘的可用空間。若是將容器設置爲100vh，就會佔據整個頁面的內容，列也是如此。

CSS Grid Generated 生成的代碼

點擊「請給我示例中的代碼」就能夠查看對應佈局生成的 CSS 代碼：

.parent { 
display: grid; 
grid-template-columns: 200px 1fr 1fr 200px; 
grid-template-rows: 100px 1fr 50px; 
grid-column-gap: 20px;
grid-row-gap: 20px; 
.div1 { grid-area: 1 / 1 / 2 / 5; } 
.div2 { grid-area: 2 / 1 / 3 / 2; } 
.div3 { grid-area: 2 / 2 / 3 / 4; } 
.div4 { grid-area: 2 / 4 / 3 / 5; } 
.div5 { grid-area: 3 / 1 / 4 / 5; } 
}

建立一個simple-layout.htm並添加如下代碼：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Layout</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>

</body>
</html>

接下來添加上面生成的 CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Simple Layout</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    .parent {
      display: grid;
      grid-template-columns: 200px 1fr 1fr 200px;
      grid-template-rows: 100px 1fr 50px;
      grid-column-gap: 20px;
      grid-row-gap: 20px;
      height: 100vh;
    }

    .div1 {
      grid-area: 1 / 1 / 2 / 5;
    }

    .div2 {
      grid-area: 2 / 1 / 3 / 2;
    }

    .div3 {
      grid-area: 2 / 2 / 3 / 4;
    }

    .div4 {
      grid-area: 2 / 4 / 3 / 5;
    }

    .div5 {
      grid-area: 3 / 1 / 4 / 5;
    }
  </style>
</head>
<body>

</body>
</html>

接着添加對應的標籤：

<body>
  <div class="parent">
    <div class="div1">
      Header
    </div>
    <div class="div2">
      Left Sidebar
    </div>
    <div class="div3">
      Main Content
    </div>
    <div class="div4">
      Right Sidebar
    </div>
    <div class="div5">
      Footer
    </div>
  </div>

</body>

最後添加下面的CSS，它將爲.div1 - .div5添加一些背景色：

div:not(.parent) {
  padding: 10px;
  background-color: rgb(199, 199, 199);
}

運行：

這看起來很好，但你但願它佔據整個瀏覽器窗口。因此須要向.parent類添加height: 100vh：

.parent {
  display: grid;
  grid-template-columns: 200px 1fr 1fr 200px;
  grid-template-rows: 100px 1fr 50px;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  height: 100vh;
}

最終效果：

你們都說簡歷沒項目寫，我就幫你們找了一個項目，還附贈【搭建教程】。

我和阿里雲合做服務器，折扣價比較便宜：89/年，223/3年，比學生9.9每個月還便宜，買了搭建個項目，熟悉技術棧比較香（老用戶用家人帳號買就行了，我用我媽的)推薦買三年的划算點，點擊本條就能夠查看。