L

LebronJames

V1

2022/04/29阅读:43主题:绿意

CSS Grid

术语

Grid Container

栅格容器是栅格项(Grid Items)的父级元素,也就是需要定义 display: grid; 的那个元素。

.grid-container {
  display: grid;
}
<div class="grid-container">
  <div class="item item-1">1</div>
  <div class="item item-2">2</div>
  <div class="item item-3">
    <p>3</p>
  </div>
  <div class="item item-4">4</div>
</div>

Grid Item

Item 是 Grid 的直接子元素,注意直接这两个字,因此上面代码示例中 class 为 item-3 的元素是 Item,而里面的p标签则不是。

Grid Line

栅格线是构成网格结构的分界线:垂直的叫做列栅格线(column grid lines),水平的叫做行栅格线(row grid lines),栅格线的概念很重要,后面定义grid-column和grid-row都会直接用到栅格线的概念,如图

Grid Track

任意两条线之间的空间就叫做轨道(Track),下图为 row 轨道。

grid-template-columns

定义每一列的列宽

grid-template-rows

定义每一行的行高。

grid-gap

定义 rows 和 columns 的间距

.grid-container {
  display: grid;
  grid-template-columns100px 100px 100px;
  grid-template-rows100px 100px 100px;
  /* grid-template-columns: repeat(3, 100px);
  grid-template-rows: repeat(3, 100px); */

  grid-gap20px 20px
  /* grid-gap: 20px; */
}
.grid-container {
  display: grid;
  grid-template-columns50px repeat(2100px80px;
  grid-template-rows50px 100px 80px;
  grid-gap20px;
}

grid-column-start / grid-column-end

.grid-container {
  display: grid;
  grid-template-columnsrepeat(3100px);
  grid-template-rowsrepeat(4100px);
  grid-gap20px;
}
.operator {
  grid-column-start1;
  grid-column-end3;
  /* grid-column: 1/ 3; */
}
<div class="grid-container">
  <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 class="item">9</div>
  <div class="item operator">
    <div>+</div>
    <div>=</div>
  </div>
  <div class="item">0</div>
</div>

grid-row-start / grid-row-end

.operator {
  grid-row-start1;
  grid-row-end3;
  /* grid-row: 1 / 3; */
}

grid-auto-column / grid-auto-row

.grid-container {
  display: grid;
  grid-template-columnsrepeat(440px);
  grid-template-rowsrepeat(240px);
  grid-auto-columns100px;
  grid-auto-rows100px;
}
.item-5 {
  grid-column5 / 6;
  grid-row3 / 4;
  background-color#29ffc6;
}

grid-template-areas

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "aside content content"
    "footer footer footer";
  grid-gap20px;
}
.item-1 {
  grid-area: header;
}
.item-2 {
  grid-area: aside;
}
.item-3 {
  grid-area: content;
}
.item-4 {
  grid-area: footer;
}
.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "aside . content"
    "footer footer footer";
}

grid-area

这个属性可以用作 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的缩写。

.item-1 {
  grid-area1 / 1 / 3 / 3;
  /* <row-start> / <column-start> / <row-end> / <column-end>; */
}

分类:

前端

标签:

CSS

作者介绍

L
LebronJames
V1