CSS Grid 布局是一种强大的布局工具，它可以轻松地创建复杂的网格布局，同时也可以使网页布局更加响应式。然而，由于 IE11 及以下版本的浏览器不支持 CSS Grid 布局，因此我们需要一些技巧来解决这个问题。
兼容 IE11 的 CSS Grid 布局方法
使用 Autoprefixer 插件
Autoprefixer 是一款用于自动添加 CSS 前缀的插件，可以实现在旧版浏览器上自动添加所需的前缀，以使您的 CSS 代码在这些浏览器中正常工作。使用 Autoprefixer 可以实现不需要修改任何现有代码的情况下，在旧版浏览器中使用 CSS Grid 布局。
使用 Grid Polyfill
Grid Polyfill 是一个 JavaScript 库，它可以在不支持 CSS Grid 布局的浏览器中模拟 CSS Grid 布局。这意味着您可以使用标准的 CSS Grid 语法，并且这些规则将应用于所有支持 CSS Grid 布局的浏览器。
使用 Flexbox
Flexbox 是一种排列和对齐元素的布局模式，它可以用于创建列式布局。虽然它不能提供与 CSS Grid 布局一样的网格功能，但是它是一种更古老的布局模式，它的支持范围更广。
当然，以上三种方法可能有些情况下也并不是完美的解决方案，只能具体问题具体分析。下面将演示 Autoprefixer 插件具体的使用方法。
Autoprefixer 架设和配置
Autoprefixer 实际是一个 PostCSS 插件，我们需要先安装 PostCSS，然后在项目中的 postcss.config.js 文件中添加 Autoprefixer 插件。
安装 PostCSS 和 Autoprefixer
npm install --save-dev postcss autoprefixer
配置 Autoprefixer
在项目中新建 postcss.config.js 文件，然后在文件中添加 Autoprefixer 插件的配置。
module.exports = {
plugins: [
require('autoprefixer')
]
}Autoprefixer 示例代码
Step 1：创建网格
我们先来创建一个网格，在 Flexbox 布局下创建网格非常容易，并且适用于大多数浏览器。在这个例子中，我们将使用 Flexbox 来布置项目，并使用 “display: table” 属性来创建表。
-- -------------------- ---- ------- ----- - -------- ----- ---------- ----- -------- ------ ------ ----- ------------- ------ ------- -- -------- -- -
Step 2：设置网格背景色
接下来，我们要为网格中的所有项目设置背景色：
.grid-item {
background-color: #efefef;
}Step 3：设置网格尺寸
接下来，我们要设置网格项的大小，并使其占据整个表格单元格：
.grid-item {
box-sizing: border-box;
width: 100%;
padding: 1em;
height: 10em;
display: table-cell;
}然后，我们可以在表单元格中并排放置一个或多个项目：
<div class="grid"> <div class="grid-item">Item 1</div> <div class="grid-item">Item 2</div> <div class="grid-item">Item 3</div> </div>
Step 4：使用 Autoprefixer 插件
将上面的 CSS 代码复制到项目中，并在 postcss.config.js 文件中添加 Autoprefixer 插件以在浏览器中自动添加所需的前缀：
module.exports = {
plugins: [
require('autoprefixer')
]
}最后，使用浏览器测试这段代码，您将看到访问 IE11 及以下浏览器的页面效果：
总结
CSS Grid 布局是一种非常实用的布局模式，但是由于兼容性问题，我们需要使用一些技巧来适应旧的浏览器。本文展示了如何使用 Autoprefixer 插件来兼容旧版浏览器并使用 CSS Grid 布局实现网格布局。这些技巧可以帮助您提高用户体验并使您的网站更加现代化和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64645f8d968c7c53b053dd60