weblog

Appearance

grid 二维网格布局系统 （速查） ​

参考

css布局依次经历过

table -> float 浮动盒 -> Flexbox 弹性盒子 -> gird 二维网格

相对于 Flexbox 主要应用在一维布局（单一方向排列子元素）， Grid是一个二维布局系统 适合用于创建复杂的页面布局

1. 基本概念 ​

容器和项目：通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器。

一旦这样做，这个元素的所有直系子元素将成为网格项目 或者叫 网格单元

划分网格的线，称为网格线, 一般而言，是从左到右，从上到下，1，2，3 进行编号排序, 或者从右下角按照 -1，-2，-3...顺序进行编号排序

grid-template-columns 网格中的行

grid-template-rows 属性来定义网格中的列

html
<div class="wrapper">
  <div class="one item">1</div>
  <div class="two item">2</div>
  <div class="three item">3</div>
  <div class="four item">4</div>
  <div class="five item">5</div>
  <div class="six item">6</div>
</div>
css
.wrapper {
  margin: 60px;
  /* 声明一个容器 */
  display: grid;
  /*  声明列的宽度  */
  grid-template-columns: repeat(3, 200px);
  /*  声明行间距和列间距  */
  grid-gap: 20px;
  /*  声明行的高度  */
  grid-template-rows: 100px 200px;
}
.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}
1
2
3
4
5
6

2. 容器属性 ​

2.1 display 属性 ​

通过在元素上声明 display：grid 或 display：inline-grid 来创建一个网格容器

css
.wrapper {
  display: grid;
}

2.2 grid-template-columns 和 grid-template-rows ​

grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高，

  • 示例1
css
.wrapper {
  display: grid;
  /*  声明了三列，宽度分别为 200px 100px 200px */
  grid-template-columns: 200px 100px 200px;
  grid-gap: 5px;
  /*  声明了两行，行高分别为 50px 50px  */
  grid-template-rows: 50px 50px;
}
1
2
3
4
5
6
  • 示例2

fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份

css
.wrapper {
  display: grid;
  grid-gap: 20px; /*  声明行间距和列间距  */

  height: 300px;
  width: 300px;
  
  grid-template-columns: 1fr 2fr 100px  /* 指定 3 列*/
  grid-template-rows: 1fr 1fr; /* 指定 2行 */
}
1
2
3
4
5
6
  • 示例3

repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

css
.wrapper {
  display: grid;
  grid-gap: 20px; /*  声明行间距和列间距  */

  grid-template-columns: repeat(3, 100px); /* 3列，每列100px */
  grid-template-rows: repeat(2, 50px); /* 2行，每行高度50px */
}
1
2
3
4
5
6
  • 示例4

auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格。 grid-template-columns: repeat(auto-fill, 100px) 表示列宽是 100 px，但列的数量是不固定的，只要浏览器能够容纳得下，就可以放置元素，代码以及效果如下图所示：

css
.wrapper {
  display: grid;
  grid-gap: 20px; /*  声明行间距和列间距  */

  grid-template-columns: repeat(auto-fill, 100px);; /* 3列，每列100px */
  grid-template-rows: repeat(2, 50px); /* 2行，每行高度50px */
}
1
2
3
4
5
6
  • 示例5

minmax()函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-template-columns: 1fr 1fr minmax(300px, 2fr) 的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。代码以及效果如下：

css
.wrapper {
  display: grid;
  grid-gap: 20px; /*  声明行间距和列间距  */

  grid-template-columns: 1fr 1fr minmax(300px, 2fr);
  grid-auto-rows: 50px;
}
1
2
3
4
5
6
  • 示例6

auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度，代码以及效果如下：

css
.wrapper {
  display: grid;
  grid-gap: 20px; /*  声明行间距和列间距  */

  grid-template-columns: 100px auto 100px;
  grid-auto-rows: 50px;
}
1
2
3
4
5
6

2.3 grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性 ​

grid-row-gap 属性、grid-column-gap 属性分别设置行间距和列间距。 grid-gap 属性是两者的简写形式。

grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。 grid-gap: 10px 20px 实现的效果是一样的

