CSS布局实战：Flexbox 与 Grid 精髓解析

CSS布局实战：Flexbox 与 Grid 精髓解析

引言

网页布局技术经历了从表格、浮动到如今的 Flexbox 与 Grid 的演变。这些现代布局模型彻底改变了前端开发方式，使复杂界面实现变得更加直观高效。本文将深入剖析这两大布局技术的工作原理、应用场景与实践技巧，帮助开发者在项目中做出明智的技术选择。

CSS 布局技术演进

在深入现代布局前，简要回顾 CSS 布局技术的演变历程：

<!-- 早期：表格布局 -->
<table>
  <tr>
    <td>Header</td>
  </tr>
  <tr>
    <td width="30%">Sidebar</td>
    <td width="70%">Content</td>
  </tr>
</table>

/* 过渡期：浮动布局 */
.sidebar {
  float: left;
  width: 30%;
}
.content {
  float: right;
  width: 70%;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

这些传统方法存在诸多局限：表格布局语义不当且难以维护；浮动布局则需处理清除浮动等问题，且难以实现垂直居中等常见需求。

Flexbox 布局基础

核心概念

Flexbox（弹性盒子）是一种一维布局模型，主要针对单行或单列内容设计。

.container {
  display: flex;
  /* 或 display: inline-flex */
  flex-direction: row; /* 默认值，也可以是 column */
  justify-content: space-between; /* 主轴对齐方式 */
  align-items: center; /* 交叉轴对齐方式 */
  flex-wrap: wrap; /* 允许换行 */
}

.item {
  flex: 1; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
  /* 或指定具体值 */
  order: 2; /* 改变排列顺序 */
  align-self: flex-end; /* 单独对齐方式 */
}

Flexbox 核心优势

1. 轻松实现垂直居中：解决了CSS中的经典难题

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 300px;
}

2. 灵活的空间分配 ：通过 flex-grow、flex-shrink 和 flex-basis 精确控制元素如何分配空间

.container {
  display: flex;
}
.sidebar {
  flex: 0 0 200px; /* 不增长、不收缩、基础宽度200px */
}
.content {
  flex: 1; /* 占据所有剩余空间 */
}

3. 顺序独立于文档流 ：通过 order 属性轻松调整元素显示顺序，而无需更改 HTML 结构

CSS Grid 布局详解

核心概念

Grid（网格）是一种二维布局系统，同时处理行与列。

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr; /* 三列网格，比例为1:2:1 */
  grid-template-rows: 100px auto 100px; /* 三行，首尾固定高度 */
  gap: 20px; /* 网格间距 */
}

.item {
  grid-column: 1 / 3; /* 从第1列线到第3列线 */
  grid-row: 2 / 3; /* 从第2行线到第3行线 */
  /* 或使用区域名称 */
}

Grid 的突破性特性

1. 区域定义与命名：通过语义化区域名称创建布局

.container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
  grid-template-columns: 1fr 3fr;
  grid-template-rows: 100px 1fr 100px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.footer { grid-area: footer; }

2. 强大的对齐控制：精确控制网格项在单元格内的位置

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-items: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

.special-item {
  justify-self: start; /* 单个项目对齐 */
  align-self: end;
}

3. 自动放置算法：无需明确指定位置，自动布局网格项

Flexbox 与 Grid 对比分析

适用场景对比

布局需求	首选技术	理由
单行/列内容	Flexbox	一维布局模型，优化处理单向布局
复杂二维布局	Grid	同时处理行列关系，更适合整体页面结构
未知元素数量	Flexbox	自动调整元素大小和分布
元素大小/位置精确控制	Grid	基于行列线或区域的精确定位

示例：导航栏实现对比

使用 Flexbox:

<nav class="nav-flex">
  <div class="logo">Logo</div>
  <ul class="menu">
    <li>首页</li>
    <li>产品</li>
    <li>关于</li>
    <li>联系</li>
  </ul>
  <div class="search">搜索</div>
</nav>

.nav-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
}

.menu {
  display: flex;
  list-style: none;
  gap: 20px;
}

使用 Grid:

<nav class="nav-grid">
  <div class="logo">Logo</div>
  <ul class="menu">
    <li>首页</li>
    <li>产品</li>
    <li>关于</li>
    <li>联系</li>
  </ul>
  <div class="search">搜索</div>
