css 网格布局_CSS网格。 一种布局方法不是唯一的布局方法

css 网格布局

I am having a lot of fun answering questions as people start to figure out CSS Grid Layout. In doing so it has started to become obvious that many people are expecting the CSS Grid Layout specification to be the one true layout to rule them all.

随着人们开始弄清CSS网格布局，我在回答问题时感到很有趣。 这样做已经开始变得显而易见，许多人期望CSS Grid Layout规范成为统治所有规则的真正布局。

There are things that I think would be good candidates for additions to the specification, however some frequent requests don’t really fit the layout method at all. A good example is the belief that grid should enable the type of layout achieved by Masonry when auto-placing items.

我认为有些东西可以很好地添加到规范中 ，但是一些频繁的请求实际上根本不适合布局方法。 一个很好的例子是，在自动放置项目时，网格应支持砌筑实现的布局类型 。

A Masonry layout where blocks fit themselves into space horizontally and vertically

一种砌体布局，其中块可水平和垂直地放入空间

This layout isn’t a two dimensional grid. A two dimensional grid has strict rows and columns, even though some things might span multiple tracks or be aligned inside an area, the basic areas follow the strict lines of the grid. I’ve created three demonstrations which will perhaps shed light on the issue, and also why people are confused about this. All require that you are using a browser with grid layout enabled.

此布局不是二维网格。 二维网格具有严格的行和列，即使某些东西可能跨越多个轨迹或在一个区域内对齐，基本区域也遵循网格的严格线。 我创建了三个演示，它们也许可以阐明这个问题以及人们对此感到困惑的原因。 所有这些都要求您使用的浏览器启用了网格布局 。

网格自动放置 (Grid auto-placement)

In this first example I am creating a flexible grid, with a flexible number of columns using the minmax() function. The child items auto-place themselves onto the grid one in each cell.

在第一个示例中，我将使用minmax()函数创建一个灵活的网格，其中包含灵活的列数。 子项将自己自动放置到网格中的每个单元格中。

See the Pen 1. Auto-placement by rachelandrew (@rachelandrew) on CodePen.

参见笔1. rachelandrew（ @rachelandrew ）在CodePen上自动放置 。

In this second example I am adding some rules to my items, though still relying on auto-placement. I have also set the grid-auto-flow property to dense so grid will backfill gaps left in the grid as it places larger items. At first glance this looks a bit like masonry, however as you can see the items are all in strict rows and columns, some are just spanning multiple tracks.

在第二个示例中，尽管仍依赖自动放置，但我在项目中添加了一些规则。 我还将grid-auto-flow属性设置为密，因此当网格放置较大的项目时，网格将回填网格中剩余的间隙。 乍一看，这看起来有点像砖石建筑，但是，您可以看到所有物品都严格按照行和列排列，其中有些只是跨越多个轨道。

We also end up with content out of DOM order with this method, which will be a problem in many cases.

我们最终还会用这种方法使内容不按DOM顺序排列，这在很多情况下都是一个问题。

See the Pen 2. Auto-placement with dense packing by rachelandrew (@rachelandrew) on CodePen.

参见Pen2 。由rachelandrew（ @rachelandrew ）在CodePen上自动密集包装 。

For Masonry what you actually would need is for auto-placement to look at both height and width and be able to create ‘rows’ that also push items up into the area of the row above to fill in gaps. You can get something that looks very much like that if you control the layout by positioning the items, as shown below. However you then can’t just throw a chunk of content at a grid and let it do the layout - which is what people want in ‘Masonry’.

对于石工，您实际需要的是自动放置高度和宽度，并能够创建“行”，这些行还将项目推入上方的行区域以填补空白。 如果通过放置项目来控制布局，则可以得到非常像的东西，如下所示。 但是，您不能只将一部分内容放在网格上，然后让它进行布局-这就是人们在“砌体”中想要的。

See the Pen 3. Positioned items by rachelandrew (@rachelandrew) on CodePen.

参见钢笔3. rachelandrew（ @rachelandrew ）在CodePen上放置的物品 。

