你不需要基于 CSS Grid 的栅格布局系统 #1863

leviding · 2017-07-07T01:09:24Z

#1845

你不需要基于 CSS Grid 的栅格布局系统

bambooom · 2017-07-07T03:37:55Z

校对认领~ @sqrthree

linhe0x0 · 2017-07-07T03:37:57Z

@bambooom 好的呢 🍺

bambooom

@sqrthree @leviding 校对完成

bambooom · 2017-07-07T03:50:42Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 Grid 的布局框架和栅格系统的出现。实际上令我感到惊讶的是，它已经被使用了那么长时间，但我还没有看到它的进步，而只是使用了 CSS Grid 栅格布局。更糟糕的是，我迄今为止看到它一直在退步。他们沉醉于自己的过去而不是着眼于未来，这使得发展受到限制。即使一个常见的主题，它也需要使用行包装器进行标记。


「而只是」-> 「除了」

「我迄今为止看到它一直在退步」-> 「至今我看到过的框架都在退步」

the ones 我觉得代指前面提到的框架

「即使一个常见的主题」-> 「一个常见的问题是」?

bambooom · 2017-07-07T03:54:20Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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!
+Grid 是一个栅格系统。它允许你在 CSS 中定义列和行，而不需要在标记中定义它们。你不需要其他工具，Grid 就可以帮助你实现栅格效果，实际上它就是栅格！


「你不需要其他工具，Grid 就可以帮助你实现栅格效果」-> 「你不需要其他工具帮助你实现一个看起来像的栅格系统」

bambooom · 2017-07-07T04:02:42Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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.
+我们遗留下来的设置布局的方法需要使用行包装器进行标记的原因是，我们是通过为项目分配宽度的方式来伪造网格的。然后我们通过推拉的方式调节网格间的间隙。在一个基于 Grid 的浮动网格布局中，你需要将每行元素包装起来并清除浮动，以使下一行中的内容不浮动。在一个基于 Flex 的网格中，需要你对每行定义新的 flex 容器，或者你需要恰当灵活地使用包装器，`flex-basis` 和 `margin` 来获得相同的效果。