</nav>

.nav-grid {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  padding: 15px;
}

.menu {
  display: flex; /* 菜单项仍使用Flexbox */
  justify-content: center;
  list-style: none;
  gap: 20px;
}

这个导航栏例子展示了同一结构的两种实现方式。Flexbox版本更加灵活适应内容尺寸，而Grid版本则提供了更精确的列宽控制。

性能考量

虽然两者性能差异通常不明显，但存在细微区别：

1. 对于频繁重计算布局的场景（如动画），Flexbox可能更高效
2. 对于大型复杂布局，Grid的集中式布局定义可能提供更好的性能
3. 重排（reflow）方面，Grid在更改单个元素位置时可能引起较小的重排代价

实战案例：响应式卡片网格

实现一个根据屏幕尺寸自动调整的卡片布局：

<div class="card-container">
  <div class="card">卡片 1</div>
  <div class="card">卡片 2</div>
  <div class="card">卡片 3</div>
  <!-- 更多卡片 -->
</div>

使用 Flexbox:

.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.card {
  flex: 1 0 300px; /* 基础宽度300px，但可增长填充空间 */
  min-height: 200px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 媒体查询适配小屏设备 */
@media (max-width: 600px) {
  .card {
    flex: 1 0 100%; /* 小屏幕下卡片占满一行 */
  }
}

使用 Grid:

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  min-height: 200px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 媒体查询可能更少 */
@media (max-width: 600px) {
  .card-container {
    grid-template-columns: 1fr; /* 可选，但Grid已自动适应 */
  }
}

Grid版本使用auto-fill和minmax()函数实现了"自动响应"，无需多个媒体查询，代码更简洁。这展示了Grid在复杂响应式布局中的优势。

浏览器兼容性与降级方案

当前兼容性状况

• Flexbox：IE11部分支持（存在bug），其他现代浏览器完全支持
• Grid：IE10-11通过旧语法部分支持，需添加前缀，无法使用grid-template-areas等新特性

降级方案

特性检测与回退:

@supports (display: grid) {
  .container {
    display: grid;
    /* Grid 相关样式 */
  }
}

@supports not (display: grid) {
  .container {
    display: flex;
    /* Flexbox 回退样式 */
  }
}

自动前缀处理:

使用Autoprefixer等工具自动处理兼容性前缀：

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      grid: true // 启用Grid布局前缀
    })
  ]
}

高级技巧：组合使用Flexbox与Grid

嵌套布局策略

最佳实践是在适当场景组合使用两种技术：

<div class="page-layout">
  <header class="header">页头</header>
  <main class="content">
    <div class="card-container">
      <!-- 卡片群组 -->
    </div>
  </main>
  <footer class="footer">页脚</footer>
</div>

/* 使用Grid定义整体页面结构 */
.page-layout {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header"
    "content"
    "footer";
  min-height: 100vh;
}

.header { grid-area: header; }
.content { grid-area: content; }
.footer { grid-area: footer; }

/* 使用Flexbox处理卡片容器内部布局 */
.card-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 20px;
}

真实案例：电子商务产品展示区

<div class="store-layout">
  <header class="store-header">
    <!-- 使用Flexbox的导航栏 -->
  </header>
  
  <div class="product-grid">
    <!-- 使用Grid的产品列表 -->
    <div class="product-card">
      <div class="product-image">图片</div>
      <div class="product-info">
        <!-- 使用Flexbox的产品信息布局 -->
        <h3 class="product-title">产品名称</h3>
        <p class="product-desc">产品描述...</p>
        <div class="product-footer">
          <span class="product-price">¥299</span>
          <button class="buy-button">购买</button>
        </div>
      </div>
    </div>
    <!-- 更多产品卡片 -->
  </div>
</div>

.store-layout {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 25px;
  padding: 20px;
}

.product-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  overflow: hidden;
  transition: transform 0.3s;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-image {
  height: 200px;
  background-color: #f0f0f0;
}

.product-info {
  display: flex;
  flex-direction: column;
  padding: 15px;
  flex: 1; /* 填充剩余空间 */
}

.product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* 推至底部 */
}

