CSS Grid 布局完全指南

最新推荐文章于 2024-09-05 11:30:24 发布

扶苏1002

最新推荐文章于 2024-09-05 11:30:24 发布

阅读量195

点赞数 1

分类专栏： CSS2+CSS3 文章标签： css 前端

本文链接：https://blog.csdn.net/qq_44741577/article/details/141866808

版权

CSS2+CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、重要术语

在深入了解 Grid 的概念之前，理解术语是很重要的。由于这里涉及的术语在概念上都很相似，如果不先记住 Grid 规范定义的含义，很容易混淆它们。但是别担心，术语并不多。

1.1. 网格容器(Grid Container)

应用 display: grid 的元素。这是所有网格项（grid item）的直接父级元素。在这个例子中，container就是 网格容器(Grid Container)。

.container {
  display: grid;
}

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
</div>

1.2. 网格项(Grid Item)

网格容器（Grid Container）的子元素（例如直接子元素）。这里item元素就是网格项(Grid Item)，但是 sub-item 不是。

<div class="container">
  <div class="item"></div>
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

1.3. 网格线(Grid Line)

构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。例如，这里的黄线就是一条列网格线。

在这里插入图片描述

1.4. 网格轨道(Grid Track)

两条相邻网格线之间的空间。你可以把它们想象成网格的列或行。下图是第二条和第三条行网格线之间的网格轨道(Grid Track)。

在这里插入图片描述

1.5. 网格单元格(Grid Cell)

两个相邻的行和两个相邻的列网格线之间的空间。这是 Grid(网格) 系统的一个“单元”。下图是第 1 至第 2 条行网格线和第 2 至第 3 条列网格线交汇构成的网格单元格(Grid Cell)。

在这里插入图片描述

1.6. 网格区域(Grid Area)

4条网格线包围的总空间。一个网格区域(Grid Area) 可以由任意数量的网格单元格(Grid Cell) 组成。下图是行网格线1和3，以及列网格线1和3 之间的网格区域。

在这里插入图片描述

二、Grid(网格容器) 属性目录

display
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
justify-items
align-items
place-items
justify-content
align-content
place-content
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

2.1. display

将元素定义为网格容器，并为其内容建立新的网格格式上下文。

值：

grid ：生成一个块级网格
inline-grid ：生成一个内联网格

.container {
  display: grid | inline-grid;
}

2.2. grid-template-columns / grid-template-rows

使用空格分隔的值列表，用来定义网格的列和行。这些值表示网格轨道(Grid Track) 大小，它们之间的空格表示网格线。

值：

– <track-size>：可以是长度值，百分比，或者等份网格容器中可用空间（使用 fr 单位）
– <line-name>：你可以选择的任意名称

.container {
  grid-template-columns:
    <track-size> ... |
    <line-name> <track-size> ...;

  grid-template-rows:
    <track-size> ... |
    <line-name> <track-size> ...;
}

当你在网格轨道(Grid Track) 值之间留出空格时，网格线会自动分配正数和负数名称：

.container {
  grid-template-columns: 40px 50px auto 50px 40px;
  grid-template-rows: 25% 100px auto;
}

在这里插入图片描述

但是你可以明确的指定网格线(Grid Line)名称，例如<line-name>值。请注意网格线名称的括号语法：

.container {
   grid-template-columns:
     [first] 40px [line2] 50px
     [line3] auto [col4-start] 50px [five] 40px [end];

   grid-template-rows:
     [row1-start] 25% [row1-end] 100px
     [third-line] auto [last-line];
 }

在这里插入图片描述
请注意，一条网格线(Grid Line)可以有多个名称。例如，这里的第二条行网格线(row grid lines) 将有两个名字：row1-end 和 row2-start ：

.container {
  grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end];
}

如果你的定义包含多个重复值，则可以使用 repeat() 表示法来简化定义：

.container {
  grid-template-columns: repeat(3, 20px [col-start]);
}

上面的代码等价于：

.container {
  grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start];
}

如果多行共享相同的名称，则可以通过其网格线名称和计数来引用它们。

CSS 代码:

.item {
  grid-column-start: col-start 2;
}

