3 种在任何浏览器中使用 CSS 网格的后备方案 #8191

PassionPenguin · 2021-03-11T12:20:20Z

译文翻译完成，resolve #8171

by 霜羽 Hoarfroster

lsvih · 2021-03-11T13:50:56Z

非必要不用对代码做格式化哈 - - ..

PassionPenguin · 2021-03-11T18:29:38Z

非必要不用对代码做格式化哈 - - ..

这又是ide的功劳，快去骂他

Chorer · 2021-03-12T00:14:31Z

校对认领

lsvih · 2021-03-12T01:01:51Z

@Chorer 好的~

Chorer

@lsvih @PassionPenguin 校对完毕

Chorer · 2021-03-12T00:17:23Z

article/2021/3-fallback-techniques-to-support-css-grid-in-any-browser.md


-CSS Grid has great support amongst browsers nowadays — roughly 95% for its basic functionality. However, sometimes you can’t ignore that 5%, as you might want your web application’s layout to look great across all browsers. You might even want to use newer Grid features that have less support.
+如今，CSS Grid 在浏览器中已经有了强壮的支持基础 —— 支持 Grid 基本功能的浏览器占比约为 95％。不过有时我们可能无法忽略这 5％，因为我们可能希望我们的 Web 应用程序的布局在所有浏览器中都看起来一样的棒，而且我们甚至还可能希望去使用一些支持率较少的较新的 Grid 功能。


Suggested change

如今，CSS Grid 在浏览器中已经有了强壮的支持基础 —— 支持 Grid 基本功能的浏览器占比约为 95％。不过有时我们可能无法忽略这 5％，因为我们可能希望我们的 Web 应用程序的布局在所有浏览器中都看起来一样的棒，而且我们甚至还可能希望去使用一些支持率较少的较新的 Grid 功能。

如今，CSS Grid 在浏览器中已经广受支持 —— 支持 Grid 基本功能的浏览器占比约为 95％。不过有时我们无法忽略剩下的 5％，因为我们可能希望自己的 Web 应用的布局在所有浏览器中看起来都一样的棒，而且我们甚至还可能希望去使用一些支持度较低的新型 Grid 功能。

article/2021/3-fallback-techniques-to-support-css-grid-in-any-browser.md

sin7777 · 2021-03-12T09:39:41Z

校对认领 @lsvih

lsvih · 2021-03-13T02:59:20Z

@sin7777 欢迎校对~

sin7777

@lsvih @PassionPenguin 校对完毕，要记得更正哈~

sin7777 · 2021-03-14T14:36:22Z

article/2021/3-fallback-techniques-to-support-css-grid-in-any-browser.md


-As you can see, the results are 100% equal, but they are very similar. That’s what we are aiming for. As more browsers adopt `subgrid`, more users will be seeing the pixel-perfect version of your layout.
+如我们所见，结果是完全一致的，但是它们的实现非常相似，这就是我们的目标。随着越来越多的浏览器采用 `subgrid`，更多的用户都可以看到布局的完美版本！


如你所见，结果虽然看起来是完全一致的，但其实只是非常相似而已，这就是我们的目标。随着越来越多的浏览器采用 subgrid，更多的用户都可以看到布局的像素级完美版本！

Suggested change

如我们所见，结果是完全一致的，但是它们的实现非常相似，这就是我们的目标。随着越来越多的浏览器采用 `subgrid`，更多的用户都可以看到布局的完美版本！

如你所见，结果虽然看起来是完全一致的，但其实只是非常相似而已，这就是我们的目标。随着越来越多的浏览器采用 `subgrid`，更多的用户都可以看到布局的像素级完美版本！

sin7777 · 2021-03-15T03:53:39Z

article/2021/3-fallback-techniques-to-support-css-grid-in-any-browser.md

 > * 校对者：

-# 3 Fallback Techniques To Support CSS Grid in Any Browser
+# 3 种在任何浏览器中使用 CSS 网格的 Fallback 技术


3 种在任何浏览器中使用 CSS Gird 的后备方案

sin7777 · 2021-03-15T03:54:43Z

article/2021/3-fallback-techniques-to-support-css-grid-in-any-browser.md


-The most common usage of Grid is to build multi-dimensional layouts that adapt to the user’s screen resolution. What should you do when the Grid is not available? How can you make a flexible and responsive layout with something other than Grid?
+Grid 中最常见的用处是构建适合用户屏幕分辨率的多维栅格布局。但当栅格不可用时该怎么办？除了 Grid 之外，还有什么东西可以帮助我们制作灵活且迅速响应的布局？