这个例子展示了Grid用于整体布局和产品网格，而Flexbox用于内部组件布局的混合策略，发挥各自优势。

性能优化策略

减少布局抖动

避免频繁更改触发重新计算的CSS属性：

// 不佳实践 - 引起多次布局计算
element.style.width = getNewWidth() + 'px';
element.style.height = getNewHeight() + 'px';

// 最佳实践 - 批量更新
requestAnimationFrame(() => {
  element.style.width = getNewWidth() + 'px';
  element.style.height = getNewHeight() + 'px';
});

利用GPU加速

对于动画元素，使用transform和opacity属性代替改变布局属性：

/* 避免 */
.moving-element {
  animation: move 1s infinite;
}
@keyframes move {
  0% { left: 0; top: 0; }
  100% { left: 100px; top: 100px; }
}

/* 推荐 */
.moving-element {
  animation: move 1s infinite;
}
@keyframes move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(100px, 100px); }
}

深入案例分析：常见布局模式实现

圣杯布局（Holy Grail Layout）

这种经典布局包含头部、底部和三列中间内容（侧边栏-主内容-侧边栏）。

传统实现方式需要复杂的浮动和定位：

.container {
  padding-left: 200px;
  padding-right: 150px;
}
.center {
  float: left;
  width: 100%;
}
.left {
  float: left;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
}
.right {
  float: left;
  width: 150px;
  margin-left: -150px;
  position: relative;
  right: -150px;
}

使用Grid实现简洁明了：

.container {
  display: grid;
  grid-template-columns: 200px 1fr 150px;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: 
    "header header header"
    "left   center right"
    "footer footer footer";
  min-height: 100vh;
}

.header { grid-area: header; }
.left { grid-area: left; }
.center { grid-area: center; }
.right { grid-area: right; }
.footer { grid-area: footer; }

使用Flexbox实现：

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header, .footer {
  flex: 0 0 auto;
}

.main-content {
  display: flex;
  flex: 1;
}

.center {
  flex: 1;
  order: 2;
}

.left {
  flex: 0 0 200px;
  order: 1;
}

.right {
  flex: 0 0 150px;
  order: 3;
}

分析：Grid版本代码最简洁且语义清晰，Flexbox版本对内容流动性处理较好但需要调整HTML元素顺序。

Masonry瀑布流布局

这种不规则网格布局常见于Pinterest等平台。

模拟实现方式（通过Column实现）：

.masonry-container {
  column-count: 4;
  column-gap: 20px;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 20px;
}

即将到来的原生Grid方案（目前处于实验阶段）：

.masonry-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: masonry;
  gap: 20px;
}

注：原生Grid masonry布局尚未在所有浏览器中得到支持，需借助JavaScript库如Masonry.js实现完全兼容的瀑布流。

现代布局的可访问性考量

布局顺序与屏幕阅读器

Flexbox的order属性和Grid的定位能力让我们可以改变视觉呈现顺序，但可能会导致视觉顺序与HTML源码顺序不符，影响屏幕阅读器用户体验。

/* 视觉调整可能影响屏幕阅读顺序 */
.navigation {
  display: flex;
}

.primary-link { order: 2; }
.secondary-link { order: 3; }
.logo { order: 1; }

最佳实践：确保视觉顺序与逻辑阅读顺序一致，或使用适当的ARIA属性补充导航信息。

响应式布局中的可访问性

在响应式设计中，确保所有布局变体都提供合理的阅读体验：

/* 大屏幕：水平菜单 */
.nav {
  display: flex;
}

/* 小屏幕：汉堡菜单 */
@media (max-width: 768px) {
  .nav {
    display: none;
  }
  
  .nav.expanded {
    display: flex;
    flex-direction: column;
  }
  
  .menu-toggle {
    display: block;
    /* 添加ARIA属性提高可访问性 */
    /* 在JavaScript中实现aria-expanded状态切换 */
  }
}

调试与优化布局

常见布局问题与解决方案

1. Flexbox中子元素不等高

问题：在含有不同内容量的元素中，高度默认不同。

/* 解决方案 */
.container {
  display: flex;
  align-items: stretch; /* 默认值，但可能被覆盖 */
}

2. Grid模板区域断开

问题：grid-template-areas语法中行列数不匹配。