fr 单元允许你用等分网格容器剩余可用空间来设置网格轨道(Grid Track) 的大小。例如，下面的代码会将每个网格项设置为网格容器宽度的三分之一：

.container {
  grid-template-columns: 1fr 1fr 1fr;
}

剩余可用空间是除去所有非灵活网格项之后计算得到的。在这个例子中，可用空间总量减去 50px 后，再给 fr 单元的值 3 等分：

.container {
  grid-template-columns: 1fr 50px 1fr 1fr;
}

2.3. grid-template-areas

通过引用 grid-area 属性指定的网格区域(Grid Area) 名称来定义网格模板。重复网格区域的名称导致内容跨越这些单元格。一个点号（.）代表一个空单元格。这个语法本身可视作网格的可视化结构。

值：

<grid-area-name>：由网格项的 grid-area 指定的网格区域名称
.（点号）：代表一个空的网格单元
none：不定义网格区域

.container {
  grid-template-areas:
    "<grid-area-name> | . | none | ..."
    "...";
}

示例

.container {
  grid-template-columns: 50px 50px 50px 50px;
  grid-template-rows: auto;
  grid-template-areas:
    "header header header header"
    "main main . sidebar"
    "footer footer footer footer";
}
.item-a {
  grid-area: header;
}
.item-b {
  grid-area: main;
}
.item-c {
  grid-area: sidebar;
}
.item-d {
  grid-area: footer;
}

上面的代码将创建一个 4 列宽 3 行高的网格。整个顶行将由 header 区域组成。中间一排将由两个 main 区域，一个是空单元格，一个 sidebar 区域组成。最后一行全是 footer 区域组成。

在这里插入图片描述

你的声明中的每一行都需要有相同数量的单元格。

你可以使用任意数量的相邻的点. 来声明单个空单元格。只要这些点.之间没有空隙隔开，他们就代表一个单独的单元格。

注意你不能用这个语法来命名网格线，只是命名网格区域。当你使用这种语法时，区域两端的网格线实际上会自动命名。如果你的网格区域的名字是 foo，该区域的起始行网格线和起始列网格线的名称将为 foo-start，而最后一条行网格线和最后一条列网格线的名称将为 foo-end。这意味着某些网格线可能有多个名字，如上例中最左边的网格线，它将有三个名称：header-start，main-start 和 footer-start 。

2.4. grid-template

用于定义 grid-template-rows ，grid-template-columns ，grid-template-areas 简写属性。

值：

none：将所有三个属性设置为其初始值
<grid-template-rows> / <grid-template-columns>：将 grid-template-columns 和 grid-template-rows 设置为相应地特定的值，并且设置grid-template-areas为none

.container {
  grid-template: none | <grid-template-rows> / <grid-template-columns>;
}

这个属性也接受一个更复杂但非常方便的语法来指定三个上诉属性。这里有一个例子：

.container {
  grid-template:
    [row1-start] "header header header" 25px [row1-end]
    [row2-start] "footer footer footer" 25px [row2-end]
    / auto 50px auto;
}

等价于：

.container {
  grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;
  grid-template-areas: 
    "header header header" 
    "footer footer footer";
}

由于 grid-template 不会重置隐式网格属性（grid-auto-columns， grid-auto-rows，和 grid-auto-flow），
这可能是你想在大多数情况下做的，建议使用 grid 属性而不是 grid-template。

2.5. grid-column-gap / grid-row-gap

指定网格线(grid lines)的大小。你可以把它想象为设置列/行之间间距的宽度。

值：

<line-size> ：长度值

.container {
  grid-column-gap: <line-size>;
  grid-row-gap: <line-size>;
}

示例：

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-column-gap: 10px;
  grid-row-gap: 15px;
}

在这里插入图片描述

只能在列/行之间创建间距，网格外部边缘不会有这个间距。

注意：这两个属性将删除 grid- 前缀，就是将 grid-column-gap 和 grid-row-gap重命名为 column-gap和 row-gap。 Chrome 68+，Safari 11.2 Release 50+ 和Opera 54+ 已经支持无前缀的属性。

2.6. grid-gap

grid-column-gap 和 grid-row-gap 的简写语法

值：

<grid-row-gap> <grid-column-gap>：长度值

.container {
  grid-gap: <grid-row-gap> <grid-column-gap>;
}