「我们遗留下来的」-> 「传统」(我觉得这里 legacy 的意思是说以前的方法...

「项目」-> 「块区」/「每一项」?

「基于 Grid 的浮动网格布局」-> 「基于 float 的网格布局」

bambooom · 2017-07-07T04:07:06Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 不需要这些行包装器，因为你已经定义了相应的行轨迹和用于对齐的线条。且不会有网格内的内容溢出到其他行的危险。 如果你定义了行包装器，那么每一行都将成为一个新的一维网格布局。所以如果你将自己限制在一个维度上，那使用 Grid 没有比使用 Flexbox 有什么好处。


最后一句话, 「所以」多余

「那使用 Grid 没有比使用 Flexbox 有什么好处」-> 「使用 Grid 并没有比 Flexbox 更好」

bambooom · 2017-07-07T06:10:43Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 helper 在规范化使用 Grid 方面是很有帮助的。如果你已经探究了相关的规范，你会发现有对于实现相同的效果来说，会有很多种不同的方法。你可以命名区域，使用行号或行名。或许你希望将所有内容明确或自动的在自动布局中显示出来。如果团队中的每个人都使用不同的方法，最终将似的编写出来的代码难以阅读和维护。


「你会发现有对于实现相同的效果来说」-> 「你会发现要实现相同效果」

「你希望将所有内容明确或自动的在自动布局中显示出来的」-> 「你希望明确放置所有内容或依靠自动布局显示出来」

「最终将似的编写出来」-> 「最终编写出来」

bambooom · 2017-07-07T06:16:54Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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.
+在你的新“Grid Layout 框架”上打破前，请确保你首先了解 Grid Layout 的实际工作原理。知道你为什么要创建一个抽象，它提供什么以及使用它的损失是什么。


「在你的新“Grid Layout 框架”上打破前」-> 「在创建新的「Grid Layout 框架」前」

bambooom · 2017-07-07T06:26:46Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 等，并据此进行相关设计。如果你从旧版本的浏览器开始，会使得他们的性能成为你能力的限制因素。


「To start with good markup」 <- 此处应该是指目的, 建议:「要开始使用良好的标记, 首先为了那些支持 Grid 和 Flexbox 等的浏览器进行设计」

bambooom · 2017-07-07T06:32:54Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 做向后兼容，创建一个没有跨行的布局方案。虽然这样不那么整洁，但也完全可以使用，而且不需要为数量在逐渐减少的那部分用户来增加额外标记。


「然后看看你如何通过为不支持这些新功能的浏览器提供一些稍微简单的东西来解决浏览器兼容问题」-> 太长, 稍微拆分一下: 「然后, 你可以通过提供一些更简单的东西, 来解决不支持新功能的浏览器的兼容问题」

bambooom · 2017-07-07T06:39:45Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 时产生创意的可能。那这样的话你又烦什么呢？你也可以只使用遗留的代码，但这确实是一种耻辱。


「只需」-> 这里我认为, 作者是举例这两种做法都很局限, 改为「例如在旧的浏览器只使用部分 Grid 功能」?

「你又烦什么」-> 「又何必困扰」(书面语一点

bambooom · 2017-07-07T06:42:20Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-If you have found this post while looking for a grid framework, stop right here. [Learn and use CSS Grid Layout](https://gridbyexample.com). You probably don’t need anything else.
+如果你在寻找栅格框架时找到本文，请停在这里。[学习并使用 CSS Grid 布局](https://gridbyexample.com)，可能你你没有必要再找除此之外的材料了。


「请停在这里。」怪怪的... -> 「你找对地方了」

bambooom · 2017-07-07T06:46:08Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 helper 在规范化使用 Grid 方面是很有帮助的。如果你已经探究了相关的规范，你会发现有对于实现相同的效果来说，会有很多种不同的方法。你可以命名区域，使用行号或行名。或许你希望将所有内容明确或自动的在自动布局中显示出来。如果团队中的每个人都使用不同的方法，最终将使得编写出来的代码难以阅读和维护。


「你会发现有对于实现相同的效果来说」-> 「你会发现要实现相同效果」

「你希望将所有内容明确或自动的在自动布局中显示出来的」-> 「你希望明确放置所有内容或依靠自动布局显示出来」

「最终将似的编写出来」-> 「最终编写出来」

bambooom · 2017-07-07T06:46:40Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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.
+对于代码向后兼容也是如此。如果你已经决定如何处理不支持 Grid 布局的浏览器，某些工具可以帮助你确保你所做的决定能够在不同的地方以相同的效果展现出来。此外，这种方法在项目开发层面上比直接导入其他公司的方法和需求更有用。


「需求」可以删掉?

bambooom · 2017-07-07T06:47:36Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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.
+上面这张 PPT 的背景是处理老版本的浏览器，也就是处理浏览器兼容问题。我鼓励人们首先考虑新的浏览器。在最开始的时候就使用良好的标记方式，然后查看该浏览器支持的属性，诸如 Grid 和 Flexbox 等，并据此进行相关设计。如果你从旧版本的浏览器开始，会让他们的性能成为限制你能力的因素。


「To start with good markup」 <- 此处应该是指目的, 建议:「要开始使用良好的标记, 首先为了那些支持 Grid 和 Flexbox 等的浏览器进行设计」

bambooom · 2017-07-07T06:48:07Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 做向后兼容，创建一个没有跨行的布局方案。虽然这样不那么整洁，但也完全可以使用，而且不需要为数量在逐渐减少的那部分用户来增加额外标记。


「然后看看你如何通过为不支持这些新功能的浏览器提供一些稍微简单的东西来解决浏览器兼容问题」

-> 太长, 稍微拆分一下: 「然后, 你可以通过提供一些更简单的东西, 来解决不支持新功能的浏览器的兼容问题」

H2O-2 · 2017-07-07T14:03:10Z

校对认领 :) @sqrthree

linhe0x0 · 2017-07-07T14:03:19Z

@H2O-2 妥妥哒 🍻

H2O-2

@leviding @sqrthree 校对完成～

H2O-2 · 2017-07-07T17:35:32Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 Grid 的布局框架和栅格系统的出现。实际上令我感到惊讶的是，它已经被使用了那么长时间，但我还没有看到它的进步，除了仅仅使用 CSS Grid 栅格布局。更糟糕的是，至今我看到过的框架都在退步。他们沉醉于自己的过去而不是着眼于未来，这使得发展受到限制。即使一个常见的问题，它也需要使用行包装器进行标记。


『实际上令我感到惊讶的是，它已经被使用了那么长时间』=> 『它们出现得如此之迟实际上让我感到惊讶』
这里 I’m actually surprised as to how long it has taken 中的 it 应该指的是 started to see CSS Grid layout based frameworks and grid systems appearing 这件事。

H2O-2 · 2017-07-07T17:51:36Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 Grid 的布局框架和栅格系统的出现。实际上令我感到惊讶的是，它已经被使用了那么长时间，但我还没有看到它的进步，除了仅仅使用 CSS Grid 栅格布局。更糟糕的是，至今我看到过的框架都在退步。他们沉醉于自己的过去而不是着眼于未来，这使得发展受到限制。即使一个常见的问题，它也需要使用行包装器进行标记。


『但我还没有看到它的进步，除了仅仅使用 CSS Grid 栅格布局』=> 『但除了使用 CSS Grid 栅格布局，我至今还没有看到任何框架提供其他有价值的东西』

H2O-2 · 2017-07-07T17:51:46Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 Grid 的布局框架和栅格系统的出现。实际上令我感到惊讶的是，它已经被使用了那么长时间，但我还没有看到它的进步，除了仅仅使用 CSS Grid 栅格布局。更糟糕的是，至今我看到过的框架都在退步。他们沉醉于自己的过去而不是着眼于未来，这使得发展受到限制。即使一个常见的问题，它也需要使用行包装器进行标记。


『他们沉醉于自己的过去而不是着眼于未来』=> 『他们沉醉于模仿过去的做法而不是着眼于未来』

H2O-2 · 2017-07-07T17:51:56Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 Grid 的布局框架和栅格系统的出现。实际上令我感到惊讶的是，它已经被使用了那么长时间，但我还没有看到它的进步，除了仅仅使用 CSS Grid 栅格布局。更糟糕的是，至今我看到过的框架都在退步。他们沉醉于自己的过去而不是着眼于未来，这使得发展受到限制。即使一个常见的问题，它也需要使用行包装器进行标记。


『即使一个常见的问题，它也需要使用行包装器进行标记。』=> 『其中一个常见的问题就是这些框架仍需要在标记语言中使用行包装器』
我觉得这里markup指的应该是标记式语言（如HTML）。

H2O-2 · 2017-07-07T17:53:25Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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!
+Grid 是一个栅格系统。它允许你在 CSS 中定义列和行，而不需要在标记中定义它们。你不需要其他工具帮助你实现一个看起来像栅格的效果，实际上它就是栅格！


『而不需要在标记中定义它们』=> 『而不需要在标记语言中定义它们』
理由同上。

H2O-2 · 2017-07-07T18:53:48Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 时产生创意的可能。又何必困扰？你也可以只使用遗留的代码，但这确实是一种耻辱。


『如果你将自己限制在过时的范围内』=> 『如果把自己限制在过去』

H2O-2 · 2017-07-07T19:06:28Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 时产生创意的可能。又何必困扰？你也可以只使用遗留的代码，但这确实是一种耻辱。


『例如在旧的浏览器只使用部分 Grid 功能』=> 『例如只使用Grid在老旧浏览器中能够再现的部分功能』
这里的意思应该是因为向下兼容问题而不使用Grid的全部功能，只使用可以在旧浏览器中recreate出来的部分功能。而不是说只在旧浏览器中使用部分功能。不是太组织得好语言啊哈哈。。。recreate翻译成再现感觉也不是很好，大佬可以再想想怎么翻译比较准确。

H2O-2 · 2017-07-07T19:17:06Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 时产生创意的可能。又何必困扰？你也可以只使用遗留的代码，但这确实是一种耻辱。


『又何必困扰？』=> 『既然这样又何必使用Grid？』
这句不是很确定，我觉得why bother在这里应该是“既然你不能充分使用Grid的功能，那何必还去用它呢？完全可以换别的方案”。

H2O-2 · 2017-07-07T19:19:16Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 时产生创意的可能。又何必困扰？你也可以只使用遗留的代码，但这确实是一种耻辱。


『你也可以只使用遗留的代码』=> 『你也可以只使用旧的代码方案』

H2O-2 · 2017-07-07T19:21:26Z

TODO/you-do-not-need-a-css-grid-based-grid-system.md


-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 时产生创意的可能。又何必困扰？你也可以只使用遗留的代码，但这确实是一种耻辱。


『但这确实是一种耻辱』=> 『但这的确很可惜』
a shame 这里是可惜的意思，耻辱有点太重了⊙▽⊙

leviding · 2017-07-08T13:08:07Z

根据两位校对人的意见修改完毕。 @bambooom @sqrthree @H2O-2

leviding · 2017-07-09T12:29:15Z

https://juejin.im/post/5960e73f6fb9a06bb5403f87 @sqrthree

…slate # By sqrtthree (4) and others # Via 根号三 * 'master' of https://github.com/xitu/gold-miner: 你不需要基于 CSS Grid 的栅格布局系统 (xitu#1863) 更好的表单设计: 每一页，一件事（实例研究） (xitu#1862) 你会给想学习机器学习的软件工程师提出什么建议？ (xitu#1861) 以排印为本：从内容出发 (xitu#1841) WAR 还是 JAR，你应该用哪种格式打包？ (xitu#1839) 🚀 添加文章『你不需要基于 CSS Grid 的栅格布局系统』到文章列表 🚀 添加文章『开发者眼中 iOS 11 都更新了什么？』到文章列表 🚀 添加文章『Node.js 子进程：你应该知道的一切』到文章列表 🚀 添加文章『Android 中的定时任务调度』到文章列表

you-do-not-need-a-css-grid-based-grid-system.md

4992a13

你不需要基于 CSS Grid 的栅格布局系统

linhe0x0 added the 校对认领 label Jul 7, 2017

linhe0x0 mentioned this pull request Jul 7, 2017

你不需要基于 CSS Grid 的栅格布局系统 #1845

Closed

linhe0x0 added the 前端 label Jul 7, 2017

Update you-do-not-need-a-css-grid-based-grid-system.md

d5d6f19

linhe0x0 added the 正在校对 label Jul 7, 2017

finish translate the article

417b424

bambooom reviewed Jul 7, 2017

View reviewed changes

leviding added 2 commits July 7, 2017 15:55

根据一校的建议修改完成，感谢一校~

e6e8d7c

再修改个小错误

738c96c

linhe0x0 removed the 校对认领 label Jul 7, 2017

H2O-2 reviewed Jul 7, 2017

View reviewed changes

根据校对修改完成

199bb04

linhe0x0 approved these changes Jul 10, 2017

View reviewed changes

linhe0x0 merged commit 27b7fdb into xitu:master Jul 10, 2017

linhe0x0 added 翻译完成 and removed 正在校对 labels Jul 10, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

你不需要基于 CSS Grid 的栅格布局系统 #1863

你不需要基于 CSS Grid 的栅格布局系统 #1863

leviding commented Jul 7, 2017 •

edited

Loading

bambooom commented Jul 7, 2017

linhe0x0 commented Jul 7, 2017

bambooom left a comment

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017 •

edited

Loading

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017

bambooom Jul 7, 2017

H2O-2 commented Jul 7, 2017

linhe0x0 commented Jul 7, 2017

H2O-2 left a comment

H2O-2 Jul 7, 2017

H2O-2 Jul 7, 2017

H2O-2 Jul 7, 2017

H2O-2 Jul 7, 2017

H2O-2 Jul 7, 2017

H2O-2 Jul 7, 2017

H2O-2 Jul 7, 2017 •

edited

Loading

H2O-2 Jul 7, 2017

H2O-2 Jul 7, 2017

H2O-2 Jul 7, 2017

leviding commented Jul 8, 2017

leviding commented Jul 9, 2017


		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 Grid 的布局框架和栅格系统的出现。实际上令我感到惊讶的是，它已经被使用了那么长时间，但我还没有看到它的进步，而只是使用了 CSS Grid 栅格布局。更糟糕的是，我迄今为止看到它一直在退步。他们沉醉于自己的过去而不是着眼于未来，这使得发展受到限制。即使一个常见的主题，它也需要使用行包装器进行标记。


		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!
		Grid 是一个栅格系统。它允许你在 CSS 中定义列和行，而不需要在标记中定义它们。你不需要其他工具，Grid 就可以帮助你实现栅格效果，实际上它就是栅格！


		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.
		我们遗留下来的设置布局的方法需要使用行包装器进行标记的原因是，我们是通过为项目分配宽度的方式来伪造网格的。然后我们通过推拉的方式调节网格间的间隙。在一个基于 Grid 的浮动网格布局中，你需要将每行元素包装起来并清除浮动，以使下一行中的内容不浮动。在一个基于 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 不需要这些行包装器，因为你已经定义了相应的行轨迹和用于对齐的线条。且不会有网格内的内容溢出到其他行的危险。如果你定义了行包装器，那么每一行都将成为一个新的一维网格布局。所以如果你将自己限制在一个维度上，那使用 Grid 没有比使用 Flexbox 有什么好处。


		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 helper 在规范化使用 Grid 方面是很有帮助的。如果你已经探究了相关的规范，你会发现有对于实现相同的效果来说，会有很多种不同的方法。你可以命名区域，使用行号或行名。或许你希望将所有内容明确或自动的在自动布局中显示出来。如果团队中的每个人都使用不同的方法，最终将似的编写出来的代码难以阅读和维护。


		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.
		在你的新“Grid Layout 框架”上打破前，请确保你首先了解 Grid Layout 的实际工作原理。知道你为什么要创建一个抽象，它提供什么以及使用它的损失是什么。


		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 做向后兼容，创建一个没有跨行的布局方案。虽然这样不那么整洁，但也完全可以使用，而且不需要为数量在逐渐减少的那部分用户来增加额外标记。


		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](https://gridbyexample.com). You probably don’t need anything else.
		如果你在寻找栅格框架时找到本文，请停在这里。[学习并使用 CSS Grid 布局](https://gridbyexample.com)，可能你你没有必要再找除此之外的材料了。


		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.
		对于代码向后兼容也是如此。如果你已经决定如何处理不支持 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.
		上面这张 PPT 的背景是处理老版本的浏览器，也就是处理浏览器兼容问题。我鼓励人们首先考虑新的浏览器。在最开始的时候就使用良好的标记方式，然后查看该浏览器支持的属性，诸如 Grid 和 Flexbox 等，并据此进行相关设计。如果你从旧版本的浏览器开始，会让他们的性能成为限制你能力的因素。


		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 时产生创意的可能。又何必困扰？你也可以只使用遗留的代码，但这确实是一种耻辱。

你不需要基于 CSS Grid 的栅格布局系统 #1863

你不需要基于 CSS Grid 的栅格布局系统 #1863

Conversation

leviding commented Jul 7, 2017 • edited Loading

bambooom commented Jul 7, 2017

linhe0x0 commented Jul 7, 2017

bambooom left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bambooom Jul 7, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

H2O-2 commented Jul 7, 2017

linhe0x0 commented Jul 7, 2017

H2O-2 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

H2O-2 Jul 7, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leviding commented Jul 8, 2017

leviding commented Jul 9, 2017

leviding commented Jul 7, 2017 •

edited

Loading

bambooom Jul 7, 2017 •

edited

Loading

H2O-2 Jul 7, 2017 •

edited

Loading