5分钟极速上手 CSS Grid5分钟极速上手 CSS Grid作者：jensimmons 原文：http://jens

5分钟极速上手 CSS Grid

最值钱的是作者写的小练习，试一试，轻松上手 CSS Grid 布局。深入了解可以看看：

---------------------------------------------------------------------------------------------------------------------------

不少人开始对 CSS Grid 感兴趣并准备学习它。但许多人又忙的不行。我教你一点 CSS Grid 的基础知识，让你能5分钟就上手。

和我们以前使用的 Bootstrap 或其它布局框架不同，CSS Grid 不会应用在页面的所有元素上。

将一个指定的元素定义为 Grid。这个元素的所有子元素就会被放到 Grid 中。而页面中其它元素不会受到影响。

快想想把什么设置成 Grid 容器 (container) ，怎么布局 HTML 文档好让一些元素成为容器中的项目 (item) 吧。

举个栗子：

<ul class = "grid-container">
  <li>grid item</li>
  <li>grid item</li>
  <li>grid item</li>
</ul>

然后定义一个 Grid 容器，在这个例子中是<ul>

.grid-container {
    display: grid;
    grid-template-columns:1fr 1fr 1fr 1fr;
}

有很多、非常多、特别多的办法定义一个 Grid，上面是最基础的。它会创建4个一样宽的列——空白空间的1/4。

动手写写 CSS 就明白了。为了方便，我已经准备好了你需要的东西：

试一试。在列表中添加更多的 1fr看看有什么效果。把其中一个1fr改成2fr看看有什么效果。添加grid-gap: 1rem在每一列之间加入 1rem 的空白。

哒哒！你已经在用 CSS Grid 了。

体验之后开始更多的尝试吧。答案在 JavaScript 面板中。复制粘贴看效果。