使用 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;
}
复制代码

最终效果：