2018-02-21

CSS网格入门


介绍


CSS Grid是浏览器本身支持的新布局系统。与例如Bootstrap的网格系统相比,CSS网格不需要包含任何外部库,并且通过将CSS规则添加到父元素(网格容器)和子元素(网格物品)来应用。

CSS网格是一种二维网格布局系统,可以与列和行一起工作。与Flexboxes(主要是一维)相比,CSS Grid布局系统使您能够构建更复杂的布局。但是,可以将两者结合使用:Flexbox和CSS中的网格布局。

与引导式网格布局系统相比,仅在CSS中定义布局结构要简单得多。您不需要在您的标记代码中包含布局定义。这使得标记代码更容易阅读,并且您可以根据需要快速调整布局,而无需重新排列标记代码。

本教程将为您提供CSS网格布局系统的一般介绍。作为先决条件,您应该对HTML和CSS有基本的了解。

术语


在深入研究CSS网格布局系统的细节之前,让我们定义一些重要的术语。在下面你可以看到一个CSS网格的原理图概述:


网格容器


网格容器是网格布局系统的父元素。display: grid为了激活CSS网格布局模式,需要将CSS规则应用于此容器。

网格线


网格线是定义网格结构并将网格划分为单元格的线。网格中的行可以是垂直的(将网格分为列)或水平的(将网格划分为行)。

每个网格线都有一个唯一编号,从网格左侧的1开始/网格顶部。此行编号用于定义网格区域。稍后你会看到一个实际的例子。


网格单元格


网格单元是网格内的最小单元,并且是两个相邻列网格线和两个相邻的行网格线之间的区域。

网格区域


在网格内部,网格区域可以是由四条线围绕的任何区域。每个区域可以包含任意数量的单元格。

网格项目


父网格容器的任何直接子元素称为网格项。

浏览器支持


自2017年初以来,CSS Grid布局支持已经与所有主流浏览器(如Firebox,Chrome,Opera和Safari)一起发布。

该规范的IE / Edge版本前缀-ms前缀和在IE / Edge中实现的属性。这意味着默认的CSS属性名称如下所示:

grid-template-columns

需要在IE / Edge中更改为:

-ms-grid-columns

创建一个网格容器


制备


我们首先创建一个基本的Grid容器。为此,我们需要从一个基本的HTML结构开始,就像您在下面的列表中看到的那样:
<!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>CSS Grid - Demo 01</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
</div>
</body>
</html>

主体部分包含一个容器类被分配到的<div>元素。

显示


为了激活div部分的网格布局模式,我们需要按照以下方式(在styles.css中)将display属性应用于容器类:
.container {
display: grid;
}

定义网格列和行


网格模板列/网格模板行


下一步是定义网格列和行。这通过将CSS属性grid-template-columns和grid-template-rows添加到类容器的定义来完成:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
}

这里我们定义一个3x3网格,方法是将三个由自由空间分隔的值分配给网格模板列和网格模板行。

提供的值可以是网格中可用空间的长度,百分比或分数(如上例所示)。

让我们在网格中添加一些项目,以使布局可见:
<div class="container">
<div class="item item1">Loremuid optitiis!</div>
<div class="item item2">Lorducime placeat ex?</div>
<div class="item item3">Loremitecto m non natus vel.</div>
<div class="item item4">Lorem,sandaepit.</div>
<div class="item item5">Lorem ibus quidla in quia qui.</div>
<div class="item item6">Lornte maxicepam!</div>
</div>

此外,将以下CSS代码添加到styles.css中,以便为每个项目分配一个绿色背景颜色:
.item {
background: rgba(55, 143, 63, 0.603);
}

结果现在应该如下所示:



我们在我们的九格网格中添加了六个网格项目,因此只填充第一行和第二行单元格。第三行是空的。

栅格 - 列间隙/栅格 - 行间隙


定义了我们网格中的行数和列数后,我们还可以在单​​元格之间添加空隙。这可以通过将CSS属性grid-column-gap和grid-row-gap添加到网格包装类来完成:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-column-gap: 10px;
grid-row-gap: 10px;
}

也可以按照以下方式使用简写符号网格间隙:

grid-gap: <grid-row-gap> <grid-column-gap>;

现在结果应该改为:


对齐内容


沿着行轴与justify项目


通过将CSS属性justify-items添加到网格容器类,您可以沿着行轴对齐网格项内的内容。以下值可以分配给对齐项目:

  • 开始:对齐左侧

  • 结束:与右侧对齐

  • 中心:在中心对齐

  • 拉伸:拉伸内容以填充完整宽度(默认)


让我们尝试将justify-items设置为不同的值。首先让我们更改第一个网格项目的内容以仅包含文本“Test”:
<div class =“item item1”> Test </ div>

接下来,让我们添加
justify-items:center;

到容器类。浏览器中的输出更改为以下内容:



由于第一个栅格项不需要完整的宽度,因此您可以看到中心对齐的效果。

沿列轴与对齐项目


