摘要：我们将使用检查器来检查列关键不同在于这种方式先定义了列即布局。这种方式迫使我们将分割成多少列。而使用则不会面临这种限制。我相信将会是时代，它会有一个突破，并成为前端开发者的必备技能。
简评：近些年 CSS Flexbox
在前端开发者中变得非常流行。其实并不奇怪，它能让我们更容易创建出动态布局，以及在容器中对其内容。然而城里新来了个小伙叫 CSS
Grid，它有许多弹性盒的能力，有时候比弹性盒好用，有时候却不好用。作者点评了弹性盒、网格两者之间的差异，以及什么时候用哪种比较好。
先来看下这节课的截屏预告：
一维 VS 二维
如果你想从这篇文章中学到精髓，下面的就是：
Flexbox 是为一维布局设计的，而 Grid 是为二维布局设计。
这意味着如果你想要在一个方向上放置项目（比如在标题栏中有三个按钮），那么你应该用Flexbox：
它会比 CSS Grid 更加灵活，同时只需要更少的代码，更容易维护。
然而，当你需要在两个维度 —— 行和列上创建整个布局时，那么你应该使用 CSS Grid：
这种情况下， CSS Grid 会更加灵活，让你的标记更加简单。代码也更容易维护。
当然你可以结合两者使用。上面的例子中将会完美地使用 Grid 做页面布局，用 Flexbox 来对齐标题栏中的内容。在文末，我会确切地展示如何做到这点。
内容优先 VS 布局优先
另一个核心区别在于：Flexbox 以内容为基础，而 Grid 以布局为基础。这看起来有点抽象，所以让我们来看看确切地例子，这会更容易理解。
我们会使用之前的 header， HTML 代码如下：
在我们进入 Flexbox 布局之前，这些 div 是相互叠在一起的：
Flexbox header
然而，当我们给一个 display: flex 样式时，这些元素就会排成一行。
header {
display: flex;
}
为了将登出按钮移动到最右边，我们只需要找到那个元素，然后给一个外边距：
header > div:nth-child(3) {
margin-left: auto;
}
结果如下：
这里我希望你们注意一下：我们让这些元素自己决定它们该如何放置。除了最初的 display: flex; 我们不需要预定义任何东西。
这是 Flexbox 和 Grid 的核心差异，当我们用 Grid 重新创建 header 时，这点会更明显。
即便 CSS Grid 不是用来创建一维的 header，它在这篇文章中仍然是一个很好的练习，让我们明白 Flexbox 和 Grid的核心差异。
Grid header
使用 CSS Grid，我们可以有好几种方式来创建 header。我将使用相当直接的一种，我们的网格有 10 列，每列宽度为 1 个单元：
header {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
和 Flexbox 的方案看起来完全一样。
但是，我们可以看看底下有哪些不同。我们将使用 Chrome 检查器来检查列：
关键不同在于这种方式先定义了列 —— 即布局。我们先定义了列的宽度，然后把内容放到可用的网格里。
这种方式迫使我们将 header 分割成多少列。
除非我们改变网格，我们被 10 列网格限制了。而使用 Flexbox 则不会面临这种限制。
为了将登出按钮放到最右边，我们需要把它放在第 10 列：
header > div:nth-child(3) {
grid-column: 10;
}
检查网格时看起来是这样：
我们不能简单地给一个 margin-left: auto; 因为登出按钮已经被放在布局中的确切的格子中，在第三列。为了移动它，我们要找到另一个格子。
结合两者
现在看下如何将两者结合起来，将我们的 header 合并到我们的网站布局。我们从构建网站布局开始：
HTML 标记：
HEADER CONTENT
CSS ：
.container {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
}
项目样式：
header {
grid-column: span 12;
}
aside {
grid-column: span 2;
}
main {
grid-column: span 10;
}
footer {
grid-column: span 12;
}
现在添加 header。我们把 header —— CSS Grid 中的一个项目转换为 Flexbox 容器。
header {
display: flex;
}
现在可以把登出按钮设置到右边了：
header > div:nth-child(3) {
margin-left: auto;
}
现在两个容器看起来是这样的：
现在你应该深刻地理解了 Flexbox 和 Grid 的不同之处，并且知道如何使用它们了。
浏览器支持
最后，我想提一下浏览器支持。在写这篇文章时，全球网站流量的 77% 支持 CSS Grid，并且还在增加。我相信 2018 将会是 CSS Grid 时代，它会有一个突破，并成为前端开发者的必备技能。就像前几年的 CSS Flexbox 那样。源代码链接
原文链接：The ultimate CSS battle: Grid vs Flexbox
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112947.html
摘要：网格单元格网格单元格是指四条网格线之间的空间。所以它是最小的单位，就像表格中的单元格。图中突出显示的网格区域是行线和列线之间的区域，其主要包括了四个网格单元格。 CSS Grid现在已经被W3C纳入到CSS3的一个布局模块当中，被称为CSS Grid Layout Module。而我们较为熟悉的还是将其想像成网格或者栅格，也就是早期的960gs。不管是网格还是栅格或者现在的CSS Gr...
摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。 注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...
摘要：你可以用网格这样做这样的显示效果是没什么错误的，当使用网格，重新定义列数非常简单。绝对定位当我们绝对定位一个网格元素的时候，这个元素会跑到它的容器中，我们可以用和来定位它。最简单的命名约定使用网格自动编号。 注：此文是我翻译的第一篇技术文章。适合有一定CSS原生网格布局使用经验的开发者（读前需要先去了解一下原生CSS网格的语法），原生CSS网格布局（Native CSS grid）截止...
阅读 1315·2023-04-25 18:34
阅读 3406·2021-11-19 09:40
阅读 2804·2021-11-17 09:33
阅读 2919·2021-11-12 10:36
阅读 2801·2021-09-26 09:55
阅读 2634·2021-08-05 10:03
阅读 2493·2019-08-30 15:54
阅读 2846·2019-08-30 15:54
