likes
comments
collection
share

CSS布局方式---grid布局

作者站长头像
站长
· 阅读数 44

grid布局

Grid布局是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局，设置 css的 display:grid 或 display:inline-grid ,都可以将直接将容器能产生单元格的容器。

基本概念：

容器（container）——有容器属性

项目（items）——有项目属性

行（row)

列（column）

间距（gap) ——单元格之间的距离

区域（area）—— 自己划分每个单元格占据的区域

内容（content)

CSS布局方式---grid布局

容器属性：

grid-template-rows 设置每一行的宽度，可以是具体值，也可以百分比，也可以是auto

grid-template-columns 设置每一列的宽度，可以是具体值，也可以百分比，也可以是auto

.box {
    width:500px;
    height:480px;
    border:1px solid #000;
    display:grid;
    grid-template-rows:10% auto 20%;
    grid-template-columns:100px auto 100px;
    margin:0 auto;
    margin-top:10px;
    color:white;
    font-size:30px;
}
.div1 {
    background:red;
}
.div2 {
    background:green;
}
.div3 {
    background:yellow;
}
.div4 {
    background:blue;
}
.div5 {
    background:palegreen;
}
.div6 {
    background:plum;
}
.div7 {
    background:peru;
}
.div8 {
    background:yellowgreen;
}
.div9 {
    background:powderblue;
}
.div10 {
    background:palevioletred;
}
<div class="box">
    <div class="div1">1</div>
    <div class="div2">222222222222</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div5">5</div>
    <div class="div6">6</div>
    <div class="div7">7</div>
    <div class="div8">8</div>
    <div class="div9">9</div>
    <div class="div10">10</div>
</div>

结果如图所示，虽然设置的是三行三列，但是如果html多出来的div10，会直接换行显示，并且高度塞满容器：

CSS布局方式---grid布局

repeat属性：

相当于重复的简写，第一个参数是次数，第二个是重复的值。

  grid-template-rows:repeat(3,100px);
  grid-template-columns:repeat(3,150px);
auto-fill属性：

有时候单元格的数量是不固定的，大小是固定的，需要自动填充容器，就可以用auto-fill属性。

.box{
  width:500px;
  height:480px;
  border:1px solid #000;
  display:grid;
  grid-template-rows:repeat(3,100px);
  grid-template-columns:repeat(auto-fill,60px);
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}

CSS布局方式---grid布局

fr属性：

fr属性可以平分比例，但是和百分比不一样，百分比不算gap空间，fr是算上的。

.box{
  width:500px;
  height:480px;
  border:1px solid #000;
  display:grid;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-columns:repeat(4,1fr);
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}

如图所示，行平分了四行，列没有被平分，是因为第二列的内容超出了平分的比例，就会多出去，相应的另外三列就会同比例的减小：

CSS布局方式---grid布局

minmax函数：

minmax函数产生一个长度范围，表示长度就在这个范围之中，它接受两个参数，分别为最小值和最大值。

.box{
  width:500px;
  height:480px;
  border:1px solid #000;
  display:grid;
  grid-template-rows:1fr 1fr 1fr 1fr;
  grid-template-columns:150px 150px 150px minmax(10px,100px);
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}

如图所示，前三列都是150px,容器的宽度是500px，第四列是50px,在minmax(10px,100px)区间中

CSS布局方式---grid布局

row-gap和column-gap

格子之间的间距row-gap表示行与行之间的间距、column-gap表示列与列之间的间距。

  .box{
     width:500px;
     height:480px;
     border:1px solid #000;
     display:grid;
     grid-template-rows:1fr 1fr 1fr 1fr;
     grid-template-columns:150px 150px 150px minmax(10px,100px);
     column-gap:10px;
     row-gap:30px;
     margin:0 auto;
     margin-top:10px;
     color:white;
     font-size:30px;
   }

如图所示，如果row-gap和column-gap的值一样，例如都是10px,可以简写成gap:10px，如果不一样，可以简写成gap:30px 10px,30px代表row行间距，10px代表column列间距。

CSS布局方式---grid布局

grid-auto-flow

网格的排放顺序，默认是row,先行后列，可以设置column,就是先列后行。

 .box{
    width:500px;
    height:480px;
    border:1px solid #000;
    display:grid;
    grid-template-rows:100px 100px 100px;
    grid-template-columns:120px 120px 120px;
    column-gap:10px;
    row-gap:30px;
    margin:0 auto;
    margin-top:10px;
    color:white;
    font-size:30px;
  }

