栅格布局

概括

  • 线

    • 语法

  • 区域

    • 语法

划分区域

display: grid;grid-template-rows: 100px 100px 100px;grid-template-columns: 100px 100px 100px;grid-template-rows: repeat(3, 100px); // 3 个 100pxgrid-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; // 行间距10pxcolumn-gap: 10px; // 列间距10pxgap: 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 之间的用法;

  1. 实现如下成果

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

欢送拜访 集体博客