css grid 网格_您不需要基于CSS Grid的网格系统

css grid 网格

In the last couple of weeks I have started to see CSS Grid layout based frameworks and grid systems appearing. I’m actually surprised as to how long it has taken, but I am yet to see one that adds any value at all over just using CSS Grid Layout. Worse, the ones I have seen so far go backwards. They limit themselves by replicating the past rather than looking to the future. A common theme being that they require row wrappers in markup.

在过去的两周中，我开始看到基于CSS网格布局的框架和网格系统的出现。 我实际上对它花了多长时间感到惊讶，但是我还没有看到仅使用CSS Grid Layout就能增加任何价值的东西。 更糟糕的是，到目前为止我所看到的那些倒退了。 他们通过复制过去而不是展望未来来限制自己。 一个共同的主题是，它们需要标记中的行包装器。

为什么网格不同？ (Why is grid different?)

Grid is a grid system. It allows you to define columns and rows in your CSS, without needing to define them in markup. You don’t need a tool that helps you make it look like you have a grid, you actually have a grid!

网格是一个网格系统。 它允许您在CSS中定义列和行，而无需在标记中定义它们。 您不需要一个可以帮助您使其看起来像是网格的工具，实际上就是网格！

The reason that our legacy methods need row wrappers is because we are faking a grid by assigning widths to items. We then pull and push the items around to make gaps between them. In a float based grid, you need to wrap the elements that make up each row, and clear the row in order that things in the next row don’t float up. In a flex based grid you need your row to define a new flex container, or you need to get very clever with wrapping, flex-basis and margins to get the same effect without.

我们的传统方法需要行包装器的原因是因为我们通过为项目分配宽度来伪造网格。 然后，我们拉动并推动各个项目以在它们之间留出空隙。 在基于浮动的网格中，您需要包装组成每一行的元素，并清除该行，以使下一行中的内容不会浮动。 在基于flex的网格中，您需要在行中定义一个新的flex容器，或者需要非常聪明地使用自动换行，flex-basis和margin来获得相同的效果。

Grid doesn’t need these row wrappers because you have defined row tracks, and lines to position items against. There is no danger of grid items hopping up into the row above. If you define row wrappers then each row becomes a new one-dimensional grid layout, and there is little benefit to using Grid over Flexbox if you limit yourself to a single dimension.

网格不需要这些行包装器，因为您已经定义了行轨道和用于定位项目的行。 没有网格项目跳入上一行的危险。 如果定义行包装器，则每一行都将成为新的一维网格布局，并且如果将自己限制为一个维，则使用Grid over Flexbox几乎没有好处。

在基于网格的“框架”中可能有什么用？ (What might be useful in a Grid-based ‘framework’?)

The word framework is somewhat laden at this point, however I think that in a team, a set of Sass helpers may well be useful to enforce a certain way of using Grid. If you have dug into the spec, you will realise there are different methods of creating the same end result. You can name areas, use line numbers or line names. You might prefer to place everything explicitly or rely a lot on auto-placement. If everyone on the team uses a different method, the end result will be harder to read and maintain.

此时，框架一词有些繁重，但是我认为在一个团队中，一组Sass助手可能对实施某种使用Grid的方式很有用。 如果您深入研究该规范，您将意识到有不同的方法来创建相同的最终结果。 您可以命名区域，使用行号或行名。 您可能希望将所有内容都明确放置，或者在很大程度上依赖自动放置。 如果团队中的每个人都使用不同的方法，则最终结果将难以阅读和维护。

The same could be true for fallback code. If you have decided how to deal with non-grid supporting browsers, some tooling could help you to ensure that the decisions you have made are implemented in the same way everywhere. However this approach would be far more useful when developed on a project level, rather than importing another company’s requirements and methodologies wholesale.

后备代码也可能如此。 如果您已决定如何处理不支持网格的浏览器，则某些工具可以帮助您确保所做出的决定在任何地方都以相同的方式实施。 但是，如果在项目级别进行开发，则此方法将比导入另一家公司的要求和方法批发有用得多。

Before breaking ground on your new “Grid Layout framework” make sure you have first understood how Grid Layout actually works. Know why you are creating an abstraction, what it offers and also what it takes away.

在使用新的“网格布局框架”之前，请确保您已首先了解网格布局的实际工作原理。 知道为什么要创建抽象，它提供了什么，以及它带来了什么。

拥抱新的可能性 (Embrace the new possibilities)

I have just come back from Patterns Day, and one of my slides was mentioned a few times on Twitter. That slide read:

我刚从模式日回来， 在Twitter上几次提到我的幻灯片之一 。 那张幻灯片上写着：

“Flexbox & Grid are so different. If you build using old methods first you won’t take advantage of their creative possibilities.”

“ Flexbox和Grid是如此不同。 如果您首先使用旧方法进行构建，您将无法利用其创造力。”

The context here was in terms of dealing with old browsers. I was encouraging people to think about new browsers first. To start with good markup, to then look at creating the design for the browsers that do support methods such as Grid and Flexbox. As if you start with old browsers, you limit yourself to their capabilities.

这里的背景是与旧的浏览器打交道。 我鼓励人们首先考虑新的浏览器。 首先，从好的标记开始，然后看一下为支持Grid和Flexbox等方法的浏览器创建设计。 就像从旧版浏览器开始一样，您将只能使用它们的功能。

Create solid markup, uncluttered by additional elements that the past tells you that you need. Design your site using what Grid and other new methods have to offer. Then look at how you deal with the browsers without support, by serving them something slightly simpler. Perhaps your Grid design relies on being able to span rows, something that is hard to achieve without extra markup and precise layout in older browsers. Your fallback could use flexbox, and create a layout without the row spans. Not as neat, but completely usable and without needing to jam in extra markup for a diminishing number of visitors.

创建坚实的标记，将过去告诉您的其他元素杂乱无章。 使用Grid和其他新方法提供的网站来设计您的网站。 然后看一下如何在不支持的情况下处理浏览器，方法是为它们提供一些简单的服务。 也许您的Grid设计依赖于能够跨越行，而如果没有在旧版浏览器中进行额外的标记和精确的布局，这是很难实现的。 您的后备广告可以使用flexbox，并创建没有行跨度的布局。 它不那么整洁，但是可以完全使用，并且不需要增加额外的标记，从而减少了访问者的数量。

You can see an example here, one of a number of patterns with fallbacks that I’ve been posting over at Grid by Example.

您可以在此处看到一个示例 ， 该示例是我在Grid by Example上发布的具有回退功能的多种模式之一。

If you limit yourself to what has gone before, by only using the parts of Grid that you can recreate in older browsers, or by using some framework that is limiting itself, you miss out on the creative possibilities of using Grid. In that case why bother? You may as well use the legacy code only, and that would indeed be a shame.

如果仅通过使用可以在较旧的浏览器中重新创建的Grid部件，或者通过使用一些限制自身的框架来限制自己，那么您将错过使用Grid的创造性可能性。 在那种情况下为什么要打扰？ 您最好只使用旧版代码，这确实是一个耻辱。

If you have found this post while looking for a grid framework, stop right here. Learn and use CSS Grid Layout. You probably don’t need anything else.

如果您在寻找网格框架时找到了这篇文章，请在此处停止。 学习和使用CSS Grid Layout 。 您可能不需要其他任何东西。

翻译自: https://rachelandrew.co.uk/archives/2017/07/01/you-do-not-need-a-css-grid-based-grid-system/

css grid 网格