CSS Grid System学习笔记

最新推荐文章于 2024-07-18 17:34:14 发布

着陆点

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量88

点赞数

分类专栏：前端文章标签： css 学习 html

本文链接：https://blog.csdn.net/wanghao_sh/article/details/127190048

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>