css网格_一年CSS网格-优快云博客

css网格

A year ago today, Firefox was the first browser to ship into stable their CSS Grid implementation. Closely followed by Chrome and Safari. It’s been quite a year for my favourite layout method.

一年前的今天，Firefox是第一个可以稳定实现CSS Grid实现的浏览器。紧随其后的是Chrome和Safari。我最喜欢的布局方法已经过去了一年。

It has been fascinating to see how people have adopted Grid, and the different ways people are developing with the specification. It has also been interesting to me to discover the things people want to do, suggestions for future levels of the Grid specification; or perhaps that point to other types of layout entirely being required. The suggestions that you raise against the specification are heard, please keep adding them. New CSS does not appear overnight, but the CSS WG does listen and take these ideas into account. The first requirement to tackle for Grid is the subgrid feature, and a First Public Working Draft of the Level 2 specification is now published, it will focus on defining subgrid.

看到人们如何采用Grid以及人们根据规范进行开发的不同方式，这真是令人着迷。发现人们想要做的事情，对Grid规范未来水平的建议对我来说也很有趣。也许这表明完全需要其他类型的布局。您会听到针对规范提出的建议，请继续添加。新CSS不会一夜之间出现，但是CSS WG确实会听取并考虑这些想法。解决网格的第一个要求是子网格功能，并且现在发布了第2级规范的第一个公共工作草案，它将着重于定义子网格。

As I’ve continued to speak, and increasingly lead workshops about Grid, I’ve begun transforming the way I teach the subject. Simply focusing on Grid - which is often what conference and workshop organisers ask for - essentially leads to the assumption that this is one layout method to rule them all. It is impossible to teach grid without talking about CSS Intrinsic and Extrinsic Sizing, Writing Modes and Box Alignment. It would be wrong to teach Grid without explaining how it and Flexbox are solutions to different problems. The number of attempts I have seen where a developer is trying to reinvent multi-column layout, or even floats in Grid demonstrates to me how much a holistic programme of learning about layout is needed. As I say in many of my talks as I demonstrate how some “old CSS” solves a problem, “don’t forget that old CSS is still useful for what is was designed for.”

随着我继续讲话并越来越多地主持关于Grid的研讨会，我已经开始改变我教授该主题的方式。简单地关注网格-这通常是会议和研讨会组织者所要求的-本质上导致了这样一个假设，即这是一种将它们全部统治的布局方法。如果不谈论CSS本质和外部大小，编写模式和框对齐，就不可能教网格。在没有解释Grid的情况下教授Grid是错误的，它和Flexbox是如何解决不同问题的。在开发人员试图重塑多列布局甚至在Grid中浮动时，我所看到的尝试次数向我展示了需要多少有关布局的整体程序。正如我在许多演讲中所说的那样，当我演示一些“旧CSS”如何解决问题时，““不要忘记，旧CSS仍然对设计目标有用。”

Teaching this new layout, has also demonstrated to me how a real understanding of these other specifications is becoming increasingly important. It isn’t just a case of knowing which layout method to use, it is understanding the underlying concepts well enough not to be baffled by them. In particular, once we get away from sizing everything in percentages, take advantage of the flexibility of the fr unit in grid or the flex properties in flexbox, we have to understand how the browser is working out how big things are. It is far easier to understand why we align things to the start and end of containers rather than top, right, bottom and left once you understand that Writing Modes exist, and why.

教授这种新布局也向我展示了如何真正理解这些其他规范变得越来越重要。不仅仅是知道要使用哪种布局方法的情况，还在于充分了解底层概念而不会被它们所困扰。特别是，一旦我们无法按百分比调整大小，而是利用网格中fr单位的灵活性或flexbox中的flex属性的优势，我们就必须了解浏览器如何计算出很大的东西。一旦理解了书写模式及其原因，我们就更容易理解为什么我们将内容对齐到容器的开头和结尾，而不是顶部，右侧，底部和左侧。

In my book The New CSS Layout I bring together all of the parts of layout, I’m increasingly doing that on stage and in workshops. My online CSS Workshop covers all of CSS Layout in depth. I’ve also begun publishing articles that look at how different parts of CSS work with Grid - covering Sizing, Generated Content, and also things like the concept of a Block Formatting Context. I hope to continue with this approach over the next year, because there will be new people coming into the profession now who do not have the baggage that us old hands have. They get the chance to learn how layout on the web works, with real tools that will enable their creativity. Without battling floats or needing to rely on frameworks they can hopefully be better placed to deal with the important jobs of developing performant and accessible websites. I can’t wait until we no longer need to explain how floats can be used for grid-type layouts, and I expect my slide decks will be starting to document that transition over the next year or so.

在我的《新CSS布局》一书中，我将布局的所有部分整合在一起，越来越多地在舞台和工作室中进行。我的在线CSS Workshop深入介绍了所有CSS布局。我还开始发表文章，探讨CSS的不同部分如何与Grid一起使用，包括调整大小，生成的内容，以及诸如块格式上下文的概念。我希望在明年继续采用这种方法，因为现在将有新的人进入该行业，他们没有我们以前所拥有的包the。他们有机会借助真正的工具来学习网络布局的工作原理，从而发挥创造力。无需与花车对抗，也无需依赖框架，他们可以更好地处理开发高性能和可访问网站的重要工作。我等不及了，直到我们不再需要解释如何将浮点数用于网格类型的布局，并且我希望我的滑盖将在明年左右开始记录这种过渡。

I am writing this post in LA, over the past two days I have taught layout and new CSS to an audience of designers. I have enjoyed hearing from them how these new possibilities spark a renewed interest in design for the web. I hope that in the next year we start to see some of that creativity come through, and we can figure out exactly what is possible now, and what we want to be possible next.

我在洛杉矶写这篇文章，在过去的两天里，我向设计师的读者讲授了布局和新CSS。我很高兴听到他们的声音，这些新的可能性如何激发人们对Web设计的新兴趣。我希望在明年我们开始看到一些创造力的实现，并且我们可以准确地弄清楚现在有什么可能，以及下一步我们希望有什么。