最强大的CSS布局方案-grid布局基础篇

站长

2024年04月05日 18:11 · 阅读数 35

前言

网格布局擅长于将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系。

CSS网格布局是一种基于二维网格的布局系统，与过去的一些布局系统相比，它彻底改变了我们设计用户界面的方式。

一直以来，我们都是使用CSS来布局网页，但是它在这方面做的并不好，最开始使用table、float、position、inline-block，但这些遗漏了很多重要功能（如：垂直居中）。flex布局也是一种出色的布局系统，解决了很多布局难题，但flex布局是一维布局，是基于轴线来进行布局，无法同时在行和列上进行布局。Grid布局是第一个专门为解决布局问题而创建的 CSS 模块，让我们能够按行或列来放置元素。

网格容器的子元素可以自己定位，以便它们像 CSS 定位的元素一样，真正的有重叠和层次。

浏览器兼容性

最强大的CSS布局方案-grid布局基础篇

数字表示该版本及以上的浏览器支持该功能。

这些数据来自caniuse, 想了解更多兼容性请查看。

它其实已经得到大部分浏览器的支持，如果你的项目不需要考虑支持 IE11以下 或 Edge15以下版本的用户，那么你可以安全的使用它。

什么是grid布局?

grid布局即是网格布局，可同时在行和列上进行布局，是最强大的CSS布局方案。

想要使用grid布局，需要使用display：grid;将容器元素定义为网格，使用 grid-template-columns 和 grid-template-rows 设置列和行的大小，然后使用 grid-column 和 grid-row 将子元素放入网格。

块状元素设置

.box {
    display: grid;
}

内联元素设置

.text {
    display: inline-grid;
}

注意：设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。

基本概念

在深入研究网格概念之前，了解相关术语非常重要。由于这里涉及的术语在概念上都有点相似，如果不先记住网格规范中定义的含义，就很容易混淆。

网格容器(Grid Container)

网格的元素，它是所有网格项的直接父容器。

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

在本例中，container 就是网格容器。

网格项（Grid Item）

网格容器的子元素（即直系子元素）。这里的项元素是网格项，但子项不是。

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

在本例中，item是网格项，而sub-item不是。

网格线（Grid Line）

构成网格结构的分界线。它们可以是垂直的（"列网格线"），也可以是水平的（"行网格线"），位于行或列的两侧。

最强大的CSS布局方案-grid布局基础篇

这里的黄线就是列网格线的一个例子。

网格单元格（Grid Cell）

相邻两行和两列网格线之间的空间。它是网格的一个 "单元"。

下面是行网格线 1 和 2 以及列网格线 2 和 3 之间的网格单元。

最强大的CSS布局方案-grid布局基础篇

网格轨迹（Grid Trick）

相邻两条网格线之间的空间。你可以把它们看作网格的列或行。

下面是第二行和第三行网格线之间的网格轨迹。

最强大的CSS布局方案-grid布局基础篇

网格区域（Grid Area）

由四条网格线包围的总空间。网格区域可以由任意数量的网格单元组成。

下面是行网格线 1 和 3 以及列网格线 1 和 3 之间的网格区域。

最强大的CSS布局方案-grid布局基础篇

CSS 网格属性

网格属性分为两类，一类是作用于网格容器上，一类作用于网格项上。

网格容器上的属性

以下属性作用于容器上：

display
grid-template-columns
grid-template-rows
grid-template-area
grid-template
grid-columns-gap
grid-rows-gap
grid-gap
justify-items
align-items
place-items
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid

`display`

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

属性值：

grid: 生成块级网格
inline-grid: 生成内联级网格

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

`grid-template-columns` / `grid-template-rows`

用空格分隔的数值列表定义网格的列和行。这些值代表轨道大小，它们之间的空格代表网格线。

grid-template-columns定义了列的宽度，grid-template-rows定义行的高度。

属性值：

trick-size: 可以是长度、百分比，也可以是网格中可用空间的一部分，使用fr单位。
line-name: 可自定义名称

语法：

.container {
    grid-template-columns: <trick-size> ... | <line-name> <trick-size> ...;
    grid-template-rows: <trick-size> ... | <line-name> <trick-size> ...;
}

示例1

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

grid-template-columns有5个值，表示生成了5列，每列的宽度依次为40px、50px、auto 50px 40px。

grid-template-rows有3个值。表示生成了3行，每行的高度依次为25%、100px、auto。

生成了一个3行5列的网格，共有15个网格单元格。

最强大的CSS布局方案-grid布局基础篇

未定义网格线名称时，网格线会自动分配数字（-1是最后一行）

