网格基本概念

Grid 是二维布局系统：Flex 沿一根轴排列，Grid 则同时控制行和列，天然适合「页面骨架」「卡片墙」这类横竖交织的版面。与 Flex 不冲突——整体骨架用 Grid，组件内部用 Flex，是现代开发的黄金组合。

三个核心概念：

• 网格容器：设置 display: grid 的元素。
• 网格项目：容器的直接子元素。
• 网格线：划分行列的 invisible 线，从 1 开始编号。项目用「第几条线到第几条线」来决定占多大地方，理解网格线是用好 Grid 的关键。

设置 display: grid 后子项默认单列逐行排列，下一步就是定义行列轨道。

<style>
  .grid {
    display: grid;              /* 网格容器 */
    grid-template-columns: 100px 1fr 100px; /* 三列 */
    gap: 8px;
  }
  .grid div {
    background: #e1bee7;
    padding: 10px;
  }
</style>
<div class="grid">
  <div>左栏</div>
  <div>中间自适应</div>
  <div>右栏</div>
</div>

📤 分享本文

微博QQQ+贴豆XfinRTGPWA✉

📚 推荐阅读

YY UED 前端规范指南万象云档优达学城前端样式指南万象云档移动前端开发经验指南万象云档Element Plus v2.2 组件库教程万象云档带你入门前端工程万象云档

来自万象云档的免费在线书籍，点击封面直接阅读