css 网格布局_CSS网格布局三年

css 网格布局

As I was updating my slides for An Event Apart in San Francisco, I realised how much complexity I was removing from the talk that I gave in May this year. I was able to remove this complexity based on changes to the specification itself, and it made me think about the journey this specification has been on. In my self-appointed role as CSS Grid cheerleader, I’ve been along for the ride and this post is a little look back at my three years with the Grid. It shouldn’t be taken as a true history of the specification – there are others better placed to explain that – more the assorted thoughts of an interested observer to the process.

在更新旧金山“一个活动”的幻灯片时，我意识到我从今年5月的演讲中消除了多少复杂性。 我能够基于对规范本身的更改来消除这种复杂性，这使我思考了此规范的发展历程。 在我自封为CSS Grid啦啦队长的过程中，我一直努力工作，这篇文章让我回顾了我在Grid的三年时光。 它不应该被视为规范的真实历史-还有其他更好的解释方式-更多的是对此过程感兴趣的观察者的各种想法。

好吧，看看这个！ (Well, look at this!)

In May 2012 I spoke at Sud Web in Toulouse, one of three English speakers at the event. Trying to follow along with the French talks, I found myself in a workshop with Bert Bos, where he described a number of new layout methods in French, thankfully also with demonstration code.

2012年5月，我在图卢兹的Sud Web上发表了演讲，他是活动的三位讲英语的人之一。 试图跟上法国的谈话，我发现自己和Bert Bos在一个研讨会上，在那里他用法语描述了许多新的布局方法，还很高兴地用了演示代码。

One of the modules he spoke about was CSS Grid Layout. Even in French, even without a browser in which this new layout method was implemented, I had seen something I wanted to explore further. On the way home I made some examples of how I thought this layout method worked and was excited about the possibilities.

他谈到的模块之一是CSS Grid Layout。 即使是法语，甚至没有使用实现此新布局方法的浏览器，我也看到了一些我想进一步探索的东西。 在回家的路上，我举了一些例子，说明了我认为这种布局方法是如何工作的，并对这种可能性感到兴奋。

网格布局规范从何而来？ (Where did the Grid Layout specification come from?)

The ‘modern’ CSS Grid Layout specification began as a first public working draft published on 7 April 2011. The majority of the editors of that draft were from Microsoft, and Internet Explorer 10 shipped with a -ms prefixed implementation. That implementation is the implementation of Grid that you will find in Internet Explorer 11 and also, at the time of writing, in the Edge browser. It is why, if you look at Can I Use, you will see that Internet Explorer is the only browser showing support for Grid Layout.

“现代” CSS网格布局规范始于2011年4月7日发布的第一份公共工作草案 。 该草案的大多数编辑来自Microsoft，并且Internet Explorer 10附带了带有-ms前缀的实现。 该实现是在Internet Explorer 11中以及在撰写本文时在Edge浏览器中可以找到的Grid的实现。 因此，如果查看“我可以使用” ，您将看到Internet Explorer是唯一显示对网格布局的支持的浏览器。

This draft is not the first time the ideas around Grid had been mooted by the CSS Working Group. As far back as 1996 you could read about Frame-based layout via stylesheets, in 2005 these ideas were revived as CSS3 Advanced Layout Module which became the CSS Template Layout Module. These are not new ideas, however it was not until the IE10 implementation that we as web developers had something to play with.

该草案不是CSS工作组第一次提出有关Grid的想法。 早在1996年，您就可以通过样式表了解有关基于框架的布局的信息 ，在2005年，这些想法又被重新命名为CSS3 Advanced Layout Module ，成为CSS模板布局模块 。 这些不是新主意，但是直到作为Web开发人员的IE10实施才可以发挥作用。

IE10中的网格 (Grid in IE10)

Once I discovered that there was an implementation of Grid in IE10 I started building some simple examples. As an old person, who cut her web developing teeth back when front-end development meant chopping up images and placing the with nested tables, Grid made conceptual sense to me.