示例2-自定义网格线名称

给网格分隔线进行命名，语法是使用[]包裹我们自定义的命名。

.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];
}

最强大的CSS布局方案-grid布局基础篇

双命名

一行可以有多个名称，如：这里的第二行可以有两个名称row1-end和row2-start

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

repeat()

若定义中存在重复的部分，可以使用repeat()符号来简化：

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

相当于

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

如果多行同名，则可通过行名和行数进行引用。

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

`grid-template-areas`

给网格划分区域，有点类似table中的合并单元格。

grid项使用grid-area属性指定网格区域名称，通过引用该网格区域名称来定义网格模板。

重复网格区域的名称会使内容跨越这些单元格。

句号表示空单元格。

语法：

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

属性值：

grid-area-name 使用 grid-area 属性指定的网格区域名称
. 表示空网格单元格
none 未定义网格区域

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto;
  grid-template-areas: "header header header header" "main main . sidebar"
    "footer footer footer footer";
}

.header { grid-area: header; } 
.main { grid-area: main; } 
.sidebar { grid-area: sidebar; } 
.footer { grid-area: footer; }

创建了一个3行4列的网格，共12个格子，四片区域，因此，我们grid子项只需要4个元素即可。


<div class="container">
    <div class="header">header</div>
    <div class="main">main</div>
    <div class="sidebar">sidebar</div>
    <div class="footer">footer</div>
</div>

首行由header区域组成。中间一行由两个main区域、一个空单元格和一个sider区域组成。最后一行是footer区域。

最强大的CSS布局方案-grid布局基础篇

注意：使用这种语法命名的不是行，而是区域。区域两端的网格线是自动命名的。规则是区域名称后面加-start和-end。

我们的网格区域一定要形成规整的矩形区域，不能是不规则的形状。

`grid-template`

grid-template是grid-template-rows, grid-template-columns, 和 grid-template-areas的缩写。

语法：

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

其中none表示将3个CSS属性都设置为初始值。

例子-重写上个例子中的布局

.container {
  display: grid;
  grid-template: "header header header header" 1fr "main main . sidebar" 1fr
    "footer footer footer footer" 1fr / auto;
}

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

`column-gap` `row-gap` `grid-column-gap` `grid-row-gap`

指定网格线的大小。你可以把它想象成设置列/行之间沟槽的宽度。

.container { 
    /* standard */ 
    column-gap: <line-size>; 
    row-gap: <line-size>; 

    /* old */ 
    grid-column-gap: <line-size>; 
    grid-row-gap: <line-size>; 
}

示例

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

最强大的CSS布局方案-grid布局基础篇

注：将删除 grid- 前缀，并将 grid-column-gap 和 grid-row-gap 重命名为 column-gap 和 row-gap。Chrome 68+、Safari 11.2 Release 50+ 和 Opera 54+ 已支持无前缀属性。

`gap`/`grid-gap`

是row-gap和column-gap的简写。

语法：

.container { 
    /* standard */ 
    gap: <grid-row-gap> <grid-column-gap>; 

    /* old */ 
    grid-gap: <grid-row-gap> <grid-column-gap>; 
}

示例

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

若只设定一个值，那么行、列间距相同。

注意： grid- 前缀已被弃用（但谁知道呢，也许永远不会从浏览器中删除）。本质上，grid-gap 已更名为 gap。Chrome 68+、Safari 11.2 Release 50+ 和 Opera 54+ 已支持无前缀属性。

`justify-items`

沿行（水平）轴对齐网格项，此值适用于容器内的所有网格项。

属性值：

start 对齐项目，使其与单元格的起始边缘齐平
end 使项目与其单元格的末端边缘齐平
center 将项目排列在单元格的中央
stretch 填充单元格的整个宽度（默认值）

语法：

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

示例

.container {
    justify-items: start;
}

最强大的CSS布局方案-grid布局基础篇

.container {
    justify-items: end;
}

最强大的CSS布局方案-grid布局基础篇

.container {
    justify-items: center;
}

最强大的CSS布局方案-grid布局基础篇

.container {
    justify-items: stretch;
}

最强大的CSS布局方案-grid布局基础篇

也可以通过 justify-self 属性在单个网格项上设置这种行为。

`align-items`

沿列（垂直）轴对齐网格项，此值适用于容器内的所有网格项。

属性值：

start 对齐项目，使其与单元格的起始边缘齐平
end 使项目与其单元格的末端边缘齐平
center 将项目排列在单元格的中央
stretch 填充单元格的整个高度（默认值）
baseline 沿文本基线对齐项目。基线有修改器--第一基线和最后基线，在多行文本的情况下，将使用第一行或最后一行的基线。