同意，我建议是不翻译成中文，仍然用Gird

sin7777 · 2021-03-15T04:00:19Z

article/2021/3-fallback-techniques-to-support-css-grid-in-any-browser.md

 </html>
 ```

-Note that we are not asserting against this Grid feature: `grid-template-columns`. What would happen if the browser doesn’t support it? In that scenario, Grid will fall back to the default positioning algorithm. It will stack the `divs`. For our example, that works, so we won’t need any extra work.
+注意，我们并没有断言 Grid 特性 `grid-template-columns`。如果浏览器不支持该怎么办？在这种情况下，Grid 将退回到默认的定位算法 —— 它将堆叠 `div`。在我们的示例中，该方法正常的执行了，因此我们并不需要再去进行别的什么工作。


注意，我们并不是反对 Grid 特性 grid-template-columns。如果浏览器不支持该怎么办？在这种情况下，Grid 将退回到默认的定位算法 —— 它将堆叠 div。在我们的示例中，该方法可以正常运行，因此我们不需要再去进行额外的工作。

Suggested change

注意，我们并没有断言 Grid 特性 `grid-template-columns`。如果浏览器不支持该怎么办？在这种情况下，Grid 将退回到默认的定位算法 —— 它将堆叠 `div`。在我们的示例中，该方法正常的执行了，因此我们并不需要再去进行别的什么工作。

注意，我们并不是反对 Grid 特性 `grid-template-columns`。如果浏览器不支持该怎么办？在这种情况下，Grid 将退回到默认的定位算法 —— 它将堆叠 `div`。在我们的示例中，该方法可以正常运行，因此我们不需要再去进行额外的工作。

PassionPenguin · 2021-03-15T12:56:33Z

@lsvih @PassionPenguin 校对完毕，要记得更正哈~

hhh等人齐一起改要不然校对中间会有特性（（（（（

article/2021/3-fallback-techniques-to-support-css-grid-in-any-browser.md

Co-authored-by: Chor <[email protected]>

PassionPenguin · 2021-03-15T13:07:12Z

@lsvih @Chorer @sin7777 修改完了

lsvih · 2021-03-15T13:48:47Z

@PassionPenguin 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。

掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。
专栏地址：https://zhuanlan.zhihu.com/juejinfanyi

PassionPenguin · 2021-03-15T14:47:03Z

@lsvih @Chorer @sin7777 已经发布啦 https://juejin.cn/post/6939891749665898504/ ：）

lsvih · 2021-03-15T15:15:39Z

收到

PassionPenguin added 3 commits March 11, 2021 20:02

translation done

1cb1796

update translation

27a29bd

fix translation

24f4fa6

lsvih added 前端校对认领 labels Mar 11, 2021

lsvih added the 正在校对 label Mar 12, 2021

Chorer reviewed Mar 12, 2021

View reviewed changes

lsvih removed the 校对认领 label Mar 13, 2021

sin7777 reviewed Mar 15, 2021

View reviewed changes

PassionPenguin commented Mar 15, 2021

View reviewed changes

article/2021/3-fallback-techniques-to-support-css-grid-in-any-browser.md Outdated Show resolved Hide resolved

PassionPenguin and others added 2 commits March 15, 2021 21:00

Apply suggestions from code review

47f3e43

Co-authored-by: Chor <[email protected]>

update translation

b61509d

lsvih approved these changes Mar 15, 2021

View reviewed changes

lsvih merged commit d02ec80 into xitu:master Mar 15, 2021

lsvih added 翻译完成 and removed 正在校对 labels Mar 15, 2021

PassionPenguin deleted the translation/3-fallback-techniques-to-support-css-grid-in-any-browser branch March 15, 2021 14:41

lsvih changed the title ~~3 种在任何浏览器中使用 CSS 网格的 Fallback 技术~~ 3 种在任何浏览器中使用 CSS 网格的后备方案 Apr 13, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

3 种在任何浏览器中使用 CSS 网格的后备方案 #8191

3 种在任何浏览器中使用 CSS 网格的后备方案 #8191

PassionPenguin commented Mar 11, 2021

lsvih commented Mar 11, 2021

PassionPenguin commented Mar 11, 2021

Chorer commented Mar 12, 2021

lsvih commented Mar 12, 2021

Chorer left a comment

Chorer Mar 12, 2021

sin7777 commented Mar 12, 2021 •

edited

Loading

lsvih commented Mar 13, 2021

sin7777 left a comment

sin7777 Mar 14, 2021

PassionPenguin Mar 15, 2021

sin7777 Mar 15, 2021

sin7777 Mar 15, 2021

sin7777 Mar 15, 2021

PassionPenguin Mar 15, 2021

PassionPenguin commented Mar 15, 2021

PassionPenguin commented Mar 15, 2021

lsvih commented Mar 15, 2021

PassionPenguin commented Mar 15, 2021

lsvih commented Mar 15, 2021


		CSS Grid has great support amongst browsers nowadays — roughly 95% for its basic functionality. However, sometimes you can’t ignore that 5%, as you might want your web application’s layout to look great across all browsers. You might even want to use newer Grid features that have less support.
		如今，CSS Grid 在浏览器中已经有了强壮的支持基础 —— 支持 Grid 基本功能的浏览器占比约为 95％。不过有时我们可能无法忽略这 5％，因为我们可能希望我们的 Web 应用程序的布局在所有浏览器中都看起来一样的棒，而且我们甚至还可能希望去使用一些支持率较少的较新的 Grid 功能。

	如今，CSS Grid 在浏览器中已经有了强壮的支持基础 —— 支持 Grid 基本功能的浏览器占比约为 95％。不过有时我们可能无法忽略这 5％，因为我们可能希望我们的 Web 应用程序的布局在所有浏览器中都看起来一样的棒，而且我们甚至还可能希望去使用一些支持率较少的较新的 Grid 功能。
	如今，CSS Grid 在浏览器中已经广受支持 —— 支持 Grid 基本功能的浏览器占比约为 95％。不过有时我们无法忽略剩下的 5％，因为我们可能希望自己的 Web 应用的布局在所有浏览器中看起来都一样的棒，而且我们甚至还可能希望去使用一些支持度较低的新型 Grid 功能。


		As you can see, the results are 100% equal, but they are very similar. That’s what we are aiming for. As more browsers adopt `subgrid`, more users will be seeing the pixel-perfect version of your layout.
		如我们所见，结果是完全一致的，但是它们的实现非常相似，这就是我们的目标。随着越来越多的浏览器采用 `subgrid`，更多的用户都可以看到布局的完美版本！


		The most common usage of Grid is to build multi-dimensional layouts that adapt to the user’s screen resolution. What should you do when the Grid is not available? How can you make a flexible and responsive layout with something other than Grid?
		Grid 中最常见的用处是构建适合用户屏幕分辨率的多维栅格布局。但当栅格不可用时该怎么办？除了 Grid 之外，还有什么东西可以帮助我们制作灵活且迅速响应的布局？

	注意，我们并没有断言 Grid 特性 `grid-template-columns`。如果浏览器不支持该怎么办？在这种情况下，Grid 将退回到默认的定位算法 —— 它将堆叠 `div`。在我们的示例中，该方法正常的执行了，因此我们并不需要再去进行别的什么工作。
	注意，我们并不是反对 Grid 特性 `grid-template-columns`。如果浏览器不支持该怎么办？在这种情况下，Grid 将退回到默认的定位算法 —— 它将堆叠 `div`。在我们的示例中，该方法可以正常运行，因此我们不需要再去进行额外的工作。

3 种在任何浏览器中使用 CSS 网格的后备方案 #8191

3 种在任何浏览器中使用 CSS 网格的后备方案 #8191

Conversation

PassionPenguin commented Mar 11, 2021

lsvih commented Mar 11, 2021

PassionPenguin commented Mar 11, 2021

Chorer commented Mar 12, 2021

lsvih commented Mar 12, 2021

Chorer left a comment

Choose a reason for hiding this comment

Chorer Mar 12, 2021

Choose a reason for hiding this comment

sin7777 commented Mar 12, 2021 • edited Loading

lsvih commented Mar 13, 2021

sin7777 left a comment

Choose a reason for hiding this comment

sin7777 Mar 14, 2021

Choose a reason for hiding this comment

PassionPenguin Mar 15, 2021

Choose a reason for hiding this comment

sin7777 Mar 15, 2021

Choose a reason for hiding this comment

sin7777 Mar 15, 2021

Choose a reason for hiding this comment

sin7777 Mar 15, 2021

Choose a reason for hiding this comment

PassionPenguin Mar 15, 2021

Choose a reason for hiding this comment

PassionPenguin commented Mar 15, 2021

PassionPenguin commented Mar 15, 2021

lsvih commented Mar 15, 2021

PassionPenguin commented Mar 15, 2021

lsvih commented Mar 15, 2021

sin7777 commented Mar 12, 2021 •

edited

Loading