商品两列网格布局_更改网格规格并采用多列布局

商品两列网格布局

Last week I was in Paris for the CSS Working Group face to face meeting. At the CSS WG we have two kinds of meetings. Every week there is a teleconference, which members call into. In addition we have a face to face meeting a few times each year, where as many of us as are able sit in a room together and go through various issues. If you want to know what is discussed at either of these then it is all minuted in IRC, the logs are posted to www-style after the meetings. In addition if we discuss a particular GitHub issue, the discussion is logged against that issue with any resolution.

上周，我在巴黎参加CSS工作组面对面的会议。 在CSS WG，我们有两种会议。 每个星期都有一次电话会议，成员可以参加。 此外，我们每年都会举行几次面对面的会议，在那里我们中的许多人能够一起坐在一个房间里，讨论各种问题。 如果您想知道其中任何一个讨论的内容，那么所有内容都会在IRC中记录下来，会议结束后将日志发布到www风格 。 另外，如果我们讨论一个特定的GitHub问题 ，则会以任何解决方案针对该问题记录讨论。

In this post I wanted to detail a couple of issues likely to be of interest to readers of this blog.

在这篇文章中，我想详细介绍此博客读者可能感兴趣的几个问题。

网格规范更改和Flexbox新闻 (Grid specification changes and news for Flexbox)

At the meeting we discussed a range of related issues, these stemmed from a request that the grid-gap properties not be reset by the grid shorthand. You can read the issue here #1036, which also includes the full IRC log of the discussion.

在会议上，我们讨论了一系列相关问题，这些问题来自于要求grid速记不重置grid-gap属性的要求。 您可以在此处＃1036阅读问题，该问题还包括讨论的完整IRC日志。

The resolution for the original issue is that the grid shorthand will be changed to not reset these properties. Furthermore, the gap properties were discussed and it was resolved to undo the original resolution that made specific grid-gap properties (grid-column-gap, grid-row-gap and grid-gap) in favour of column-gap, row-gap and a gap shorthand. There is an issue raised here 1696 although the actual resolution is detailed in the discussion of 1036 above.

原始问题的解决方案是将更改grid速记以不重置这些属性。 此外，还讨论了间隙属性，并解决了使原来的特定grid-gap属性（ grid-column-gap ， grid-row-gap和grid-gap ）有利于column-gap ， row-gap的原始分辨率的问题。和gap速记。 尽管在上面的讨论1036中详细介绍了实际的分辨率，但在1696年提出了一个问题。

These new properties will be detailed in the Box Alignment specification, and be available to other layout modes where they make sense. Multi-column layout already has column-gap, the only difference being that if you do not set a value for column-gap you get a gap (the spec suggests 1em), gaps in other layout methods default to 0.

这些新属性将在“ 框对齐”规范中进行详细说明，并在有意义的其他布局模式下可用。 多列布局已经具有column-gap ，唯一的区别是，如果不为column-gap设置值，则会得到一个间隙（ 规范建议为1em ），其他布局方法中的间隙默认为0。

The good news with regard to making these more generic gap properties is that other layout method they make obvious sense in, is Flexbox. So ultimately browsers may support gaps in flex layout, meaning that we won’t need to do weird things with negative margins to get a neat gap between flex items.

关于制作这些更通用的间隙属性的好消息是，Flexbox是它们明显适用的其他布局方法。 因此，最终浏览器可能会支持Flex布局中的空白，这意味着我们不需要做一些带有负边距的怪异事情就可以在Flex项之间获得整齐的空白。

Given that people have already implemented grid layouts using the grid-gap properties it is likely that browsers will alias the old names to the new for the foreseeable future. Right now the spec, nor browsers have been updated but it is worth keeping an eye on that change being made. You could of course use both properties now just as you do for vendor prefixed properties - browsers will ignore column-gap and use grid-column-gap for now.

假设人们已经使用grid-gap属性实现了网格布局，那么在可预见的将来，浏览器很可能会将旧名称别名为新名称。 目前，该规范以及浏览器均未更新，但值得关注所做的更改。 当然，您现在可以像使用供应商前缀属性一样使用这两个属性-浏览器现在将忽略column-gap ，而现在使用grid-column-gap 。

共同编辑多列布局 (Co-editing Multi-column Layout)

The Candidate Recommendation of Multi-column layout was published on the 12 April 2011, and the specification has languished since then. There are a whole bunch of issues that haven’t been added to the draft of the spec. If you have ever used Multicol you will know there are a good deal of interoperability issues right now.

多列布局候选建议于2011年4月12日发布，从那时起该规范就陷入困境。 规范草案中还没有添加很多问题。 如果您曾经使用过Multicol，那么您会知道现在存在很多互操作性问题。

I care about multicol for a number of reasons. We don’t have anything else that does this sort of thing in CSS, and being able to take a bunch of stuff and split it into columns is sometimes useful on the web. I also have an interest in CSS as used for print - where specifications like multicol are used far more frequently. Therefore, I volunteered and have been accepted as a co-editor of the specification, to see if I can help get things moving again for the spec and ultimately for the interop issues that mean people can’t use it reliably.

我关心multicol的原因有很多。 我们没有其他东西可以在CSS中完成这种工作，因此能够将一大堆东西分解成几列在网络上有时很有用。 我还对用于打印CSS感兴趣-在这里，诸如multicol之类的规范使用得更加频繁。 因此，我自愿参加了该规范， 并被接受为该规范的共同编辑，以了解我是否可以帮助推动该规范的发展，并最终解决意味着人们无法可靠使用它的互操作性问题。

It will be the first spec I have edited, and work begins with a good bit of archeology through the old mailing list archives to dig out all of the old issues and resolutions and make sure we have those listed. I can then start to work through them. How much time I have really depends on balancing this work with work that pays the bills. All of my work on CSS is voluntary and self-funded right now - including travel to meetings. I feel as if in the past couple of years I’ve found the stuff I am best at, and that is generally useful to the web. I’d love to have the time to just work on specs like Multicol, write tests and dig up interop issues as I’ve started doing for Grid Layout, write about and teach this stuff - without it all being a side project of the work that pays the bills!

这将是我编辑的第一个规范，首先要通过旧的邮件列表档案库进行考古工作，以挖掘出所有旧的问题和解决方案，并确保列出了所有这些问题和解决方案。 然后，我可以开始研究它们。 我真正有多少时间取决于平衡这项工作和支付账单的工作。 我目前在CSS上的所有工作都是自愿的，并且是自筹资金的-包括参加会议的旅行。 我觉得在过去的几年中，我似乎找到了我最擅长的东西，这通常对网络有用。 我很想花时间处理诸如Multicol之类的规范，编写测试并挖掘互操作性问题， 因为我已经开始为Grid Layout做事 ，编写和教这些东西-但这全都不是工作的附带项目付账！

翻译自: https://rachelandrew.co.uk/archives/2017/08/08/changes-to-the-grid-spec-and-taking-on-multi-column-layout/

商品两列网格布局