/* 问题代码 */
.container {
  grid-template-areas: 
    "header header"
    "sidebar content content"
    "footer footer";
}

/* 修正后（每行列数一致） */
.container {
  grid-template-areas: 
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

3. Flex项目意外缩小

问题：当容器空间不足时，flex项目默认会收缩。

/* 解决方案 */
.item {
  flex-shrink: 0; /* 防止收缩 */
  /* 或使用简写 */
  flex: 0 0 200px; /* grow, shrink, basis */
}

Chrome DevTools布局调试

利用浏览器开发工具进行布局调试：

1. Flexbox检查器：在Elements面板中，选择flex容器后可查看flex属性
2. Grid检查器：启用Grid布局可视化，显示网格线和区域
3. 媒体查询断点：使用响应式设计模式测试不同屏幕尺寸

布局性能优化深度探讨

布局抖动（Layout Thrashing）预防

布局抖动是指反复触发浏览器重新计算布局的问题，严重影响性能。

// 问题代码
for (let i = 0; i < 1000; i++) {
  element.style.width = (element.offsetWidth + 1) + 'px';
  // 每次读取offsetWidth都会触发重排
}

// 优化版本
let width = element.offsetWidth; // 一次性读取
for (let i = 0; i < 1000; i++) {
  width += 1;
}
element.style.width = width + 'px'; // 一次性写入

避免大规模DOM更改的策略

当动态添加大量元素时：

// 高效方式：使用文档片段
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const el = document.createElement('div');
  el.textContent = `Item ${i}`;
  fragment.appendChild(el);
}
container.appendChild(fragment); // 只触发一次重排

提高复杂网格性能

对于大型网格布局：

/* 明确声明网格尺寸可提高性能 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(10, minmax(50px, auto));
  /* 使用固定尺寸代替auto可进一步优化 */
}

深入响应式设计策略

基于容器查询的响应式设计（新兴技术）

传统媒体查询基于视口尺寸，而容器查询允许基于父容器尺寸做出响应：

/* 容器定义 */
.card-container {
  container-type: inline-size;
  container-name: card;
}

/* 容器查询 */
@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

内在网页设计（Intrinsic Web Design）

结合现代布局技术的响应式设计新理念：

/* 流动的宽度与固定的宽度混合使用 */
.layout {
  display: grid;
  grid-template-columns: minmax(auto, 20em) minmax(0, 1fr) minmax(auto, 15em);
}

/* 使用min()和max()函数创建自适应元素 */
.flexible-element {
  width: min(100%, 70ch); /* 理想阅读宽度但不超过可用空间 */
  padding: max(1rem, 3vw); /* 响应式填充 */
}

工具与开发体验

CSS预处理器中的布局助手

使用Sass创建灵活的栅格系统：

// 创建响应式栅格mixin
@mixin grid($columns, $gap: 20px) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  gap: $gap;
  
  @media (max-width: 768px) {
    grid-template-columns: repeat(min($columns, 2), 1fr);
  }
  
  @media (max-width: 480px) {
    grid-template-columns: 1fr;
  }
}

// 使用
.product-list {
  @include grid(4);
}

CSS-in-JS中的布局实现

使用styled-components创建自适应布局：

import styled from 'styled-components';

const Grid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(${props => props.minWidth || '250px'}, 1fr));
  gap: ${props => props.gap || '20px'};
