css 弹框 带滚动条_CSS网格（CSS Grid）布局入门

• 原文地址：Getting to know CSS Grid Layout
• 原文作者：Chris Wright
• 译者：华翔
• 校对者：珂珂、干干

CSS网格布局是浏览器Flexbox布局之后最重要的布局方式。我们可以忘记过去15年经常使用的的各种“神奇数字”，hacks和一系列变通布局方案。网格布局提供了非常简单的声明布局方式，之后再也不需要借助一些常见的主流css框架，也能减少很多手动实现的布局方式

如果你以前不熟悉CSS网格布局，那么你可以开始了解它了。它是一种适用于容器元素，并能指定子元素的间距、大小和对齐方式的布局工具。

CSS网格布局赋予我们更强大的能力——大家熟悉的水平垂直居中布局，不需要增加标签就能做到。同样，这也能让我们不需要媒体查询就能根据可用空间自动适应。

学习的最低要求

首先网格布局有不少新语法需要学习，但是你只需要稍微看下就能上手。本文将会用示例带你学习CSS网格布局各种各样重要的入门概念。

浏览器兼容性

CSS网格布局从Safari 10.1, Firefox 52, Opera 44, Chrome 57开始受到支持，微软Edge在Edge 15会更新对网格布局的支持。

微软的浏览器（IE10–11和Edge 13-14）有一种比较旧的实现，所以有不少限制，我们会简单介绍新的实现方式和老的实现方式之间的区别，这样你能知道如何规避他们。

对于大多数布局，我们会使用下面的query特性来让老的浏览器对他们理解的特性也能工作：

@supports (display: grid) {
    
    .grid {
    
        display: grid;
    }
}

不支持浏览器@supports或网格的浏览器将不会生效。

为了能正确展示文中的示例，你需要使用支持网格布局的浏览器。

创建带有间距（gutter）的两列（column）网格

为了演示CSS网格布局如何定义列，我们从下面的布局开始：

[使用grid-template-columns 和 grid-gap创建带间距的两列布局]

为了创建上述网格布局，我们需要使用grid-template-columns和grid-gap。 grid-template-columns表示网格中的列是如何布局的，它的值是一连串以空格分割的的值，这些值标识每列的大小，值的个数表示列的数目。

例如，四列250px宽度的网格布局可以这样表示：

grid-template-columns: 250px 250px 250px 250px;

也可以使用repeat关键字表示：

grid-template-columns: repeat(4, 250px);

定义间距

grid-gap定义了网格布局的间距大小，接收一个或两个值，如果定义两个值则表示列（column）和行（row）的间距大小。

在两列布局示例中，我们可以如下使用：

.gri