在前端开发中，浏览器兼容问题一直是令人头痛的难题。尤其是在布局方面，不同浏览器的渲染方式、CSS 支持等差异，导致页面在不同浏览器上可能会出现样式错乱、布局失效等问题。为了解决这个问题，通常需要额外编写浏览器兼容性代码，增加开发成本。
但是随着 CSS Grid 布局的逐渐成熟和普及，我们可以通过使用 CSS Grid 布局，快速解决浏览器兼容性问题，提高开发效率。
CSS Grid 布局简介
CSS Grid 布局是一种二维网格布局方式，可以方便地实现复杂的页面布局，支持多种布局模式和灵活的网格规格定义，对于复杂的自适应布局非常有用。CSS Grid 布局有两个概念，即容器 (grid container) 和项目 (grid item)。网格布局的基本思想是将容器分成行和列，形成网格，并通过将项目放置在网格中的特定位置来定义布局。
容器属性：
display: grid：指定一个 grid 容器。grid-template-rows：定义网格布局的行高（大小和数量）。grid-template-columns：定义网格布局的列宽（大小和数量）。grid-template-areas：定义网格布局的区域（将多个单元格组合为一个区域）。grid-template：同时定义网格布局的列和行。
项目属性：
grid-row-start、grid-row-end：定义项目跨越的行。grid-column-start、grid-column-end：定义项目跨越的列。grid-row、grid-column：同时定义项目跨越的行和列。grid-area：同时定义项目跨越的行、列和区域名。
CSS Grid 布局的浏览器兼容性
CSS Grid 布局的浏览器兼容性较好，IE 和 Edge 也支持一部分。以下浏览器支持 CSS Grid 布局：
- Chrome
- Firefox
- Safari
- Opera
- Edge (16 及以上)
- IE 11 (需加前缀)
对于不支持 CSS Grid 布局的浏览器，我们可以使用其它布局方式来实现相同的效果。同时，一些 CSS Grid 属性也有对应的 fallback 属性，能够在不支持该属性的浏览器上实现类似效果。
使用 CSS Grid 布局解决浏览器兼容问题
下面通过一个示例演示如何使用 CSS Grid 布局来解决浏览器兼容问题（代码中使用 autoprefixer 自动添加浏览器前缀）：
-- -------------------- ---- -------
---- ------------------
---- ----------- ---
---- --------------- -------
------- -----
------
---- ----------- ---
---- --------------- -------
------- -----
------
---- ----------- ---
---- --------------- -------
------- -----
------
---- ----------- ---
---- --------------- -------
------- -----
------
-------- -------------------- ---- ------- ---------- - -------- ----- ------------------- --------- ----- ---------------------- --------- ----- --------- ----- - ----- - -------- ----- ------------ ------- ---------------- ------- --------------- ------- ----------------- -------- -------------- ---- - ----- --- - ---------- ----- ------- ----- -------------- ----- - -- - --------- - - ---- -- ------------ - - ---- -- - -- - --------- - - ---- -- ------------ - - ---- -- - -- - --------- - - ---- -- ------------ - - ---- -- - -- - --------- - - ---- -- ------------ - - ---- -- -
在上述代码中，我们创建了一个包含四个项目的容器，并使用 CSS Grid 布局将这四个项目排列在一个 2x2 的网格中。
为了使该示例代码在不支持 CSS Grid 布局的浏览器上正常工作，我们可以使用 Flexbox 或 Float 布局来达到相似的效果。例如，下面是一个使用 Flexbox 布局的 fallback 代码：
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ----- - - ------ ------- ----- - -- - ----- - - ----- - -- - ------ --- - -- - ------ -- - -- - ------ -- -
在上述代码中，我们将容器设置为 Flexbox 布局并使用 flex-wrap: wrap 让项目自动换行，通过设置各个项目的 flex 属性和 order 属性来实现相应的布局效果。
总结
在实际开发中，CSS Grid 布局是一个非常实用的工具，可以让我们更容易地构建复杂的自适应布局。虽然某些浏览器的兼容性还有待改善，但是通过使用一些 fallback 技巧，我们仍然可以让我们的网站在不支持 CSS Grid 布局的浏览器上正常工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65346b307d4982a6eb8d21df