通过使用align-items CSS属性也可以沿列轴对齐。再次,下列值可用:

  • 开始:与顶部对齐

  • 结束:对齐底部

  • 中心:在中心对齐

  • 拉伸:拉伸内容以填充整个高度(默认)


让我们将以下内容应用于类容器的定义:
align-items: center;

输出现在应该更改为以下内容:



所有网格项目现在都在它们的单元格中垂直居中。

调整单项内容


您现在知道如何将网格内容与CSS属性align-items和justify-items 对齐。也可以在项目级别上做同样的事情。因此,我们需要应用CSS属性justify-self(沿着行轴对齐网格项内的内容)和align-sel f(沿着列轴对齐网格项内的内容)。

我们已经将单独的CSS类分配给我们的网格项目(item1  -  item6),因此很容易将必要的样式应用于对齐单个元素的内容。

让我们添加下面的CSS代码来记录styles.css以查看结果效果:
.item1 {
justify-self: end;
align-self: end;
}



第一个栅格项目的内容已移至第一个栅格单元格的右下角。

网格项目的位置


grid-column-start / grid-column-end / grid-row-start / grid-row-end


到目前为止,我们的例子表明,已定义的网格元素一个接一个地放入网格单元格中。每个网格项都放置在一个网格单元内。您可以通过使用CSS属性grid-column-start,grid-column-end,grid-row-start和grid-row-end来更改网格项的位置,并定义网格项应跨越多个网格单元格。

要使用这些属性指定位置,我们指的是特定的网格线。请记住,行自动从1开始编号(行列方向)。

假设我们想让网格项目4跨越第二行中的所有单元格:
.item4 {
grid-column-start: 1;
grid-column-end: 4;
}

这里我们定义网格项目4的空间(类别赋值为item4的div元素)应该从第4行开始。这是网格的最左边的垂直线。要跨越此行中的所有单元格,我们将grid-column-end设置为值4.第4行是网格右侧的行。结果应该如下所示:



还有一个简写符号,而不是书写
grid-column-start: 1;
grid-column-end: 4;

你也可以写:
grid-column: 1/4;

网格模板区域/网格区域


在网格内部,网格区域可以是由四条线围绕的任何区域。每个区域可以包含任意数量的单元格。为了描述一个网格区域,我们已经了解到可以使用CSS属性grid-column-start,grid-column-end,grid-row-start和grid-column-end。

然而,定义网格区域还有另一种可能性。通过应用属性grid-template-area,您可以通过为单元格分配名称来描述网格中的网格区域。稍后,可以将这些命名区域与应用于网格项级别的CSS属性网格区域一起使用。

我们来看一个实际的例子。我们只是想要为我们的应用程序定义以下布局:



再次使用我们的3x3网格,这将意味着这些单元格按照以下方式属于四个网格区域:



这里我们定义了以下网格区域的定义:


  • 侧边栏

  • 内容

  • 页脚


让我们看看我们如何可以轻松定义该结构的网格。我们首先创建一个新的HTML文件,其中包含页面正文部分的一个顶级div元素。此外,这个div包含四个子div元素,它们对应于布局的各个区域:标题,侧边栏,内容和页脚。
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Grid - Demo 02</title>
<link rel="stylesheet" href="styles2.css">
</head>
<body>
<div class="container">
<div class="item1">Header</div>
<div class="item2">Sidebar</div>
<div class="item3">Content</div>
<div class="item4">Footer</div>
</div>
</body>
</html>

网格模板区域/网格区域


我们使用grid-column-start,grid-column-end,grid-row-start和grid-column-end在属性级别上的属性来代替网格容器级别的属性grid-template-areas。采用以下方式:
.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr 3fr 3fr;
grid-template-rows: 1fr 10fr 1fr;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}

用于分配给网格模板区域提供商的值的语法是网格布局的可视表示。多次重复区域的名称(例如,第一行中区域名称标题的三倍)会导致此网格区域跨越第一行中的所有三个网格单元格。

然后,可以将用于定义布局的网格区域名称与网格项目级别上的属性网格区域一起使用,例如。
.item1 {
grid-area: header;
}

这使项目跨越定义的标题区域(第一行中的所有三个单元格)。

下面是可以看到完成布局所需的完整CSS代码:
body {
padding: 0px;
margin: 0px;
}

.container {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr 3fr 3fr;
grid-template-rows: 1fr 10fr 1fr;
grid-template-areas:
"header header header"
"sidebar content content"
"footer footer footer";
}

.item1 {
grid-area: header;
background: #86B6E9;
}

.item2 {
grid-area: sidebar;
background: #DDE986;
}

.item3 {
grid-area: content;
background: #B8E986;
}

.item4 {
grid-area: footer;
background: #E9C886;
}

浏览器中的结果现在应该如下所示:

2 条评论:

谢谢您的留言^_^

Ubuntu SSR setting

使用electron-ssr客户端 https://github.com/shadowsocksrr/electron-ssr 设置proxy