CSS Grid布局(笔记)_grid-template-rows repeat

Grid 布局

容器 display: grid;

display: grid; 此定义为块级元素
display: inline-grid; 此定义为行级元素

display: grid;
display: inline-grid;
1
2

grid-template-columns(列)和grid-template-rows(行)

grid-template-columns 列

// 设置列，参数个数为列的数量，每个值为对应的列宽
grid-template-columns: 100px 200px 300px;

// 设置行，参数个数为行的数量，每个值为对应行的高
grid-template-rows: 50px 50px;
1
2
3
4
5

ps以上定义为3列2行,列宽为 100px 200px 300px，行高为 50px 50px

repeat() 函数

可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。比如上面行高都是一样的，我们可以这么去实现，实际效果是一模一样的

grid-template-rows: 50px 50px;
grid-template-rows: repeat(2, 50px); //repeat函数，第一个值为行的个数，第二个值为每行的高度
1
2

auto-fill 关键字 (自动填充)

auto-fill表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格

// 以下表示列为自动填充，每个为200px
grid-template-columns: repeat(auto-fill,200px);
1
2

fr 关键字(等分控制)

fr 单位代表网格容器中可用空间的一等份
和flex相同原理

// 表示第一个列宽设置为 200px，后面剩余的宽度分为两部分
template-columns: 200px 1fr 2fr;
1
2

ps1fr等同于flex:1; 2fr等同于flex:2;

minmax() 函数 (控制最大最小)

我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围

它接受两个参数，分别为最小值和最大值。

// 第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
1
2

auto 关键字

// 表示第一第三列为 100px，中间由浏览器决定长度
grid-template-columns: 100px auto 100px;
1
2

row-gap、column-gap、gap (间距)

设置网格间距
row-gap设置行间距

column-gap设置列间距

gap简写属性 第一个参数为行间距 第二个参数为列间距 可写一个参数，一个参数则就是行间距和列间距相同

row-gap: 10px;
column-gap: 20px;
// 效果一样
gap: 10px 20px;
1
2
3
4

grid-template-areas & grid-area (自定义布局)

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

// 空着的需用`.`代替
grid-template-areas:
            "a a ."
            "a a ."
            ". b c";
1
2
3
4
5

---

实例

<section id="page">
  <header>Header</header>
  <nav>Navigation</nav>
  <main>Main area</main>
  <footer>Footer</footer>
</section>
1
2
3
4
5
6

#page {
  display: grid; /* 1.设置 display 为 grid */
  width: 100%;
  height: 250px;
  grid-template-areas: "head head"
                       "nav  main"
                       "nav  foot"; /* 2.区域划分 当前为 三行 两列 */
  grid-template-rows: 50px 1fr 30px; /* 3.各区域 宽高设置 */
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head; /* 4. 指定当前元素所在的区域位置，从 grid-template-areas 选取值 */
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

grid-auto-flow (自动布局)

grid-auto-flow 属性控制着自动布局算法怎样运作，精确指定在网格中被自动布局的元素怎样排列。

---

关键字

1. row

   该关键字指定自动布局算法按照通过逐行填充来排列元素，在必要时增加新行。如果既没有指定row也没有column,则默认为row

2. column

   该关键字指定自动布局算法通过逐列填充来排列元素，在必要时添加新列

3. dense

   该关键字指定自动布局算法使用一种“稠密”堆积算法，如果后面出现了稍小的元素，则会试图去填充网格中前面留下的空白。

justify-items、align-items、place-items (控制布局)

justify-items 控制水平布局

• stretch 默认值 相当于块级
• center 水平居中
• start 靠左对齐
• end 靠右对齐

align-items 控制垂直布局

• stretch 默认值
• center 垂直居中
• start 上
• end 下

place-items 简写属性 第一个参数为垂直，第二个为水平

justify-content、align-content、place-content

同flex布局

• start
• end
• center
• space-around 每个元素周围分配相同的空间
• space-between 首个元素放置于起点，末尾元素放置于终点
• space-evenly 每个元素之间的间隔相等

grid-auto-columns、grid-auto-rows

如果一个表格项目被定位在没有使用 grid-template-columns 显式指定尺寸的列中，隐式的 grid 轨道就会被创建出来支撑它。

grid-template-columns 属性和 grid-template-rows 属性只是指定了两行两列，但实际有九个元素，就会产生隐式网格。通过 grid-auto-rows 可以指定隐式网格的行高为 50px

grid-column-start、grid-column-end、grid-column

grid-column 简写属性 (水平方向)

grid-row-start、grid-row-end、grid-row
grid-row 垂直方向

以上的缩写(上下左右)
grid-area

用于指定网格项目的大小和位置{ 通过为它的网格位置贡献线条，跨度或不添加任何内容（自动），从而指定其 grid area。

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

设置单元格内容的位置

justify-self(左中右)

align-self(上中下)

• stretch
• center
• start
• end