微信号:gh_bd8d6a989787

介绍:介绍各种前端技巧,帮助提高前端开发的速度,逐渐做到分分钟完成开发.

CSS Grid入门

2017-03-23 08:18 web前端程序员

Python部落(python.freelycode.com)组织翻译,禁止转载,欢迎转发。

这周对前端开发者来说是惊人的一周,因为不带功能标志的CSS Grid在最新版的Firefox和Chrome闪亮登场。没错:我们现在可以在最流行的两大浏览器上玩转CSS Grid。

但是为什么CSS Grid是个大问题,我们还要关注它呢?

因为CSS Grid是网页的第一个真正的布局系统。它的目的是将内容组织称行列的形式,最终使开发人员能高度控制我们眼前的屏幕。这意味着我们终于可以挖掘在网页上设置元素的奥秘——现在复杂的布局和精美的排版不仅仅是可能的,还是简单且易于维护的。

使用CSS Grid,网页可以美丽的超乎我们的想象。

那么Grid是如何工作的?有很多的复杂的教程,把人带入一个个可怕的细节,但是我认为我们应该从最基础的开始。下面我们会实现一个比较简单的样例,在一个页面上放置一串字母。

开始前先添加我们的标签:

首先,我们设置这些字母的字体和颜色,然后,用诸如align-itemsjustify-content之类的flexbox属性让它们居中。CSS Grid没有替换flexbox属性,尽可能保留了它们的功能。我们甚至可以将这些属性与CSS Grid结合。但是现在先让我们回到这个demo:

在这个demo中,我吗有两个简单的divs在另一个div上面,因为它们默认是display:block。接下来我们用Grid layout设置父类元素:

将会如下显示:

现在你可能看到似乎没什么变化。你是对的,不像设置display:inline-block;或者display:inline;,当我们把布局设为Grid是不会发生很明显的变化。事实上,想让我们的grid真正发生些变化,需要先给它设置一个确切的行数和列数。在这个domo中,我们可以让两个字母并排排列:

让我们拆解一下上面的代码。首先我们用grid-template-columns创建了一个两列的grid,1fr可能看起来比较奇怪,如果你以前没有见过它,但它是一个有效的CSS单元,让每一列成为我们grid的一部分。在这个例子中,意味着让两列等宽。

完成后效果如下:

太好了!它起作用了。但是看到两列之间的黑线了吗?这是wrapper勾勒的每个字母div的背景,因为我们将grid-column-gap设置为了1px。通常,我们会设置更大的距离,尤其是对于两个相邻的文本框来说。但在本例中,1像素就足够了。

如果我们再添加两个新字母会怎样呢?我们该如何改变布局呢?

Well,这并没有改变grid——我们已经告诉grid有两列,所以这两个字母的div直接被放在了它们下面,并且正好是1fr宽:

现在这里有个奇怪的地方:为什么AC和BD间没有1像素的边框?因为grid-column-gap只用于列,我们刚才做的是在grid中增加了一个新的行。我们必须使用grid-row-gap才能看到想要的效果:

这是效果:

我们创建了我们的第一个grid。我们创建了一行一列,我们真正要做的是改变我们的markup。但是让我们更多地探索一下列。如果给grid-template-columns属性添加另一个值会发生什么呢?像这样:

对,我们会添加新的一列。注意我们现在可以清晰地看见wrapper的背景,因为没有任何子元素填充那片空间:

如果我们改变属性的fr,那么将会创建一个所谓的非对称网格。假如我们想要网格的第一列是其他两列的三倍:

这会使A和D两列的宽度大于其他两列,正如我们期望的那样:

是不是很强大?我们不再需要担心负边距或者网格列的完美百分比。我们可以轻松地做很复杂的grid,而不用像过去一样被迫使用数学方法。现在我们只需要给grid-template-columns属性添加一个新的值,一个网格列就奇迹般地出现了。

你可能会问,那么响应式网格如何实现呢?这也和我们在media query中改变一个属性一样简单。比如我们默认想要2列,如果500px我们想要3列,最终更大的屏幕上,我们要4列。只需要如下编写:

确保在一个新的标签页打开这个demo(http://codepen.io/robinrendle/pen/Npjzyz?editors=1100),改变窗口尺寸,看看神奇的响应式。

grid-template-columns属性比我们展示的要更复杂,但是这是很好的一个起点。下面我们会学习CSS Grid中真正的革命性意义的属性:grid-template-rows

看下面的一小段代码,结合我们的已知知识,弄清楚这个新属性能做什么:

我们现在设置行高和它们之间的关系,而不是列宽及其关系。如果我们有像前面demo的两行并且最后一个单元设置为3fr,这意味着第二行高回事第一行的3倍:

这可能看起来很简单,以前我们从没真正做到过这一点。我们总是不得不在一个特定元素上设置最小高度或者改变类名。我们以前从没以现在这样的方式创建过行之间的关系,这就是CSS Grid强大的地方。

有了这些小知识和一些新属性,我们可以创建非常复杂的布局——不对称网格和响应网格只是冰山一角。到目前为止,只是对CSS Grid的初探,还有很多未知。但是我觉得Jen Simmons在写Grid的时候描述的最好:

我们要一直探索CSS Grid,直到搞清楚它想做的是什么,它能勉强做什么和它不能做什么。设计师可能永远不会学CSS的代码,但是要能足够了解CSS,才能更好地理解我们的艺术媒介(artistic medium)。

当然,上面的代码初次看会有些奇怪。但是它能传达的意思是:我们不再需要使用臃肿的CSS框架,也不用管一大堆繁琐的布局。但是Grid真正让我兴奋的地方在于,它让我们以一种全新的方式看浏览器内部的空间。

我们不仅需要学习一大堆新舒心,还要重新思考我们过去做学的东西。所以CSS Grid不仅仅是一个规范,它本身一个奇怪的哲学。

让我们一起来探索吧!

英文原文:https://css-tricks.com/getting-started-css-grid/#more-252690
译者:刘开心


 
web前端程序员 更多文章 Python部落招聘前端实习生 JavaScript中数组的迭代方法 CSS选择器:属性选择器 六个漂亮的ES6技巧 2017年要学习的3个CSS新特性
猜您喜欢 IaaS中的统一存储:从设计到实现 2016年9月13日,今日全球能源资讯(油价涨) PHP 之父:PHP7 性能翻倍关键大揭露 API 调用次数限制实现 推荐两个技术公众号