示例：

.container {
  grid-template-columns: 100px 50px 100px;
  grid-template-rows: 80px auto 80px; 
  grid-gap: 15px 10px;
}

如果grid-row-gap没有定义，那么就会被设置为等同于 grid-column-gap 的值。例如下面的代码是等价的：

.container{
  /* 设置 grid-column-gap 和 grid-row-gap */  
  grid-column-gap: 10px;
  grid-row-gap: 10px; 
  /* 等价于 */  
  grid-gap: 10px 10px;
  /* 等价于 */  
  grid-gap: 10px;
}

注意：这个属性将删除 grid- 前缀，就是将grid-gap重命名为 gap。 Chrome 68+，Safari 11.2 Release 50+ 和Opera 54+ 已经支持无前缀的属性。

2.8. justify-items

沿着 inline（行）轴线对齐网格项(grid items)（相反的属性是 align-items 沿着 block（列）轴线对齐）。此值适用于容器内的所有网格项。

值：

start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐）
end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐）
center：将网格项对齐到其单元格的水平中间位置（水平居中对齐）
stretch：填满单元格的宽度（默认值）

.container {
  justify-items: start | end | center | stretch;
}

示例：

.container {
  justify-items: start;
}

在这里插入图片描述

.container{
  justify-items: end;
}

在这里插入图片描述

.container{
  justify-items: stretch;
}

在这里插入图片描述

.container{
  justify-items: center;
}

在这里插入图片描述

.container{
  justify-items: end;
}

在这里插入图片描述

2.9. align-items

沿着列轴对齐grid item 里的内容（与之对应的是使用 justify-items 设置沿着行轴对齐），该值适用于容器内的所有 grid items。

值：
start: 内容与网格区域的顶端对齐
end: 内容与网格区域的底部对齐
center: 内容位于网格区域的垂直中心位置
stretch: 内容高度占据整个网格区域空间(这是默认值)

.container {
  align-items: start | end | center | stretch;
}

.container {
  align-items: start;
}

在这里插入图片描述

.container {
  align-items: end;
}

在这里插入图片描述

.container {
  align-items: center;
}

在这里插入图片描述

.container {
  align-items: stretch;
}

在这里插入图片描述

这些行为也可以通过每个单独网格项(grid items) 的 align-self 属性设置。

2.10. place-items

place-items 是设置 align-items 和 justify-items 的简写形式。

值：
<align-items> <justify-items>：第一个值设置 align-items 属性，第二个值设置 justify-items属性。如果省略第二个值，则将第一个值同时分配给这两个属性。
除 Edge 之外的所有主要浏览器都支持 place-items 简写属性。
有关更多详细信息，请参阅align-items 和 justify-items。

2.11. justify-content

有时，你的网格合计大小可能小于其网格容器(grid container) 大小。如果你的所有网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。

在这种情况下，您可以设置网格容器内的网格的对齐方式。此属性沿着 inline（行）轴线对齐网格（相反的属性是 align-content ，沿着 block（列）轴线对齐网格）。

值：

start：将网格对齐到网格容器(grid container) 的左侧起始边缘（左侧对齐）
end：将网格对齐到网格容器的右侧结束边缘（右侧对齐）
center：将网格对齐到网格容器的水平中间位置（水平居中对齐）
stretch：调整网格项(grid items) 的宽度，允许该网格填充满整个网格容器的宽度
space-around：在每个网格项之间放置一个均匀的空间，左右两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，左右两端没有空间
space-evenly：在每个网格项目之间放置一个均匀的空间，左右两端放置一个均匀的空间

.container {
  justify-content: start;
}

在这里插入图片描述

.container {
  justify-content: end;
}

在这里插入图片描述

.container {
  justify-content: center;
}

在这里插入图片描述

.container {
  justify-content: stretch;
}

在这里插入图片描述

.container {
  justify-content: space-around;
}

在这里插入图片描述

.container {
  justify-content: space-between;
}

在这里插入图片描述

.container {
  justify-content: space-evenly;
}

在这里插入图片描述

2.11. align-content

有时，你的网格合计大小可能小于其网格容器(grid container) 大小。如果你的所有网格项(grid items) 都使用像 px 这样的非灵活单位设置大小，就可能出现这种情况。

