栅格布局

56 阅读3分钟

栅格布局

概括

  • 线
    • 语法
  • 区域
    • 语法

划分区域

display: grid;
grid-template-rows: 100px 100px 100px;
grid-template-columns: 100px 100px 100px;

grid-template-rows: repeat(3, 100px); // 3100px

grid-template-rows: repeat(3, 100px 50px); // 100px 50px 交替出现

grid-template-rows: repeat(auto-fill, 100px); // 按照100px, 进行划分填充

grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 60px 1fr 60px;

grid-template-columns: 20% 20%;

间隙

row-gap: 10px; // 行间距10px
column-gap: 10px; // 列间距10px

gap: 20px 10px; // 控制行和列之间的间隙, 前行后列

线控制元素位置

<!-- 先写开始的行和列, 然后写结尾的行和列 -->
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-row-end: 4;

给线取名

grid-template-rows: [r1-start] 100px [r1-end r2-start] 100px [r2-end];
<!-- r1-start 第一行开始的线, r1-end第一行结尾的线 -->

<!-- 使用方式 -->
div:first-child {
  grid-row-start: r1-start;
  grid-column-start: c1-start;
  grid-row-end: r1-end;
  grid-column-end: c1-end;
}

<!-- 使用repeat的情况 -->
grid-template-rows: repeat(3, [r-start] 1fr [r-end]);
grid-template-columns: repeat(3, [c-start] 1fr [c-end]);

div {
  grid-row-start: r-start 1;
  grid-column-start: c-start 1;
}

定义跨度

<!-- 只需要定义开始的位置, 结尾的位置通过跨度来自动计算 -->
.col-7 {
  grid-column-end: span 7;
}

通过区域控制位置

div:first-child {
  grid-area: 1/1/4/4; // 开始行/开始列/结束行/结束列
}

给区域取别名

名字相同的自动合并为一个
.contain {
  grid-template-areas: "header header"
    "nav main"
    "footer footer";
}

<!-- 使用 -->

header {
  grid-area: header;
}

区域命名简写

<!-- 表示前面两行的按照里面的元素, 自动排列, 最后一个元素占两个位置 -->
.con {
  grid-template-areas: ". ."
    ". ."
    "footer footer";
}

对齐方式

.item {
  justify-items: center;
  align-items: end;
  <!-- 缩写 -->
  place-items: center end;

  justify-content: space-evenly;
  align-content: center;
  <!-- 缩写 -->
  place-content: center space-evenly;
}

div:nth-child(4) {
  justify-self: start;
  align-self: center;
  <!-- 缩写 -->
  place-self: center start;

}

终于搞清楚这三者区别

justify-content, justify-items, justify-self;

  1. 前两个是对于盒子的属性, 最后一个是盒子里面元素的属性
  2. justify-content 可以理解为在横向上面切了几刀, 它控制竖着的一条一条的内容的位置
  3. align-content 可以理解为在竖向上面切了几刀, 它控制横着的一条一条的内容的位置
  4. -items 表示元素在最大容器所切的小容器里面的位置
  5. -self 表示单独控制元素在最大容器所切的小容器里面的位置

20220613222344

综合案例

.con >.item >.icon-item >.icon > img ^ span

 .con {
    display: grid;
    width: 100%;
    height: 210px;
    background-color: #ccc;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-content: center;
  }
  .item {
    border: 1px solid #000;
    box-sizing: border-box;
    height: 160px;
  }
  .item:first-child {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .item .icon-item {
    border: 1px solid #000;
    display: grid;
    align-content: center;
    justify-content: center;
    align-items: center;
    justify-items: center;
    gap: 8px;
  }
  .icon-item .icon {
    width: 22px;
    height: 22px;
  }
  .icon img {
    width: 100%;
    height: 100%;
  }

20220614062553

加固了 -content, -items 之间的用法;

  1. 实现如下效果

20220614063716

方法 1:

.con {
  display: grid;
  width: 100%;
  height: 620px;
  background-color: #ccc;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  align-content: center;
  grid-template-areas: "nav . . . ."
  "nav . . . ."
}
.item {
  border: 1px solid #000;
  box-sizing: border-box;
}
.item:first-child {
  display: grid;
  grid-area: nav;
  background-color: #fff;
}

方法 2:

.con {
  display: grid;
  width: 100%;
  height: 620px;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  align-content: center;
}
.item:first-child {
  display: grid;
  grid-area: 1/1/3/2;
}

高级使用

  • 通过封装响应的类, 直接通过写类名来实现所有的布局
  • 类名取名的方式采用, 属性-值的形式, 方便阅读

同样是实现上面的例子

<div class="con dis-g col-5 row-2 gap-20 ac-c">
  <div class="item rend-2"></div>
  <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 class="item">7</div>
  <div class="item">8</div>
</div>

.dis-g {
  display: grid;
}
.col-5 {
  grid-template-columns: repeat(5, 1fr);
}
.row-2 {
  grid-template-rows: repeat(2, 1fr);
}
.gap-20 {
  gap: 20px;
}
.ac-c {
  align-content: center;
}
.rend-2 {
  grid-row-end: span 2;
}

封装的 scss

.dis-g {
  display: grid;
}

@for $i from 1 through 20 {
  .col-#{$i} {
    grid-template-columns: repeat(#{$i}, 1fr);
  }
  .row-#{$i} {
    grid-template-rows: repeat(#{$i}, 1fr);
  }
  .gap-#{$i} {
    gap: 1px * #{$i};
  }
  .gre-#{$i} {
    grid-row-end: span #{$i};
  }
  .gce-#{$i} {
    grid-column-end: span #{$i};
  }
}
.ac-c {
  align-content: center;
}
.jc-c {
  justify-content: center;
}
.ai-c {
  align-items: center;
}
.ji-c {
  justify-items: center;
}

总结

  1. grid-row-end 可以比较方便的用于项目的封装使用
  2. 类名的命名方式得统一

兼容性

ie11 不行, 除了 ie 支持都比较高