如图所示，设置按照column排序，就会先列后行排序：

CSS布局方式---grid布局

有时有些格子大的情况下，会让容器有些地方空出来，占不满容器，空间利用率不高：

  .box{
    width:500px;
    height:480px;
    border:1px solid #000;
    display:grid;
    grid-template-rows:100px 100px 100px;
    grid-template-columns:150px 150px 150px;
    column-gap:10px;
    row-gap:30px;
    grid-auto-flow:row;
    margin:0 auto;
    margin-top:10px;
    color:white;
    font-size:30px;
  }
 .div1{
    grid-column-start:1;
    grid-column-end:3;
    background:red;
  }
 .div2{
    grid-column-start:1;
    grid-column-end:3;
    background:green;
  }

如下图所示，使用grid-auto-flow:row,先行后列排序，由于第一和第二个格子大了，导致第一和第二个格子之间有空间：

CSS布局方式---grid布局

如果想提高空间利用率的话，可以设置dense来提高空间利用率：grid-auto-flow:row dense;

   .box{
      width:500px;
      height:480px;
      border:1px solid #000;
      display:grid;
      grid-template-rows:100px 100px 100px;
      grid-template-columns:150px 150px 150px;
      column-gap:10px;
      row-gap:30px;
      grid-auto-flow:row dense;
      margin:0 auto;
      margin-top:10px;
      color:white;
      font-size:30px;
    }

如下图所示：设置dense之后，将第一个格子和第二个格子之间的空间占满。

CSS布局方式---grid布局

justify-items和align-items属性：

设置单元格的水平和垂直方向对齐方式

水平方向上 justify-items:start|end|center|stretch;

垂直方向上 align-items:start|end|center|stretch;

start 起始方向对齐

center 居中对齐

end 末尾方向对齐

stretch 延伸，以填满整个单元格，默认值

例如设置水平方向末尾对其 justify-items:end; ，垂直方向单元格填满拉伸 align-items:stretch;

.box{
  border:1px solid #000;
  display:grid;
  grid-template-rows:120px 120px 120px;
  grid-template-columns:120px 120px 120px;
  column-gap:10px;
  row-gap:30px;
  justify-items:end;
  align-items:stretch;
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}

CSS布局方式---grid布局

align-items:stretch; 和 justify-items:end; 水平垂直对齐方式可以用简写的方式 place-items:stretch end;，stretch代表垂直方向上的对齐方式，end代表水平方向的对齐方式。

CSS布局方式---grid布局

justify-content 和 align-content属性

设置容器的水平和垂直方向对齐方式

水平方向上 justify-content:start|end|center|stretch|space-around|space-between|space-evenly;

垂直方向上 align-content:start|end|center|stretch|space-around|space-between|space-evenly;

start 从行首开始排列

center 在容器中剧中排列。

end 从行末开始排列

stretch 延伸，以填满整个容器，默认值

space-around 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

space-between 在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐，每行最后一个元素与行尾对齐。

space-evenly 项目与项目之间的距离和项目与起始位置的距离都相同。

例如设置水平方向平分靠两边对齐 justify-content:space-between;，垂直方向居中 align-items:center;

.box{
  border:1px solid #000;
  display:grid;
  grid-template-rows:120px 120px 120px;
  grid-template-columns:120px 120px 120px;
  column-gap:10px;
  row-gap:30px;
  justify-content:space-between;
  align-content:center;
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}

CSS布局方式---grid布局

align-content:center; 和 justify-content:space-between; 水平垂直对齐方式可以用简写的方式 place-content:center space-between; ， center 代表垂直方向上的对齐方式，space-between代表水平方向的对齐方式。

CSS布局方式---grid布局

grid-auto-columns/grid-auto-rows属性

用来设置多出来的项目单元格的宽和高

设置一个三行三列的格子，并且多出第10个没有定义高度的格子，这个格子默认会自动拉满延伸到容器的底部。

    .box{
        border:1px solid #000;
        display:grid;
        width:500px;
        height:520px;
        grid-template-rows:120px 120px 120px;
        grid-template-columns:120px 120px 120px;
        column-gap:10px;
        row-gap:30px;
        margin:0 auto;
        margin-top:10px;
        color:white;
        font-size:30px;
      }

CSS布局方式---grid布局

我们可以设置多出的格子的高度 grid-auto-rows:30px; 如图所示，第10个格子的高度是30px：