在这种情况下，您可以设置网格容器内的网格的对齐方式。此属性沿着 block（列）轴线对齐网格（相反的属性是 justify-content ，沿着 inline（行）轴线对齐网格）。

值：

start：将网格对齐到网格容器(grid container) 的顶部起始边缘（顶部对齐）
end：将网格对齐到网格容器的底部结束边缘（底部对齐）
center：将网格对齐到网格容器的垂直中间位置（垂直居中对齐）
stretch：调整网格项(grid items) 的高度，允许该网格填充满整个网格容器的高度
space-around：在每个网格项之间放置一个均匀的空间，上下两端放置一半的空间
space-between：在每个网格项之间放置一个均匀的空间，上下两端没有空间
space-evenly：在每个网格项目之间放置一个均匀的空间，上下两端放置一个均匀的空间

.container {
  align-content: start; 
}

在这里插入图片描述

.container {
  align-content: end;   
}

在这里插入图片描述

.container {
  align-content: center;    
}

在这里插入图片描述

.container {
  align-content: stretch;   
}

在这里插入图片描述

.container {
  align-content: space-around;  
}

在这里插入图片描述

.container {
  align-content: space-between; 
}

在这里插入图片描述

.container {
  align-content: space-evenly;  
}

在这里插入图片描述

2.12. place-content

place-content 是设置 align-content 和 justify-content 的简写形式。

值：

<align-content> <justify-content>：第一个值设置align-content属性，第二个值设置justify-content属性。如果省略第二个值，则将第一个值同时分配给这两个属性。

除 Edge 之外的所有主要浏览器都支持 place-content 简写属性。

有关更多详细信息，请参阅align-content 和 justify-content。

2.13. grid-auto-columns / grid-auto-rows

指定任何自动生成的网格轨道(grid tracks)（又名隐式网格轨道）的大小。当网格中的网格项多于单元格时，或者当网格项位于显式网格之外时，就会创建隐式轨道。（参见显式网格和隐式网格之间的区别）

值：

<track-size>：可以是长度值，百分比，或者等份网格容器中可用空间的分数（使用 fr 单位）

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px
}

在这里插入图片描述

这将生成了一个 2×2 的网格。

但现在想象一下，你使用 grid-column 和 grid-row 来定位你的网格项，像这样：

.item-a {

  grid-column: 1 / 2;

  grid-row: 2 / 3;

}

.item-b {

  grid-column: 5 / 6;

  grid-row: 2 / 3;

}

在这里插入图片描述

我们告诉 .item-b 从第 5 条列网格线开始到第 6 条列网格线结束，但我们从来没有定义过第5 或第6 列网格线。
因为我们引用的网格线不存在，所以创建宽度为 0 的隐式网格轨道以填补空缺。我们可以使用 grid-auto-columns 和 grid-auto-rows 来指定这些隐式轨道的大小：

.container {
  grid-auto-columns: 60px;
}

在这里插入图片描述

2.14. grid-auto-flow

如果你有一些没有明确放置在网格上的网格项(grid items)，自动放置算法会自动放置这些网格项。该属性控制自动布局算法如何工作。

值：

row：告诉自动布局算法依次填充每行，根据需要添加新行（默认）
column：告诉自动布局算法依次填入每列，根据需要添加新列
dense：告诉自动布局算法在稍后出现较小的网格项时，尝试填充网格中较早的空缺

.container {
  grid-auto-flow: row | column | row dense | column dense
}

考虑以下 HTML :

HTML 代码:

<section class="container">
  <div class="item-a">item-a</div>
  <div class="item-b">item-b</div>
  <div class="item-c">item-c</div>
  <div class="item-d">item-d</div>
  <div class="item-e">item-e</div>
</section>

你定义一个有 5 列和 2 行的网格，并将 grid-auto-flow 设置为 row（也就是默认值）：

container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: row;
}

将网格项放在网格上时，只能为其中的两个指定位置：

.item-a {

  grid-column: 1;

  grid-row: 1 / 3;

}

.item-e {

  grid-column: 5;

  grid-row: 1 / 3;

}

因为我们把 grid-auto-flow 设成了 row ，所以我们的网格看起来会是这样。注意我们没有进行定位的网格项（item-b，item-c，item-d）会这样排列在可用的行中：

