CSS的Grid布局详解（ 示例代码 ）

还是大剑师兰特 ：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN 知名博主，GIS 领域优质创作者，深耕 openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts 等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

文章目录

• • 一、关键概念
  • 二、关键属性
  • 三、示例代码
  • 四、效果图及解释
  • 五、浏览器兼容性

CSS Grid 布局是一种二维布局系统，它允许开发者在网页中创建具有复杂网格结构的布局，可以精确控制每一行和每一列的大小、对齐以及项目的放置位置。Grid 布局提供了极其灵活的方式来设计和调整布局，特别适合于网页设计中需要精细划分区块和复杂交互布局的需求。

一、关键概念

• Grid Container（网格容器）：通过设置 display: grid; 或 display: inline-grid; 创建网格容器。
• Grid Lines（网格线）：行和列是由网格线定义的，可以命名或编号。
• Grid Tracks（网格轨道）：相邻的两根网格线之间的空间称为网格轨道，对应于行或列。
• Grid Cells（网格单元格）：由相邻的行和列网格线围成的空间。
• Grid Areas（网格区域）：可以将多个单元格组合成一个更大的区域，用于布局项目。
• Grid Items（网格项目）：网格容器的直接子元素自动成为网格项目。

二、关键属性

• grid-template-columns 和 grid-template-rows：定义网格的列和行轨道大小。
• grid-gap 或 grid-row-gap 和 grid-column-gap：设置行和列之间的间距。
• grid-template-areas：使用名称定义网格区域。
• grid-auto-flow：定义网格项目的自动填充和对齐方式。
• justify-items 和 align-items：控制项目在各自网格单元格内的对齐方式。
• justify-content 和 align-content：在有多余空间的情况下，控制行或列整体在容器内的对齐方式。

三、示例代码

DOCTYPE html>
html lang="en">
head>
style>
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
    grid-gap: 10px; 
    height: 300px;
    border: 1px solid #ccc;
  }

  .item {
    background-color: #f0f0f0;
    padding: 20px;
    border: 1px solid #ddd;
  }

  
  .container {
    grid-template-areas:
      "header header header"
      "main main sidebar"
      "footer footer footer";
  }

  .header { grid-area: header; }
  .main { grid-area: main; }
  .sidebar { grid-area: sidebar; }
  .footer { grid-area: footer; }
style>
head>
body>

div class="container">
  div class="item header">Headerdiv>
  div class="item main">Main Contentdiv>
  div class="item sidebar">Sidebardiv>
  div class="item footer">Footerdiv>
div>

body>
html>

四、效果图及解释

在这个示例中，我们创建了一个 3 列的网格布局，并且定义了 4 个明确的网格区域（Header、Main、Sidebar 和 Footer）。每个直接子元素（.item）都被赋予了一个区域名，它们在网格中占据相应的位置。此外，我们还设置了列轨道为等分（每列占比相同），并加入了行与列间的间距。

五、浏览器兼容性

• Chrome：从版本 57+ 开始全面支持 CSS Grid 布局。
• Firefox：从版本 52+ 开始支持。
• Safari：从版本 10.1+ 开始支持。
• Microsoft Edge：从版本 16+ 开始支持。
• Opera：从版本 44+ 开始支持。

对于 Internet Explorer（IE）浏览器，IE 浏览器本身不支持 CSS Grid 布局。若要为 IE 用户提供兼容体验，开发者需要采用以下策略之一：

1. 使用 CSS Grid Polyfill：有一些第三方库可以模拟 CSS Grid 的行为，使得老旧浏览器也能使用类似的功能。不过请注意，polyfill 并不能完美模拟所有 Grid 布局的特性，且可能对性能有一定影响。

2. 回退方案（Graceful Degradation）：针对不支持 CSS Grid 的浏览器，可以使用诸如 Flexbox、浮动布局（Floats）、定位（Positioning）或者基于表格的传统布局等方法作为备用方案。

3. 功能检测（Feature Detection）：在 JS 中检测浏览器是否支持 Grid 布局，如果不支持，则动态应用备用布局方案。

在具体实践中，需要结合项目需求和目标用户的浏览器统计数据来制定兼容策略。对于已经不再广泛使用的老旧浏览器，有时候可以考虑放弃支持，以专注于现代浏览器的优化。而对于面向企业环境或者特定市场，可能仍需保证一定的向下兼容性。