CSS布局方式---grid布局

如果排列的方式是先列后行，多出的格子默认是延伸到容器的右侧：

CSS布局方式---grid布局

想设置多出的格子的宽度就需要设置 grid-auto-columns:30px

   .box{
        border:1px solid #000;
        display:grid;
        width:500px;
        height:520px;
        grid-template-rows:120px 120px 120px;
        grid-template-columns:120px 120px 120px;
        column-gap:10px;
        row-gap:30px;
        grid-auto-flow:column;
        grid-auto-columns:30px;
        margin:0 auto;
        margin-top:10px;
        color:white;
        font-size:30px;
    }

如图所示，设置后第10个格子的宽度：

CSS布局方式---grid布局

项目属性

grid-column-start/grid-column-end

grid-row-start/grid-row-end

用来指定item单元格的具体位置，根据在哪根网络线，在项目里设置，如图所示，设置N个列，就有N+1个列网络线，行也是。

CSS布局方式---grid布局

例如设置第一个单元格占两个列格子，占两个行格子，第二个单元格占一个列格子，占两个行格子，紧跟在第一个单元格后面：

  .box{
        border:1px solid #000;
        display:grid;
        width:500px;
        height:520px;
        grid-template-rows:120px 120px 120px;
        grid-template-columns:120px 120px 120px;
        column-gap:10px;
        row-gap:30px;
        margin:0 auto;
        margin-top:10px;
        color:white;
        font-size:30px;
    }
    .div1{
      background:red;
      grid-column-start:1;
      grid-column-end:3;
      grid-row-start:1;
      grid-row-end:3;
    }
    .div2{
      grid-column-start:3;
      grid-column-end:4;
      grid-row-start:1;
      grid-row-end:3;
      background:green;
    }

如图所示，grid-column-start:3;grid-column-end:4;grid-row-start:1;grid-row-end:3; 可以简写为： grid-row:span 2;grid-column:span 1;，也可以简写为： grid-row:1 / 3;grid-column:3 / 4;

CSS布局方式---grid布局

grid-area用来指定item单元格的具体位置，使用时要与容器属性 grid-template-areas 一起使用：

  .box{
        border:1px solid #000;
        display:grid;
        width:500px;
        height:520px;
        grid-template-rows:120px 120px 120px;
        grid-template-columns:120px 120px 120px;
        column-gap:10px;
        row-gap:30px;
        margin:0 auto;
        margin-top:10px;
        color:white;
        font-size:30px;
        grid-template-areas:"a a c"
                     "a a g"
                     "i j k"
                     "m n o";
      }
      .div1{
        grid-area:a;
        background:red;
      }

如图所示，div1设置了单元格放在a区域内，grid-area除了与容器属性 grid-template-areas 一起配合使用外，还可以单独来使用 grid-area:1 / 1 / 3 / 3;，其实和 grid-column-start:1;grid-column-end:3;grid-row-start:1;grid-row-end:3; 一个意思，也可以达到下图效果：

CSS布局方式---grid布局

justify-self/align-self

设置单元格内容的水平垂直位置，和 justify-items、align-items属性的用法完全一致，但只作用于单个项目

水平方向上 justify-self:start|end|center|stretch;

垂直方向上 align-self:start|end|center|stretch;

start 起始方向对齐

center 居中对齐

end末 尾方向对齐

stretch 延伸，以填满整个单元格，默认值

例如设置第一个单元格水平方向居中对齐 justify-self:center;，垂直方向居中对齐 align-self:center;,第二个单元格水平方向末尾对齐 justify-self:center;，垂直方向开头对齐 align-self:center;

.box{
  border:1px solid #000;
  display:grid;
  width:500px;
  height:520px;
  grid-template-rows:120px 120px 120px;
  grid-template-columns:120px 120px 120px;
  column-gap:10px;
  row-gap:30px;
  margin:0 auto;
  margin-top:10px;
  color:white;
  font-size:30px;
}
.div1{
  background:red;
  justify-self:center;
  align-self:center;
}
.div2{
  background:green;
  justify-self:end;
  align-self:start;
}

CSS布局方式---grid布局

align-self:start; 和 justify-self:end; 水平垂直对齐方式可以用简写的方式 place-self:start end; ，start 代表垂直方向上的对齐方式，end 代表水平方向的对齐方式。

转载自:https://juejin.cn/post/7182740342096003130
评论
请登录