在这里插入图片描述

相反地，如果我们把 grid-auto-flow 设成了 column ，那么 item-b，item-c，item-d 会沿着列向下排列：

.container {
  display: grid;
  grid-template-columns: 60px 60px 60px 60px 60px;
  grid-template-rows: 30px 30px;
  grid-auto-flow: column;
}

在这里插入图片描述

2.15. grid

在一个声明中设置所有以下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow 。（注意：您只能在单个网格声明中指定显式或隐式网格属性）。
none：将所有子属性设置为其初始值。
<grid-template>：与grid-template 简写的工作方式相同。
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? ：将grid-template-rows设置为指定的值。如果 auto-flow 关键字位于斜杠的右侧，则会将 grid-auto-flow 设置为 column。如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 算法。如果省略 grid-auto-columns，则将其设置为 auto。
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>：将 grid-template-columns 设置为指定值。如果 auto-flow 关键字位于斜杠的左侧，则会将grid-auto-flow 设置为 row 。如果另外指定了 dense 关键字，则自动放置算法使用 “dense” 打包算法。如果省略 grid-auto-rows ，则将其设置为 auto。

以下两个代码块是等效的：

.container {
  grid: 100px 300px / 3fr 1fr;
}

.container {
  grid-template-rows: 100px 300px;
  grid-template-columns: 3fr 1fr;
}

以下两个代码块是等效的：

.container {
  grid: auto-flow / 200px 1fr;
}

.container {
  grid-auto-flow: row;
  grid-template-columns: 200px 1fr;
}

以下两个代码块是等效的：

.container {

  grid: auto-flow dense 100px / 1fr 2fr;

}

.container {
  grid-auto-flow: row dense;
  grid-auto-rows: 100px;
  grid-template-columns: 1fr 2fr;
}

以下两个代码块是等效的：

.container {
  grid: 100px 300px / auto-flow 200px;
}

.container {
  grid-template-rows: 100px 300px;
  grid-auto-flow: column;
  grid-auto-columns: 200px;
}

它也接受一个更复杂但相当方便的语法来一次设置所有内容。您可以指定 grid-template-areas，grid-template-rows和grid-template-columns，并所有其他的子属性都被设置为它们的初始值。这么做可以在它们网格区域内相应地指定网格线名字和网格轨道的大小。用最简单的例子来描述：

.container {
  grid: [row1-start] "header header header" 1fr [row1-end]
        [row2-start] "footer footer footer" 25px [row2-end]
        / auto 50px auto;
}

等价于：

.container {
  grid-template-areas: 
    "header header header"
    "footer footer footer";
  grid-template-rows: [row1-start] 1fr [row1-end row2-start] 25px [row2-end];
  grid-template-columns: auto 50px auto;    
}

三、网格项(Grid Items) 属性

grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
place-self

3.1. grid-column-start / grid-column-end / grid-row-start / grid-row-end

通过引用特定网格线(grid lines) 来确定网格项(grid item) 在网格内的位置。 grid-column-start / grid-row-start 是网格项开始的网格线，grid-column-end / grid-row-end 是网格项结束的网格线。

<line> ：可以是一个数字引用一个编号的网格线，或者一个名字来引用一个命名的网格线
span <number> ：该网格项将跨越所提供的网格轨道数量
span <name> ：该网格项将跨越到它与提供的名称位置
auto：表示自动放置，自动跨度，默认会扩展一个网格轨道的宽度或者高度

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto
  grid-column-end: <number> | <name> | span <number> | span <name> | auto
  grid-row-start: <number> | <name> | span <number> | span <name> | auto
  grid-row-end: <number> | <name> | span <number> | span <name> | auto
}

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start
  grid-row-end: 3;
}

在这里插入图片描述

.item-b {

  grid-column-start: 1;

  grid-column-end: span col4-start;

  grid-row-start: 2

  grid-row-end: span 2

}

在这里插入图片描述
如果没有声明指定 grid-column-end / grid-row-end，默认情况下，该网格项将占据 1 个轨道。

项目可以相互重叠。您可以使用 z-index 来控制它们的重叠顺序。

3.2. grid-column / grid-row