语法：

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

示例

.container {
    align-items: start;
}

最强大的CSS布局方案-grid布局基础篇

.container {
    align-items: end;
}

最强大的CSS布局方案-grid布局基础篇

.container {
    align-items: center;
}

最强大的CSS布局方案-grid布局基础篇

.container {
    align-items: stretch;
}

最强大的CSS布局方案-grid布局基础篇

这种行为也可以通过 align-self 属性在单个网格项上进行设置。

`place-items`

在一个声明中同时设置了 align-items 和 justify-items 属性。

语法：

.container {
    place-items: <align-items> / <justify-items>;
}

示例--快速设置水平垂直居中

.container {
    display: grid;
    place-items: center;
}

`justify-content`

有时，网格的总大小可能小于网格容器的大小。如果所有网格项的大小都使用非灵活单位（如 px），就会出现这种情况。在这种情况下，你可以设置网格在网格容器中的对齐方式。

该属性使网格沿水平（行）轴对齐。

语法：

.container { 
    justify-content: start | end | center | stretch | space-around | space-between | space-evenly; 
}

属性值：

start 对齐网格，使其与网格容器的起始边缘齐平
end – 使网格与网格容器的末端边缘齐平
center – 将网格对齐到网格容器的中央
stretch – 调整网格项的大小，使网格填满网格容器的整个宽度
space-around – 在每个网格项之间留出均等的空间，在两端留出一半大小的空间
space-between – 在每个网格项之间留出均等的空间，远端不留空间
space-evenly – 在每个网格项（包括远端）之间留出均等的空间

示例

.container { 
    justify-content: start; 
}

最强大的CSS布局方案-grid布局基础篇

.container { 
    justify-content: end; 
}

最强大的CSS布局方案-grid布局基础篇

.container { 
    justify-content: center; 
}

最强大的CSS布局方案-grid布局基础篇

.container { 
    justify-content: stretch; 
}

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

`align-content`

该属性可使网格沿垂直（列）轴对齐。

语法：

.container { 
    align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
}

属性值：

start 对齐网格，使其与网格容器的起始边缘齐平
end – 使网格与网格容器的末端边缘齐平
center – 将网格对齐到网格容器的中央
stretch – 调整网格项的大小，使网格填满网格容器的整个高度
space-around – 在每个网格项之间留出均等的空间，在两端留出一半大小的空间
space-between – 在每个网格项之间留出均等的空间，远端不留空间
space-evenly – 在每个网格项（包括远端）之间留出均等的空间

示例

.container { 
    align-content: start; 
}

最强大的CSS布局方案-grid布局基础篇

.container { 
    align-content: end; 
}

最强大的CSS布局方案-grid布局基础篇

.container { 
    align-content: center; 
}

最强大的CSS布局方案-grid布局基础篇

.container { 
    align-content: stretch; 
}

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

`place-content`

place-content 在一个声明中同时设置了 align-content 和 justify-content 属性。

属性值：

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

除 Edge 外，所有主要浏览器都支持 place-content 速记属性。

`grid-auto-columns` `grid-auto-rows`

指定自动生成的网格轨迹（又称隐式网格轨迹）的大小。当网格中的网格项多于单元格时，或者当网格项被放置在显式网格之外时，就会创建隐式网格轨迹。

语法：

.container { 
    grid-auto-columns: <track-size> ...; 
    grid-auto-rows: <track-size> ...; 
}

为了说明隐式网格轨道是如何创建的，请看：

.container {
    grid-auto-columns: 60px 60px;
    grid-auto-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; 
}

<div class="container">
    <div class="item-a"></div>
    <div class="item-b"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

最强大的CSS布局方案-grid布局基础篇

我们告诉 .item-b 从第 5 列开始，在第 6 列结束，但我们从未定义第 5 列或第 6 列。由于我们引用了不存在的行，因此会创建宽度为 0 的隐式轨迹来填补空白。我们可以使用 grid-auto-columns 和 grid-auto-rows 来指定这些隐式轨迹的宽度：

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

最强大的CSS布局方案-grid布局基础篇

`grid-auto-flow`

如果有网格项没有明确放置在网格上，自动放置算法就会启动，自动放置网格项。此属性控制自动放置算法的工作方式。

语法：

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

属性值：

row – 告诉自动放置算法依次填充每一行，必要时添加新行（默认值）
column – 告诉自动置放算法依次填充每一列，并根据需要添加新列
dense – 告诉自动置放算法，如果后面出现较小的项目，则尝试在网格中较早的位置填孔

