应煜鑫的官方网站

# CSS Grid 夜空中最亮的星

CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items).

CSS Grid 布局是CSS中最强大的布局系统。它是一个二维系统，这意味着它可以处理列和行，而flexbox基本上是一个一维系统。通过将CSS规则应用于父元素(成为网格容器)和子元素(成为网格项)，可以使用网格布局。

This article was originally ported over from Chris House’s guide, and has since been kept up to date by CSS-Tricks staff and paid writers.

这篇文章最初是从Chris House的指南中移植过来的，此后一直由CSS-Tricks的工作人员和付费作者保持更新。

Introduction (Grid 介绍)

CSS Grid Layout (aka “Grid”), is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces. CSS has always been used to lay out our web pages, but it’s never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox helped out, but it’s intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites.

CSS网格布局(又名“网格”)是一个基于网格的二维布局系统，它的目标是彻底改变我们设计基于网格的用户界面的方式。CSS一直被用来布局我们的网页，但它从来没有做得很好。首先，我们使用了表，然后是浮点数、定位和内联块，但是所有这些方法本质上都是修改过的，并且遗漏了很多重要的功能(例如垂直居中)。Flexbox帮助解决了这个问题，但它的目标是更简单的一维布局，而不是复杂的二维布局(Flexbox和网格实际上可以很好地协同工作)。Grid是第一个专门为解决布局问题而创建的CSS模块，自从我们创建网站以来，我们就一直在摸索着解决布局问题。

There are two primary things that inspired me to create this guide. The first is Rachel Andrew’s awesome book Get Ready for CSS Grid Layout. It’s a thorough, clear introduction to Grid and is the basis of this entire article. I highly encourage you to buy it and read it. My other big inspiration is Chris Coyier’s A Complete Guide to Flexbox, which has been my go-to resource for everything flexbox. It’s helped a ton of people, evident by the fact that it’s the top result when you Google “flexbox.” You’ll notice many similarities between his post and mine, because why not steal from the best?

My intention with this guide is to present the Grid concepts as they exist in the very latest version of the specification. So I won’t be covering the out of date IE syntax, and I’ll do my best to update this guide regularly as the spec matures.

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>