一旦发现IE10中实现了Grid的实现，我便开始构建一些简单的示例。 作为一个老人，当前端开发意味着切碎图像并放置带有嵌套表格的表格时，她削减了网络显影的牙齿，Grid对我来说具有概念上的意义。

At the end of 2012 I wrote an article for 24 Ways describing how Grid Layout worked, demonstrating a fluid 16 column grid. In that article I noted that to create this kind of Grid we needed to add classes to describe the grid to our markup. A way around this would be to use LESS or Sass to do the calculations in the CSS. What this meant was that this initial Grid specification fell at the same hurdle as our existing layout methods. As with the grid system used in Bootstrap and other frameworks, we were describing our layout in the markup (or in the pre-processor code). This works however it makes adding additional breakpoints, or otherwise redesigning the layout hard. There is a limit to how many breakpoints we can stuff into our markup.

2012年底， 我写了一篇24种方法的文章，描述了Grid Layout的工作方式，并演示了一个流畅的16列网格。 在那篇文章中，我指出了要创建这种Grid，我们需要添加一些类来描述我们的标记中的网格。 一种解决方法是使用LESS或Sass在CSS中进行计算。 这意味着该最初的Grid规范与我们现有的布局方法存在相同的障碍。 与在Bootstrap和其他框架中使用的网格系统一样，我们在标记（或预处理程序代码）中描述了布局。 但是，这样做可以使添加更多的断点，或者难以重新设计布局。 我们可以在标记中填充多少个断点是有限制的。

网格继续前进 (Grid moves on)

I followed the development of Grid and began writing and speaking about the specification. I would get a queue of people after each talk wanting to comment on the specification, express excitement and sometimes dismay about what was and wasn’t included.

我跟随Grid的发展，开始撰写和谈论该规范。 每次演讲后，我都会排起长队，想对规范进行评论，表示激动，有时对其中包含的内容和不包含的内容感到沮丧。

I’m good at playing with things in browsers but find it harder to visualise how something without an implementation might work. However I created examples of how I thought the changes to the specification would work, and continued to write and talk about it. In April and May 2013 I wrote about the named grid lines and areas that were part of the updated specification. In this article I started to think about the issue of “gutters” for grid. This was based on feedback from people who had seen my presentation in which I mentioned Grid alongside other layout modules. The “gutter problem” came up over and over again in those post-talk conversations.

我擅长在浏览器中玩游戏，但是发现在没有实现的情况下很难可视化某些东西。 但是，我创建了一些示例，说明了我如何认为对规范的更改将起作用，并继续编写和讨论该规范。 在2013年4月和2013年5月，我写了关于命名网格线和区域的内容 ，它们是更新的规范的一部分。 在本文中，我开始考虑网格的“装订线”问题。 这是基于看过我的演示文稿的人的反馈，其中我提到了Grid和其他布局模块。 在谈话后的谈话中，“天沟问题”一遍又一遍地出现。

网格出现在Blink和Webkit中 (Grid appears in Blink and Webkit)

I didn’t have to wait too long to see the changes to the spec implemented. Bloomberg sponsored the implementation of Grid into Blink and Webkit, work that is being done by open source consultancy Igalia since mid-2013. The work in Blink can be found unprefixed but behind the Experimental Web Platform Features flag. What this meant was that I could get my hands on the updated implementation and begin creating examples using it.

我不必等待太久就能看到对规范的更改。 彭博社赞助了将网格导入Blink和Webkit的实施，自2013年中以来，开源咨询公司Igalia一直在进行这项工作。 可以发现Blink中的工作没有前缀，但位于“实验性Web平台功能”标志的后面。 这意味着我可以开始使用更新的实现，并开始使用它来创建示例。