`;

// 使用
<Grid minWidth="300px" gap="30px">
  {products.map(product => <ProductCard key={product.id} {...product} />)}
</Grid>

行业实践案例研究

电商平台布局架构

/* 主体布局结构 */
.e-commerce-app {
  display: grid;
  grid-template-columns: minmax(auto, 1200px);
  justify-content: center;
}

/* 产品列表页 */
.product-listing {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 3fr;
  gap: 30px;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .product-listing {
    grid-template-columns: 1fr;
  }
  
  .filters {
    position: fixed;
    transform: translateX(-100%);
    transition: transform 0.3s;
    z-index: 100;
    background: white;
    /* JavaScript处理显示/隐藏逻辑 */
  }
  
  .filters.active {
    transform: translateX(0);
  }
}

在线学习平台课程卡片实现

<div class="course-grid">
  <article class="course-card">
    <div class="course-image">
      <img src="course1.jpg" alt="课程封面">
      <span class="course-level">初级</span>
    </div>
    <div class="course-content">
      <h3 class="course-title">现代JavaScript基础</h3>
      <p class="course-description">掌握ES6+特性与最佳实践...</p>
      <div class="course-meta">
        <span class="course-duration">10小时</span>
        <span class="course-rating">4.8 ⭐</span>
      </div>
    </div>
    <div class="course-footer">
      <span class="course-price">¥199</span>
      <button class="enroll-button">立即报名</button>
    </div>
  </article>
  <!-- 更多课程卡片 -->
</div>

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

.course-card {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transition: transform 0.2s, box-shadow 0.2s;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

.course-image {
  position: relative;
}

.course-level {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.course-content {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.course-meta {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  color: #666;
  font-size: 14px;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-top: 1px solid #eee;
}

.course-price {
  font-weight: bold;
  font-size: 18px;
  color: #e41e3f;
}

.enroll-button {
  background: #2c52ed;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.enroll-button:hover {
  background: #1a3fd9;
}

未来趋势与展望

子网格(Subgrid)

子网格允许子元素继承父网格的结构，解决嵌套组件对齐问题：

.parent-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 20px;
}

.child-element {
  grid-column: span 6;
  /* 子网格语法 */
  display: grid;
  grid-template-columns: subgrid;
  /* 子元素将对齐到主网格的列线 */
}

容器查询的广泛应用

随着容器查询标准的推进，未来我们将看到更多基于组件本身容器的响应式设计：

/* 未来的容器查询语法可能更加强大 */
@container (aspect-ratio > 2/1) {
  .widescreen-content {
    /* 针对宽屏比例的容器样式 */
  }
}

布局算法的发展

CSS正在引入更多智能布局算法：

/* 示例：Masonry布局（目前实验性） */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-template-rows: masonry;
  gap: 16px;
}

/* 示例：CSS布局API（概念性） */
.adaptive-layout {
  display: layout(packing);
  /* 自动计算最佳元素排列 */
}

与JavaScript框架的整合

随着Web Components和现代JS框架的发展，布局系统与组件架构将更紧密结合：

// React组件示例（概念性）
function AdaptiveGrid({ children, minItemWidth = '250px', gap = '20px' }) {
  // 使用useMediaQuery或ResizeObserver监测容器尺寸
  // 动态调整布局策略
  
  return (
    <div className="adaptive-grid" style={{
      display: 'grid',
      gridTemplateColumns: `repeat(auto-fill, minmax(${minItemWidth}, 1fr))`,
      gap
    }}>
      {children}
    </div>
  );
}

总结与思考

现代CSS布局技术已经革命性地改变了网页设计与实现方式。Flexbox与Grid作为核心布局模型，为我们提供了强大而灵活的工具，使复杂界面变得简单易实现。掌握这些技术不仅是技术能力的体现，更是对用户体验的承诺。

在实际项目中，明智地选择并组合使用这些布局技术，将帮助我们构建出真正响应式、可访问且高性能的现代Web应用。

随着Web标准的不断发展，我们将迎来更智能、更直观的布局系统。持续关注这一领域的创新，将新技术与最佳实践相结合，创造出既美观又高效的用户界面，自然也是我们的职责之一。

参考资源

官方文档

• MDN Web Docs: CSS Flexible Box Layout - Mozilla官方文档，提供Flexbox布局的完整指南和示例
• MDN Web Docs: CSS Grid Layout - 全面的Grid布局参考资料，包含详细API说明和用例
• W3C CSS Grid Layout Module Level 1 - CSS Grid布局的官方规范文档
• W3C CSS Flexible Box Layout Module Level 1 - CSS Flexbox的官方规范文档

交互式学习资源

• Flexbox Froggy - 通过游戏化方式学习Flexbox布局的基础和进阶概念
• Grid Garden - 类似Flexbox Froggy的交互式Grid布局学习游戏
• CSS Grid Generator - 可视化Grid布局生成器，帮助理解和创建Grid布局
• Flexbox Defense - 另一个学习Flexbox的塔防游戏

---

如果你觉得这篇文章有帮助，欢迎点赞收藏，也期待在评论区看到你的想法和建议！👇

终身学习，共同成长。

咱们下一期见

💻