CSS Grid System学习笔记

CSS Grid System 实践指南

最新推荐文章于 2025-11-25 09:44:12 发布

原创最新推荐文章于 2025-11-25 09:44:12 发布 · 149 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #学习 #html

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何学习和使用CSS Grid System，通过实例展示了创建一个n行3列的布局，并解释了`grid-template-columns`、`gap`和`fr`单位的用法。通过调整`repeat()`函数的参数，可以轻松实现12列的经典网格布局。文章提供了详细的CSS代码示例，包括`.container`、`.row`和不同列类别的样式定义。

CSS Grid System学习笔记

https://learncssgrid.com/
https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html
https://flexbox.help/

理解后，先做个n行3列的框架。
先看css部分。

    .container {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 10px;
    }

    .row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    .col-1 {
      background-color: greenyellow;
      grid-column: auto / span 1;
    }

    .col-2 {
      grid-column: auto / span 2;
      background-color: pink;
    }

    .col-3 {
      grid-column: auto / span 3;
      background-color: aqua;
    }

repeat(1 1fr)列数重复1次，repeat(3 1fr)列数重复3次，要做经典grid里的12列，就改为repeat(12 1fr)。
fr是一个单位。

  <div class="container">
    <div class="row">
      <div class="col-1"> 1 </div>
      <div class="col-1"> 1 </div>
      <div class="col-1"> 1 </div>
    </div>
    <div class="row">
      <div class="col-1"> 1 </div>
      <div class="col-2"> 2 </div>
    </div>
    <div class="row">
      <div class="col-3"> 3 </div>
    </div>
    <div class="row">
      <div class="col-2"> 2 </div>
      <div class="col-1"> 1 </div>
    </div>
  </div>