关于前端:栅格布局

栅格布局

概括

• 线

  • 语法

• 区域

  • 语法

划分区域

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

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

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 示意独自管制元素在最大容器所切的小容器外面的地位

综合案例

1.

.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%;
  }

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

2. 实现如下成果

办法 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 反对都比拟高

欢送拜访 集体博客