网格布局和渐进增强 | CSS Grid Layout: CSS Grid and Progressive Enhancement (Grid Layout) - CSS 中文开发手册 - Break易站
网格布局和渐进增强 | CSS Grid Layout: CSS Grid and Progressive Enhancement (Grid Layout) - CSS 中文开发手册
在2017的春天，我们第一次看到像Grid这样的主要规范几乎同时发布到浏览器中，我们很快就会在火狐、Chrome、Opera和Safari的公共版本中提供CSSGrid布局支持。然而，虽然常绿浏览器意味着我们中的许多人会很快看到大多数用户支持网格布局，但也有一些旧的或不支持的浏览器需要应对。在本指南中，我们将介绍各种支持策略。
支持浏览器
除了InternetExplorer/Edge之外，在Safari、Chrome、Opera和Firefox中，CSS网格布局都没有前缀。对这些指南中详细说明的所有属性和值的支持在浏览器之间是可互操作的。这意味着，如果您在Firefox中编写一些网格布局代码，它在Chrome中的工作方式应该是相同的。这不再是一个实验规范，您在生产中使用它是安全的。
Internet资源管理器与边缘状态
应该记住，CSS网格布局的最初实现发生在InternetExplorer 10中。这个早期规范没有包含最新规范所具有的所有属性和值。IE 10中提供的内容与当前规范也有很大的差异，即使在属性和值看起来相同的情况下也是如此。此早期实现也是在当前版本的Edge中实现的网格布局的版本。
规范的IE/Edge版本以-ms前缀和在IE/Edge中实现的属性如下：
grid-template-columns如-ms-grid-columnsgrid-template-rows如-ms-grid-rowsgrid-row-start如-ms-grid-rowgrid-column-start如-ms-grid-columnalign-self如-ms-grid-column-alignjustify-self如-ms-grid-row-align
的新规范中不需要IE版本的附加属性。-ms-grid-column-span和-ms-grid-row-span此版本不包括自动放置功能或网格模板区域.。可以为IE10实现一些简单的网格布局，直到当前边缘，使用-ms财产。由于这些属性是供应商前缀的，因此不会影响任何支持最新和无前缀规范的浏览器。
自动重固定器网格布局支持
流行工具自动复位器已更新以支持-ms-使用新网格属性时的网格版本。除非你的布局是非常简单的线基础的布局，这很可能会导致你更多的问题，它解决了。我不建议让自动复位器在网格属性上运行，如果对您有意义的话，可以使用网格布局的IE版本编写一个版本。
我的布局使用CSS网格安全吗？
与任何前端技术选择一样，使用css Grid布局的决定将取决于站点访问者通常使用的浏览器。如果他们倾向于使用最新版本的火狐、Chrome、Opera和Safari，那么一旦这些浏览器更新，就应该开始使用css网格。但是，如果您的站点服务于与旧浏览器相关联的市场部门，那么它可能还没有意义。但是，我的建议是，不要根据过去浏览器中推出的新规范来进行假设。CSS网格布局是非常不同的，在它开发的时间上，以及各个浏览器供应商的工作，以确保什么船舶以相同的方式为每个人工作。
实际使用中使用网格
值得注意的是，您不必在全部或无是的。您可以通过使用网格简单地增强设计中的元素，否则就可以使用旧的方法显示元素。由于网格与这些其他方法的交互方式，用网格布局覆盖遗留方法的效果令人惊讶。
浮动布局
我们通常用浮动布局创建多列布局，请执行以下操作。如果您已经浮动了一个项(它也是支持浏览器中的网格项)，则浮点数将不再适用于该项。事实是网格项优先。在下面的示例中，我有一个简单的媒体对象。在不支持的浏览器中，我使用float但是，为了使用CSS网格中实现的对齐属性，我也将容器定义为网格容器。
float不再适用，若要将内容与容器的末尾对齐，我可以使用CSSBox对齐属性align-self：
* {box-sizing: border-box;}
img {
max-width: 100%;
display: block;
}
.media {
border: 2px solid #f76707;
border-radius: 5px;
background-color: #fff4e6;
max-width: 400px;
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-areas: "img content";
margin-bottom: 1em;
}
.media::after {
content: "";
display: block;
clear: both;
}
.media .image {
float: left;
width: 150px;
margin-right: 20px;
}
.media .text {
padding: 10px;
align-self: end;
} <div class="media">
<div class="image"><img src="https://placehold.it/150x150" alt="placeholder"></div>
<div class="text">This is a media object example. I am using floats for older browsers and grid for new ones.</div>
</div> 下图显示左侧不支持的浏览器中的媒体对象，右侧的支持对象：
使用功能查询
上面的例子非常简单，我们可以不需要编写代码就可以解决这些问题，对于不支持网格的浏览器来说，这将是一个问题，而遗留代码对于我们支持浏览器的网格来说并不是一个问题。然而，事情并不总是那么简单。
在下一个例子中，我有一组浮动卡。我给了卡片width，为了float他们。要在卡片之间创建空白，我使用margin在项目上，然后在容器上出现负值：
.wrapper ul {
overflow: hidden;
margin: 0 -10px;
padding: 0;
list-style: none;
}
.wrapper li {
float: left;
width: calc(33.333333% - 20px);
margin: 0 10px 20px 10px;
} <div class="wrapper">
<ul>
<li class="card"><h2>One</h2>
<p>We can use CSS Grid to overwrite older methods.</p>
</li>
<li class="card"><h2>Two</h2>
<p>We can use CSS Grid to overwrite older methods.</p>
</li>
<li class="card"><h2>Three</h2>
<p>We can use CSS Grid to overwrite older methods.</p>
</li>
<li class="card"><h2>Four</h2>
<p>We can use CSS Grid to overwrite older methods.</p>
</li>
<li class="card"><h2>Five</h2>
<p>We can use CSS Grid to overwrite older methods.</p>
</li>
<li class="card"><h2>Six</h2>
<p>We can use CSS Grid to overwrite older methods.</p>
</li>
</ul>
</div> 该示例演示了浮动布局的典型问题：如果向任何一张卡添加了其他内容，布局就会中断。
