使用 CSS Grid Generator來快速使用及學習 Grid 佈局

時間 2019-11-08

標籤使用 css grid generator 快速學習佈局欄目 CSS 简体版

原文原文鏈接

阿里雲最近在作活動，低至2折，有興趣能夠看看：promotion.aliyun.com/ntms/yunpar…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 以前留出一些空白，因此還同時使用行間距。ide

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

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

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;
}
複製代碼

最終效果：