几周前，我举办了一个有关于CSS Grid Layout的研讨会。我和大多数人一样，对这个话题也很陌生，我在准备PPT和DEMO的时候学到了很多东西。我决定和大家一起分享一些我觉得其中特别感兴趣的东西。希望大家对这些也会感兴趣。

在CSS Grid Layout中，如果没有人提出display:contents;来解决一部分问题，那么你就无法深入的讨论CSS Grid Layout中的subgrid，那么我们真的需要subgrid？事实并非如此，display:contents的确帮我们解决了这类问题，但这些问题与subgrid帮助我们解决的问题不同。在这篇文章中，我将用实例来介绍他们的不同之处。

网格布局最终使我们能够在CSS中定义网格，并将项目放置到网格单元格中。这本身就很好，但事实上我们也不必指定每个网格轨道，也不必手动拖动每一个网格项目。网格足够灵活，可以适应它们的网格项目。这些都由所谓的显式和隐式网格来处理的。

这篇文章介绍了Firefox DevTools的一些鲜为人知的特性，这些特性可以在你构建和调试新的CSS网格布局时派上用场。你可能在今年听过不少有关于CSS特性的讨论。如果你在同一个句子中听到CSS和网格这两个词，那么我强烈建议你去看看CSS Grid的这个CSS模块。浏览器以CSS盒模型的方式呈现HTML元素，而CSS Grid则是一种新的布局模式，它为开发者提供了控制这些盒子及其内容大小和位置的能力。该模块引入了一系列属性，允许我们创建网格结构，并使用CSS控制网格项的位置和大小。

在《Sass绘制多边形》和《使用Sass制作菱形网格布局》文章中，我们了解了怎么通过Sass来实现多边形和菱形相关的网格布局，但这些在实际的布局中使用场景并不常见。最近@vmcreative的Hexi Flexi Grid让我感到CSS Grid布局更强大的一面。而这种布局在实际的布局也可以一用。今天把这个仓库中的功能集成了SassMagic中。那么简单的花点时间来看看Hexi Flexi Grid布局。

就目前为止，CSS的Grid和Flexbox结合将是解决布局的最佳方案。虽然浏览器对CSS Grid和Flexbox的属性未完全支持，但对于实现布局而言，这已是一种非常完美的结合。如果CSS Box Alignment Module Level3能得到更好的支持的话，那么对于Web的布局将是一种福音。就前面学习的CSS Grid和CSS Flexbox，我们对CSS的Flexbox和Grid有了很深入的了解。特别是在《使用CSS Grid和Flexbox制作Card》一文中，已经见识到了CSS Grid和Flexbox结合对布局的巨大优势。那么这篇文章，将再一次向大家展现CSS Grid和Flexbox的强大之处。那是因为他们的结合将解决布局的实际问题。

深入挖掘 CSS Grid 布局规范，发掘一些你可能不知道的特性，并探索即将到来的特性。CSS Grid 布局于 2017 年 3 月 开始被浏览器所支持，在撰写本文时，大多数网站有超过百分之70的访问者有 CSS Grid 特性支持。 这个数据还在快速增长中， 并且在 Edge 浏览器发布更新支持后继续改善。我希望你之前已经有时间去探索过 CSS Grid 布局的一些特性了。 这篇文章将带你探索一些你可能不知道的特性。 并且了解一下未来阶段中可能实现的规范。

之前，我们讲了宽高比盒子，谈到一个技巧，就是运用填充来随心所欲地调整一个元素的长宽比例。这个技巧并不是经常能用到的，因为修整一个元素的高度是自找麻烦，但也不是没有这种情况出现。要降低这一风险，有一种方法，那就是伪元素(Psuedo Element)策略，让伪元素顶住其上一层元素，撑起纵横比。但是如果元素里的内容将元素顶得更高，那元素也会变得更高，纵横比就完蛋了。

2017年3月，CSS Grid在几个星期内就被发送到Chrome、Firefox和Safari的生产版本中。很高兴，大家可以使用它来解决实际问题。CSS Grid是一种不同的布局方式，在大家开始使用规范的时候，有很多常见的问题。这篇文章的目的是回答其中的一些问题，并且将会是Smashing Magazine中有关于CSS Grid一系列文章中的一篇。

去年，我做了一个研讨会之后收集了一些关于CSS Grid布局有趣的东西。今天年，我在另一个工作室工作，我学到了一些更令人兴奋的事情，那就是我们都喜欢布局规范。当然，我不会把这些有趣的东西独享。我很高兴能和大家一起分享这些有趣的东西。