css grid 布局

邮差的信 提交于 2021-02-10 08:10:55

 

原文链接: css grid 布局

CSS 栅格布局中最重要的两个元素是 wrapper(parent) 和 items(children)。wrapper 实际上就是栅格,而 items 就是栅格里面的元素。

  <div class="wrapper">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
  .wrapper {
    display: grid;
  }

  .item{
    background: deepskyblue;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px;
  }

默认放置方式

 

我们需要为这个容器定义行和列,现在将这个容器分割成两行三列,需要用到 grid-template-rowgrid-template-column 属性:

当我们这样去定义 grid-template-columns 时,我们将得到三列,列长就是我们设置的大小,同理 grid-template-rows 也是一样。

  .wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
  }

 

改变长度

  .wrapper {
    display: grid;
    grid-template-columns: 200px 50px 100px;
    grid-template-rows: 100px 30px;
  }

 


重新定位并调整这些元素的大小,我们要对该元素使用 grid-columngrid-row 属性

  .wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 100px 100px 100px;
  }
  .item1{
    grid-column-start: 1;
    grid-column-end: 4;
  }

定义一个3*3的格子,上面的代码意图是,我们想让 item1 的起点在第一列并且终止在第四列,也就是说,我们想让它独占一行,下面是运行的结果:

元素位置依据的是网格线,标号由1开始

当第一个元素占满第一行时,其他的元素将向下顺延。

简写,1/4  表示1到4

  .item1{
    grid-column: 1 / 4;
  }

 

复杂布局

  .item1 {
    grid-column-start: 1;
    grid-column-end: 3;
  }
  .item3 {
    grid-row-start: 2;
    grid-row-end: 4;
  }
  .item4 {
    grid-column-start: 2;
    grid-column-end: 4;
  }

简写

  .item1 {
    grid-column: 1/3;
  }

  .item3 {
    grid-row: 2/4;
  }

  .item4 {
    grid-column: 2/4;
  }

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!