2.4 grid-template-areas 属性 ​

grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成

html
<div class="wrapper">
  <div class="one item">1</div>
  <div class="two item">2</div>
  <div class="three item">3</div>
  <div class="four item">4</div>
  <div class="five item">5</div>
  <div class="six item">6</div>
</div>
css
.wrapper {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: 100px auto 100px;
  grid-auto-rows: 50px;

  grid-template-areas:
    "three one  four"
    "five six two";
}

.one {
  background: #19CAAD;
  grid-area: one;
}

.two {
  background: #8CC7B5;
  grid-area: two;
}

.three {
  background: #D1BA74;
  grid-area: three;
}

.four {
  background: #BEE7E9;
  grid-area: four;
}

.five {
  background: #E6CEAC;
  grid-area: five;
}

.six {
  background: #ECAD9E;
  grid-area: six;
}

.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}
1
2
3
4
5
6

2.5 grid-auto-flow 属性 ​

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。 默认的放置顺序是"先行后列"，即先填满第一行，再开始放入第二行，即下图英文数字的顺序 one,two,three...。 这个顺序由 grid-auto-flow 属性决定，默认值是 row。

2.6 justify-items 属性、align-items 属性以及 place-items 属性 ​

justify-items 属性设置单元格内容的水平位置（左中右）

align-items 属性设置单元格的垂直位置（上中下）

place-items 水平和垂直居中

值：

  • start 起始
  • end 结束
  • center 居中
  • stretch 伸展 [默认]
html
<div class="wrapper">
  <div class="one item">1</div>
  <div class="two item">2</div>
  <div class="three item">3</div>
  <div class="four item">4</div>
  <div class="five item">5</div>
  <div class="six item">6</div>
</div>
css
p{
  margin-top: 50px;
}
.wrapper, .wrapper-1, .wrapper-2, .wrapper-3 {
  display: grid;
  grid-template-columns: 100px 200px 100px;
  grid-gap: 5px;
  grid-auto-rows: 50px;
  justify-items: start;
}
.wrapper-1 {
  justify-items: end;
}
.wrapper-2 {
  justify-items: center;
}
.wrapper-3 {
  justify-items: stretch;
}

.one {
  background: #19CAAD;
}
.two { 
  background: #8CC7B5;
}
.three {
  background: #D1BA74;
}
.four {
  background: #BEE7E9;
}
.five {
  background: #E6CEAC;
}
.six {
  background: #ECAD9E;
}
.item {
  text-align: center;
  font-size: 200%;
  color: #fff;
}

wrapper

1
2
3
4
5
6

wrapper-1

1
2
3
4
5
6

wrapper-2

1
2
3
4
5
6

wrapper-3

1
2
3
4
5
6

2.7 grid-auto-columns 属性和 grid-auto-rows 属性 ​

  • 显示网格 用于处理 超出 grid-template-columns 和 grid-template-rows 属性处理范围的单元格

如 下面代码4个单元格，

css
grid-template-columns: 200px 100px;
grid-template-rows: 100px 100px;
  • 隐式网格 超出的为
css
grid-auto-columns: 50px;
grid-auto-rows: 50px;
1
2
3
4
5
6

3. 项目属性 ​

3.1 grid-column-start 属性、grid-column-end 属性、grid-row-start 属性以及grid-row-end 属性 ​

用来控制单元格的大小，和位置

  • grid-column-start 属性：左边框所在的垂直网格线
  • grid-column-end 属性：右边框所在的垂直网格线
  • grid-row-start 属性：上边框所在的水平网格线
  • grid-row-end 属性：下边框所在的水平网格线
1
2
3
4
5
6
ef5d192b1f1aabaf9a1604f097809402.webp

3.2 justify-self 属性、align-self 属性以及 place-self 属性 ​

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致，但只作用于单个项目

align-self 属性设置单元格内容的垂直位置（上中下），跟align-items属性的用法完全一致，也是只作用于单个项目

place-self

end ​

grid 功能强大， 要背的比较多，本文用于速查

京ICP备2024093538号-1

自用笔记本