Having an implementation made it far easier for me to experiment and also to show real examples to people when talking about Grid. In September 2014 I collated all of my examples into a website gridbyexample.com, and was becoming used to teaching Grid, adding examples to my CSS Layout Workshop. Teaching something is an excellent way to find the weak spots. I find this with our own product Perch. When I create a tutorial I often find the places where we are doing something in a clunky way, or where our documentation is poor. By trying to explain the concept to someone else, suboptimal things are quickly reflected.

有了实现，我在进行Grid讨论时可以轻松地进行实验，并向人们展示真实的示例。 2014年9月，我将所有示例都整理到了一个网站gridbyexample.com中 ，并开始习惯于教授Grid，并在CSS Layout Workshop中添加了示例。 教点东西是发现薄弱环节的绝妙方法。 我用我们自己的产品Perch找到了。 当我创建一个教程时，我经常会发现一些笨拙的地方，或者我们的文档很差的地方。 通过尝试向他人解释该概念，次优事物会很快得到体现。

不再在标记中描述布局 (No more describing layout in markup)

One of the most exciting elements of the updated specification was the ability to fully describe a layout in CSS. I’d not been able to develop a grid system using the IE10 implementation that did not rely on some description of the layout in markup. However this became straightforward with the new draft and the implementation in Blink – you can see the Grid used in my 24 Ways article rebuilt with the specification at this stage here and also some newer examples recreating the Skeleton Grid.

更新的规范中最令人兴奋的元素之一是能够完全描述CSS中的布局。 我无法使用不依赖于标记中布局的某些描述的IE10实现来开发网格系统。 然而，这成了新的草案，并在眨眼实施简单-你可以看到网格在我的24种方法用于重建与规范在这个阶段在这里还重现一些较新的例子骨架网 。

When teaching people about Grid this point really interested people. However I also learned that describing layout in markup was now so prevalent that people found it hard to grasp the concepts of Grid Layout. People showed me examples where they had quite literally translated the grid system from Bootstrap into Grid Layout along with the redundant row markup and classes. Many of the emails I get from people declaring something impossible to do with Grid layout, come down to this inability to move away from thinking about Grid Systems as described in markup. Often the solution to their problem is very simple, but it requires a different way of thinking about how we do layout.

在教人们关于Grid的这一点上，人们真的很感兴趣。 但是我还了解到，现在在标记中描述布局非常普遍，以至于人们发现很难掌握Grid Layout的概念。 人们向我展示了一些示例，他们将网格系统从Bootstrap真正地转换为Grid Layout以及多余的行标记和类。 许多电子邮件，我从人民宣布的东西不可能做到与电网布局得到的，归结为这不能作为标记描述从思维搬走有关网格计算系统。 通常，解决他们的问题的方法非常简单，但是它需要以不同的方式来考虑我们如何进行布局。

天沟问题 (The Gutter Problem)

My other frustration when teaching people about Grid was the lack of proper gutters. Earlier in the development in the spec I had a conversation on the mailing list about this issue. However it looked as if row and column gaps would be pushed into Level 2 of the specification. I believed that the addition of these properties in Level 1 would make Grid so much easier for simple use cases. So I continued to talk about it, in the hope that the issue would keep some profile and something might make it into Level 1.

当教人们有关Grid时，我的另一个挫败感是缺少适当的装订线。 在规范开发的早期，我在邮件列表上就此问题进行了交谈。 但是，似乎行和列的间隙将被推入规范的第2级。 我相信，在级别1中添加这些属性将使Grid在简单用例中变得更加容易。 因此，我继续谈论它，希望该问题能保持一定的知名度，并能使它成为第1级。

Even my simplest examples needed to use a Grid Track as a gutter. This meant that we were immediately working around these gutter tracks. It also meant that we could not have tracks used for gutters and use auto placement as items would be placed into the gutter tracks. When creating a complex 12 or 16 column grid framework on which to place our items we had to account for multiple content and gutter tracks, making the definition and placement far more complex than I felt it should be.

