css网格_CSS网格后备和覆盖

css网格

In the interest of not giving the same information to people on Twitter all day every day, here is another cheatsheet. This time listing the interaction between Grid and other layout methods, when you make something laid out using one method a grid item.

为了避免每天整天在Twitter上向人们提供相同的信息， 这是另一个要点 。 这次列出了当您使用一种方法将某项布局为网格项时，网格与其他布局方法之间的交互。

网格作用在容器上 (Grid acts on the container)

The key thing to remember with CSS Grid Layout is that it acts on the container. You define tracks and these constrain the items inside. Most other methods, including flexbox when used as a “grid”, act on the items. The only exception to this being multiple-column layout, where the column-* properties are defined on the container.

CSS Grid Layout要记住的关键是它作用于容器。 您定义轨道，这些轨道将约束内部的项目。 大多数其他方法（包括用作“网格”的flexbox）都会对这些项目起作用。 唯一的例外是多列布局，其中column- *属性在容器上定义。

If you float something, if you create a grid with flexbox, if you use inline-block, or display: table these items stop behaving with the properties that they have from that layout method as soon as they become a grid item. What you do need to watch out for are the widths you have applied to make those legacy grids work. Setting widths back to auto within a feature query checking for grid support, will be required for many layouts.

如果浮动某物，使用flexbox创建网格，使用inline-block或display：表，则这些项目一旦成为网格项目，它们就会停止表现其从该布局方法获得的属性。 您需要注意的是为使这些旧网格起作用而应用的宽度。 许多布局都需要在要素查询中将宽度重新设置为自动，以检查网格是否支持。

Grid overrides and fallbacks cheatsheet.

网格覆盖和后备备忘单 。

翻译自: https://rachelandrew.co.uk/archives/2017/03/20/css-grid-fallbacks-and-overrides/

css网格