需要注意的是，dense只会改变项目的视觉顺序，可能会导致项目显示顺序错乱，不利于项目的可访问性。

示例1

<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>

定义了一个五列两行的网格，并将网格自动流程设置为行。

.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; }

最强大的CSS布局方案-grid布局基础篇

如果我们将 grid-auto-flow 设置为 column，item-b、item-c 和 item-d 就会顺着列流动：

.container {
    grid-auto-flow: column; 
}

最强大的CSS布局方案-grid布局基础篇

`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 关键字，自动放置算法将使用 "密集 "打包算法。如果省略 grid-auto-columns，则将其设置为 auto。
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> – 将 grid-template-columns 设置为指定值。如果自动流关键字位于斜线左侧，则会将网格自动流设置为行。如果额外指定了 dense 关键字，自动放置算法将使用 "dense"打包算法。如果省略 grid-auto-rows 关键字，则会将其设置为自动。

示例

.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-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
place-self

`grid-column-start` `grid-column-end` / `grid-row-start` `grid-row-end`

grid-column-start/grid-row-start 是项目开始所在的网格线
grid-column-end/grid-row-end 是项目结束所在的网格线。

语法：

.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; 
}

属性值：

<line> 可以是一个数字，表示有编号的网格线，也可以是一个名称，表示已命名的网格线
span <number> 项目将跨越所提供的网格线数
span <number> 项目将横跨网格，直到到达下一条具有所提供名称的网格线为止
auto 表示自动放置、自动跨度或默认跨度为 1

示例

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

最强大的CSS布局方案-grid布局基础篇

.item-a {
    grid-column-start: 1; 
    grid-column-end: span col4-start; // 项目将横跨网格，直到到达下一条名称为col4-start的网格线为止
    grid-row-start: 2; 
    grid-row-end: span 2; // 项目将跨越2个网格线
}

最强大的CSS布局方案-grid布局基础篇

如果没有声明网格列端/网格行端，项目将默认跨 1 个轨道。

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

`grid-column` `grid-row`

grid-column是grid-column-start + grid-column-end简写。

grid-row是grid-row-start + grid-row-end的简写。

语法：

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

属性值： <start-line> / <end-line>

示例

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

最强大的CSS布局方案-grid布局基础篇

如果没有声明终止行值，项目将默认跨 1 个轨道。

`grid-area`

为项目赋予一个名称，以便使用 grid-template-areas 属性创建的模板可以引用它。此外，该属性还可用作 grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写。

语法：

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

属性值：

<name> – 自定义命名
<row-start> / <column-start> / <row-end> / <column-end> – 可以是数字、命名行

1、为项目指定名称

.item-d {
    grid-area: header;
}

2、grid-row-start + grid-column-start + grid-row-end + grid-column-end 的简写

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

最强大的CSS布局方案-grid布局基础篇

注意：依次设置值的顺序，起始行、起始列、终点行、终点列。

`justify-self`

沿水平（行）轴对齐单元格内的网格项。此值适用于单个单元格内的网格项。

语法：

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

属性值：

start – 对齐网格项，使其与单元格的起始边缘齐平
end – 使网格项与单元格的末端边缘齐平
center – 将网格项对齐至单元格中央
stretch – 填充单元格的整个宽度（默认值）

示例

.item {
    justify-self: start;
}

最强大的CSS布局方案-grid布局基础篇

.item {
    justify-self: end;
}

最强大的CSS布局方案-grid布局基础篇

.item {
    justify-self: center;
}

最强大的CSS布局方案-grid布局基础篇

.item {
    justify-self: stretch;
}

最强大的CSS布局方案-grid布局基础篇

`align-self`

沿垂直（列）轴对齐单元格内的网格项。该值适用于单个网格项内的内容。

语法：

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

属性值：

start – 对齐网格项，使其与单元格的起始边缘齐平
end – 使网格项与单元格的末端边缘齐平
center – 将网格项对齐至单元格中心
stretch – 填充单元格的整个高度（默认值）

示例

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

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

`place-self`

align-self and justify-self简写

属性值：

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

示例

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

最强大的CSS布局方案-grid布局基础篇

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

最强大的CSS布局方案-grid布局基础篇

特殊的单位和方法

fr单位

fr是单词fraction的缩写，表示分数。


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

1:1:1，网格宽度三等分。

最强大的CSS布局方案-grid布局基础篇

如果有固定尺寸，则剩余部分等分。

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

最强大的CSS布局方案-grid布局基础篇

fr和auto混用时？

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

最强大的CSS布局方案-grid布局基础篇

当设置fr尺寸的时候，auto的尺寸表现为“包裹”，为内容宽度。如果没有设置fr尺寸的网格，则表现为拉伸。

如果fr总和小于1呢？

.container {
    grid-template-columns: auto .25fr .25fr .25fr;
}

最强大的CSS布局方案-grid布局基础篇

这里计算就相对复杂些，首先，由于第一个网格尺寸设置为auto，因此fr计算需要的剩余空间尺寸是grid容器的宽度减去“A”这个字符的宽度。所以，后面3个0.25fr元素的宽度是：(容器宽度 - “宽auto”字符宽度) * 0.25。然后剩余尺寸就是第一个网格宽度。

尺寸关键字

在设置行和列的大小时，可以使用所有常用的长度，如 px、rem、% 等，但也可以使用关键字：

min-content 内容的最小尺寸
max-content 内容的最大尺寸
auto（自动）与 fr 单位很相似，只是在分配剩余空间时，与 fr 单位的大小之争中 "败下阵来"。
fr 见上文

尺寸调整函数

fit-content()函数使用可用空间，但绝对不会小于min-content，也不会大于max-content。

minmax()函数的作用和它看起来的一样：为长度设置最小值和最大值。这对于结合使用相对单位非常有用。比如，你可能希望一列只能缩到这么大。这非常有用，如：

grid-template-columns: minmax(100px, 1fr) 3fr;

`repeat()` 函数和关键字

repeat() 函数可以节省一些码字时间：

grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr; 

/* 更快: */ 
grid-template-columns: repeat(8, 1fr); 

/* 尤其是: */ 
grid-template-columns: repeat(8, minmax(10px, 1fr));

当 repeat() 与关键字结合使用时，就会变得更加花哨：

auto-fill: 在一行中尽可能多地填充可能的列，即使这些列是空的。
auto-fit: 有多少列就填充多少列。更倾向于扩展列来填充空间，而不是空列。

这是 CSS 网格中最著名的代码段，也是 CSS 技巧中的经典之作：

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

查看两个关键字的区别

`Masonry`

css网格的一项试验性功能是瀑布流布局。这种布局有很多种方法，但都有各自的缺点。

现在，该规范有了正式的方式，这就是火狐浏览器中的一个标志：

.container { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    grid-template-rows: masonry; 
}

想要了解更多，可以参考Rachel的文章

`Subgrid`

子网格是网格的一个非常有用的功能，它允许网格项拥有自己的网格，并继承父网格的网格线。

.parent-grid { 
    display: grid; 
    grid-template-columns: repeat(9, 1fr); 
} 
.grid-item { 
    grid-column: 2 / 7; 
    display: grid; 
    grid-template-columns: subgrid; 
} 
.child-of-grid-item { 
    /* gets to participate on parent grid! */ 
    grid-column: 3 / 6; 
}

目前只有 Firefox 支持这一功能，但它确实需要得到普及。

后记

这篇文章是自己边学边记，将相关的知识点整理出来，以方便自己日后查阅。（本篇很多是翻译Chris House的文章，大家也可以去看原文。）

里面很多并未实战，实战会另外出一篇文章，会将一些常用的布局纳入其中。

敬请期待。。。。

参考文章：

转载自:https://juejin.cn/post/7313979344562552882

最强大的CSS布局方案-grid布局基础篇

前言

浏览器兼容性

什么是grid布局?

基本概念

网格容器(Grid Container)

网格项（Grid Item）

网格线（Grid Line）

网格单元格（Grid Cell）

网格轨迹（Grid Trick）

网格区域（Grid Area）

CSS 网格属性

网格容器上的属性

display

grid-template-columns / grid-template-rows

grid-template-areas

grid-template

column-gap row-gap grid-column-gap grid-row-gap

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

网格项上的属性

grid-column-start grid-column-end / grid-row-start grid-row-end

grid-column grid-row

grid-area

justify-self

align-self

place-self

特殊的单位和方法

fr单位

尺寸关键字

尺寸调整函数

repeat() 函数和关键字

Masonry

Subgrid

后记

`display`

`grid-template-columns` / `grid-template-rows`

`grid-template-areas`

`grid-template`

`column-gap` `row-gap` `grid-column-gap` `grid-row-gap`

`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`

`grid-column-start` `grid-column-end` / `grid-row-start` `grid-row-end`

`grid-column` `grid-row`

`grid-area`

`justify-self`

`align-self`

`place-self`

`repeat()` 函数和关键字

`Masonry`

`Subgrid`