即使是最简单的示例，也都需要使用Grid Track作为排水沟。 这意味着我们立即围绕这些装订线进行工作。 这也意味着我们不能使用用于装订线的轨道，而不能使用自动放置，因为将物品放置到装订线的轨道中。 当创建一个复杂的12或16列网格框架来放置我们的项目时，我们必须考虑多个内容和装订线，这使定义和放置远比我想象的要复杂。

I presented my talk, along with my section complaining about lack of gutters at CSS Day in Amsterdam. In the audience was spec editor Fantasai, who is now my favourite person as she wrote column and row gaps into the specification. These are now the properties grid-row-gap and grid-column-gap along with a shorthand grid-gap to set both at once, and they work in a similar way to column-gap in Multiple Column Layout.

我介绍了我的演讲 ，并在我的部分中抱怨在阿姆斯特丹CSS Day缺少排水沟。 规范编辑Fantasai在观众席上亮相，她现在是我最喜欢的人，因为她在规范中写了列和行的空白。 现在，这些属性是grid-row-gap和grid-column-gap以及可同时设置两者的速记grid-gap -gap，它们的工作方式与“多列布局”中的column-gap相似。

一切都变得更加简单 (It all just got simpler)

With grid-column-gap and grid-row-gap implemented in Chrome Canary I made the decision to revise my presentation before An Event Apart. I started by updating my simple examples, if you have Canary with the Experimental Web Platform Features flag enabled you can see the before and after examples linked below, take a look at the source to see the changes.

借助在Chrome Canary中实现的grid-column-gap和grid-row-gap ，我决定在An Event Apart之前修改我的演示文稿。 我首先更新了简单的示例，如果您启用了Canary并启用了“实验性Web平台功能”标志，则可以看到下面链接的示例之前和之后，请查看源代码以查看更改。

• Simple two column layout: before | after
• 12 column layout: before | after

• 简单的两分栏布局： 前 | 后
• 12列布局： 前 | 后

Suddenly, it all gets much simpler. I can do a two column layout an only have to deal with two column tracks. I can create my Skeleton Grid example and a 12 column grid can be just that – 12 column tracks. I can introduce grid far more quickly, more clearly, a huge clunky issue that required a lot of explanation right from the outset has gone.

突然之间，一切变得简单了很多。 我可以做两列布局，只需要处理两个列轨道。 我可以创建我的Skeleton Grid示例，一个12列的网格可以就是12列的轨迹。 我可以更快，更清楚地介绍grid，这个笨拙的问题从一开始就需要进行很多解释。

我们需要谈谈可及性 (We need to talk about accessibility)

The time saved in my presentation means I can talk a bit more about the accessibility implications of layout methods that separate the document source fully from the presentation. With Grid Layout, as long as elements are a direct child of the element that is a grid, they can be positioned anywhere on the grid. This has obvious implications in terms of things like tab order.

节省在演示文稿中的时间意味着我可以多谈一些将文档源与演示文稿完全分开的布局方法的可访问性。 使用“网格布局”，只要元素是作为网格的元素的直接子代，就可以将它们放置在网格上的任何位置。 这在制表符顺序之类的方面具有明显的含义。

I’ve written on this blog about my concerns regarding the potential for authors and layout tools to flatten out markup in order to make every element a child of the grid. Please take a look at that, have a think about accessibility and things like Grid and Flexbox. As the spec matures, as we start to look forward to using it in production, this is something that those of us who write about and teach Grid need to think about. I’m glad to see that starting to happen.

我在此博客上写过有关作者和布局工具拼合标记以使每个元素成为网格元素的可能性的担忧 。 请看一下，考虑可访问性以及诸如Grid和Flexbox之类的东西。 随着规范的成熟，我们开始期待在生产中使用它，这是我们撰写和教导Grid的人需要考虑的事情。 我很高兴看到这种情况开始发生 。

