5分钟教你学会 CSS Grid 合理布局

这是1篇迅速详细介绍网站将来合理布局的文章内容。

Grid 合理布局是网站制作的基本，CSS Grid 是建立网格合理布局最强劲和最简易的专用工具。

CSS Grid 2020年也得到了流行访问器（Safari，Chrome，Firefox，Edge）的原生态适用，因此我坚信全部的前端开发开发设计人员都务必在没多久的未来学习培训这项技术性。

在本文中，我将尽量迅速地详细介绍CSS网格的基础专业知识。我会把你不可该关注的1切都忽视掉了，只是以便让你掌握最基本的专业知识。

你的第1个 Grid 合理布局

CSS Grid 合理布局由两个关键构成一部分是 wrapper （父元素）和 items （子元素）。 wrapper 是具体的 grid(网格)，items 是 grid(网格) 内的內容。

下面是1个 wrapper 元素，內部包括6个 items ：

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

要把 wrapper 元素变为1个 grid(网格)，要是简易地把其 display 特性设定为 grid 便可：

.wrapper {
    display: grid;
}

可是，这都还没做任何事儿，由于大家沒有界定大家期待的 grid(网格) 是如何的。它会简易地将6个 div 层叠在1起。

我早已加上了1些款式，可是这与 CSS Grid 沒有任何关联。

Columns(列) 和 rows(行)

以便使其变成2维的网格器皿，大家必须界定列和行。让大家建立3列和2行。大家将应用 grid-template-row 和 grid-template-column 特性。

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}

正如你所看到的，大家为 grid-template-columns 写入了 3 个值，这样大家就会获得 3 列。 大家要想获得 2 行，因而大家为 grid-template-rows 特定了2个值。

这些值决策了大家期待大家的列有多宽（ 100px ），和大家期待行数是多高（ 50px ）。 結果以下：

以便保证你能正确了解这些值与网分外观之间的关联，请看1下这个事例。

.wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
}

请尝试了解上面的编码，思索1下以上编码会造成如何的合理布局。

这是上面编码的合理布局的結果：

十分好了解，应用起来也十分简易是否？下面大家来加大1点难度。

置放 items(子元素)

接下来你必须学习培训的是怎样在 grid(网格) 上置放 items(子元素) 。非常留意，这里才是反映 Grid 合理布局超工作能力的地区，由于它使得建立合理布局变得十分简易。

大家应用与以前同样的 HTML 标识，以便协助大家更好的了解，大家在每一个 items(子元素) 再加了独立的 class ：

<div class="wrapper">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

如今，大家来建立1个 3×3 的 grid(网格)：

.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
}

将获得下列合理布局：

不知道道你发现沒有，大家只在网页页面上看到 3×2 的 grid(网格)，而大家界定的是 3×3 的 grid(网格)。这是由于大家仅有 6 个 items(子元素) 来铺满这个网格。假如大家再加3个 items(子元素)，那末最终1行也会被铺满。

要精准定位和调剂 items(子元素) 尺寸，大家将应用 grid-column 和 grid-row 特性来设定：

.item1 {
    grid-column-start: 1;
    grid-column-end: 4;
}

大家在这里要做的是，大家期待 item1 占有从第1条网格线刚开始，到第4条网格线完毕。换句话说，它将单独占有整行。 下列是在显示屏上显示信息的內容：

假如你不搞清楚大家设定的仅有 3 列，为何有4条网格线呢？看看下面这个图象，我画了黑色的列网格线：

请留意，大家如今正在应用网格中的全部行。当大家把第1个 items(子元素) 占有全部第1行时，它把剩余的 items(子元素) 都推到了下1行。

最终，给你1个更简易的缩写方式来撰写上面的英语的语法：

.item1 {
    grid-column: 1 / 4;
}

以便保证你早已正确了解了这个定义，大家再次排序别的的 items(子元素) 。

.item1 {
    grid-column-start: 1;
    grid-column-end: 3;
}
.item3 {
    grid-row-start: 2;
    grid-row-end: 4;
}
.item4 {
    grid-column-start: 2;
    grid-column-end: 4;
}

你能够尝试在你的头脑里过1旁边面编码的合理布局实际效果，应当不容易很难。

下列是网页页面上的合理布局实际效果：

Grid 合理布局便是这么简易，自然这里展现的是最简易的 Grid 合理布局定义，也有许多定义在这里没讲。假如您有任何难题，欢迎评价，我会尽我所能回应。后续还会有更多有关 Grid 合理布局定义详细介绍的文章内容，敬请关心。

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。