分别为 grid-column-start + grid-column-end 和 grid-row-start + grid-row-end 的简写形式。

值：
<start-line> / <end-line>：每个网格项都接受所有相同的值，作为普通书写的版本，包括跨度

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

在这里插入图片描述

如果没有声明分隔线结束位置，则该网格项默认占据 1 个网格轨道。

3.4. grid-area

为网格项提供一个名称，以便可以被使用网格容器 grid-template-areas 属性创建的模板进行引用。另外，这个属性可以用作grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写。

值：

<name>：你所选的名称
<row-start> / <column-start> / <row-end> / <column-end>：数字或分隔线名称

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

.item-d {
  grid-area: header
}

作为grid-row-start + grid-column-start + grid-row-end + grid-column-end 属性的简写形式

.item-d {
    grid-area: 1 / col4-start / last-line / 6
}

在这里插入图片描述

3.5. justify-self

沿着 inline（行）轴线对齐网格项（相反的属性是 align-self ，沿着 block（列）轴线对齐）。此值适用于单个网格项内的内容。

值：

start：将网格项对齐到其单元格的左侧起始边缘（左侧对齐）
end：将网格项对齐到其单元格的右侧结束边缘（右侧对齐）
center：将网格项对齐到其单元格的水平中间位置（水平居中对齐）
stretch：填满单元格的宽度（默认值）

.item {
  justify-self: start | end | center | stretch;
}

.item-a {
  justify-self: start;
}

在这里插入图片描述

.item-a {

  justify-self: end;

}

在这里插入图片描述

.item-a {
  justify-self: center;
}

在这里插入图片描述

.item-a {
  justify-self: stretch;
}

在这里插入图片描述

要为网格中的所有网格项设置行轴线(row axis) 线上对齐方式，也可以在网格容器上设置 justify-items属性。

3.6. align-self

沿着 block（列）轴线对齐网格项(grid items)（相反的属性是 justify-self ，沿着 inline（行）轴线对齐）。此值适用于单个网格项内的内容。

值：

start：将网格项对齐到其单元格的顶部起始边缘（顶部对齐）
end：将网格项对齐到其单元格的底部结束边缘（底部对齐）
center：将网格项对齐到其单元格的垂直中间位置（垂直居中对齐）
stretch：填满单元格的高度（默认值）

.item{
  align-self: start | end | center | stretch;
}

.item-a {
    align-self: start;
}

在这里插入图片描述

.item-a {
  align-self: end;
}

在这里插入图片描述

.item-a {
    align-self: center;
}

在这里插入图片描述

.item-a {
    align-self: stretch;
}

在这里插入图片描述

要为网格中的所有网格项设置列轴线(column axis) 上的对齐方式，也可以在网格容器上设置 align-items属性。

3.7. place-self

place-self 是设置 align-self 和 justify-self 的简写形式。

值：
auto – 布局模式的 “默认” 对齐方式。
<align-self> <justify-self>：第一个值设置 align-self 属性，第二个值设置 justify-self 属性。如果省略第二个值，则将第一个值同时分配给这两个属性。

.item-a {
  place-self: center;
}

在这里插入图片描述

.item-a {
  place-self: center stretch;
}

在这里插入图片描述

除 Edge 之外的所有主要浏览器都支持 place-self 简写属性。

四、动画（Animation）

根据 CSS Grid 布局模块 Level 1 规范，有 5 个可应用动画的网格属性：

grid-gap， grid-row-gap，grid-column-gap 作为长度，百分比或 calc。

grid-template-columns，grid-template-rows 作为长度，百分比或 calc 的简单列表，只要列表中长度、百分比或calc组件的值不同即可。

浏览器支持CSS网格属性

截至今天（2018年5月7日），在测试的几个浏览器中仅实现 (grid-)gap，(grid-)row-gap，(grid-)column-gap 的动画。

浏览器支持可设置动画的网格属性：

在这里插入图片描述

扶苏1002

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS Grid 布局完全指南

在一个声明中设置所有以下属性的简写： grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, 和 grid-auto-flow。：将grid-template-rows设置为指定的值。grid-column-start / grid-row-start 是网格项开始的网格线，grid-column-end / grid-row-end 是网格项结束的网格线。
复制链接

扫一扫