那么什么时候可以使用它呢？ (So when can we use it?)

This is the big question. Currently the IE10, 11 and Edge implementation is the only implementation not behind a flag. Changes to the specification have slowed, notable to me as every change means an update to the talks and workshops that I teach Grid Layout in.

这是个大问题。 当前，IE10、11和Edge的实现是唯一没有标记的实现。 对规范的更改已经放慢了，对我而言值得注意，因为每一次更改都意味着对我教网格布局的讲座和讲习班的更新。

You can start to play with Grid Layout right now if you use Chrome, some of the newest features implemented including the column and row gap properties are at the time of writing only in Canary. You will also find that some of my examples now work in Firefox Nightly Builds, again behind a flag. I’m keeping an up to date list of implementation information over at gridbyexample.com/browsers.

如果您使用Chrome，则可以立即开始使用“网格布局”，其中一些最新实现的功能（包括列间距和行间距属性）仅在使用Canary编写时才可用。 您还将发现我的一些示例现在也可以在Firefox Nightly Builds中使用，但仍带有标志。 我在gridbyexample.com/browsers上保留了最新的实施信息列表。

Unlike Flexbox which developed with prefixed implementations, Grid has developed hidden away behind a flag. This has benefits in that we don’t end up with the Flexbox situation of people pushing code into production that is using an old version of the spec. However the downside of developing behind a flag is that without something that can be used in production, getting the thoughts and experience of people who use CSS is hard. I’ve been showing people examples of Grid for three years, it is only in very recent months that much other writing about the subject has begun to show up in the Google Alerts I have set up to capture new information on the subject.

与使用前缀实现开发的Flexbox不同，Grid已隐藏在标志后面。 这样做的好处是，我们不会遇到人们使用旧版规范将代码推入生产的Flexbox局面。 但是，进行标记开发的不利之处在于，如果没有可用于生产的东西，很难获得使用 CSS的人的思想和经验。 三年来，我一直在向人们展示Grid的例子，直到最近几个月，有关该主题的许多其他文章才开始出现在我设置的Google警报中，以捕获有关该主题的新信息。

This ‘behind a flag’ development does mean however that when Grid is shipped, it is likely to be in a much better state than Flexbox was when we began to use it. Other than the old, prefixed IE10 and 11 implementation, browsers are implementing against the newest versions of the spec. Those column and row gap properties were added in May, renamed at the end of August and Igalia shipped them in Chrome in mid-October.

然而，“标志背后”的发展确实意味着，当Grid交付时，它的状态可能比我们开始使用它时的Flexbox更好。 除了旧的，带前缀的IE10和11实施之外，浏览器还针对该规范的最新版本进行实施。 这些列间距和行间距属性是在5月添加的，并在8月底重新命名，Igalia于10月中旬将其运送到Chrome中。

I wanted to write about the past three years because what I’ve learned along the way is just how much goes into creating a specification of the complexity of Grid. I’ve seen how many tiny decisions have to be made; how many implications have to be considered. Had the version of the spec that is prefixed in IE10 shipped it would have been useful, but what we have now is far superior. It solves so many more problems. The process works, as slow as it may seem to us who wait anxiously to be able to take advantage of these techniques. I am happy that we are waiting for something that I really believe has the ability to completely change how we do layout on the web.

我想写过去三年的内容，因为在此过程中，我学到的内容是创建Grid复杂性规范需要付出多少。 我已经看到必须做出多少个微小的决定。 必须考虑多少个含义。 如果发布了IE10前缀的规范版本会很有用，但我们现在所拥有的要优越得多。 它解决了许多其他问题。 该过程的运行速度，就像我们急于等待能够利用这些技术的人所看到的那样缓慢。 我很高兴我们正在等待我真正相信能够完全改变我们在网络上进行布局的方式的东西。

翻译自: https://rachelandrew.co.uk/archives/2015/11/03/three-years-with-css-grid-layout/

css 网格布局