I think the fact auto-placement existed coupled with the things you can create when explicitly placing items lead people to the conclusion that auto-placement can magically do the masonry layout. However it’s not something grid was ever designed to do, as it isn’t a two dimensional grid layout.

我认为，自动放置与您在明确放置物品时可以创建的东西一起存在的事实使人们得出结论，即自动放置可以神奇地进行砌体布置。 但是，这并不是网格设计的目的，因为它不是二维网格布局。

Grid is for the creation of two dimensional grids. So you use Grid when your layout needs a two dimensional grid. That might be to contain the layout as a whole, or it might be to display a form or a set of images or some other component. The grid specification contains some clever stuff to enable these grids to be responsive, but they are always grids. If you can’t draw a set of boxes and put the bits of your design neatly into them, it probably isn’t the method you are looking for.

网格用于创建二维网格。 因此，当布局需要二维网格时，可以使用网格。 这可能包含整个布局，也可能显示一个表单或一组图像或其他组件。 网格规范包含一些聪明的东西，以使这些网格能够响应，但它们始终是网格。 如果您无法绘制一组盒子并将设计部分整齐地放入其中，则可能不是您要的方法。

您的其他工具还没有消失 (Your other tools haven’t gone away)

Grid is only a replacement for float-based layout, where float-based layout it being used to try and create a two-dimensional grid. If you want to wrap text around an image, I’d suggest floating it.

网格只是基于浮动的布局的替代，基于浮动的布局用于尝试创建二维网格。 如果您想在图像周围包裹文字，建议您将其浮动。

Grid is only a replacement for flexbox if you have been trying to make flexbox into a two-dimensional grid. If you want to take a bunch of items and space them out evenly in a single row, use flexbox.

如果您试图将Flexbox制成二维网格，则Grid只能替代flexbox。 如果要拿一堆物品并将它们均匀地排成一行，请使用flexbox。

You can only make these decisions however if you understand each of the specifications well enough to know what it was designed for. To that end, it is a very good time to brush up on your general CSS layout skills. Once you know what each method was designed to do, it is much easier to look at a layout and spot the parts that would be best built using a particular approach. You will also be able to recognise those things, like the Masonry style layout, that perhaps are not yet solved by CSS alone.

但是，只有充分了解每个规范以了解其设计目的后，您才能做出这些决定。 为此，现在是重新掌握一般CSS布局技能的好时机。 一旦知道了每种方法的设计目的，便可以轻松地查看布局并找出使用特定方法最好地构建的零件。 您还将能够识别出可能仅靠CSS仍无法解决的那些事情，例如砖石风格的布局。

I’ve just returned home from the CSS Working Group meeting and I’m so excited about some of the stuff that is coming into CSS right now. I want to see people take this stuff and do really interesting things with it, but before you can be creative with a medium, you need to understand the medium. That means understanding new things like Grid, Flexbox and how to use interesting techniques such as display: contents. However it also means having a proper understanding of floats, of positioning, of all those things we’ve been hacking around with for years. What are they actually designed for and how do we reframe the way we work with them in the light of newer methods?

我刚刚从CSS工作组会议回到家，对于CSS中即将出现的一些事情我感到非常兴奋。 我希望看到人们接受这些东西并用它做一些真正有趣的事情，但是在您可以借助一种媒介进行创意之前，您需要了解该媒介。 这意味着要了解诸如Grid，Flexbox之类的新事物，以及如何使用诸如display：contents之类的有趣技术。 但是，这也意味着对浮标，定位以及我们多年来一直在研究的所有事物有适当的了解。 他们实际上是为什么设计的，以及如何根据更新的方法来重新构造与他们合作的方式？

This holistic view of layout is very much becoming a theme for my talks and writing this year. For if you are expecting Grid to solve all of your layout problems, then you will be disappointed. If you instead look to the interplay between methods, there is much to be excited about.

这种整体布局的观点已成为今年我的演讲和写作的主题。 如果您希望Grid解决所有布局问题，那么您将感到失望。 如果您转而关注方法之间的相互作用，那么会有很多令人兴奋的事情。

翻译自: https://rachelandrew.co.uk/archives/2017/01/18/css-grid-one-layout-method-not-the-only-layout-method/

css 网格布局