原作者:Joy Shaheb

原文地址:https://dev.to/joyshaheb/css-grid-cheat-sheet-illustrated-in-2021-1a3

Cover image for CSS Grid Cheat Sheet Illustrated in 2021🎖️

通过本文和大家一起重新认识 CSS Grid 布局 。

以下内容是2021年,你可以使用 Grid 布局可以做的所有事情的备忘单!

Grid 结构

Grid Architecture

父类属性

grid-template-columns

该属性用于定义列数和宽度。您既可以单独设置每列的宽度,也可以使用 repeat() 函数为所有列设置统一的宽度。👇

Alt Text

Alt Text

grid-template-rows

该属性用于定义行数和高度。您既可以单独设置每行的高度,也可以使用 repeat() 函数为所有行设置统一的高度。👇

Alt Text

Alt Text

grid-template-areas

该属性用于指定网格单元格应在整个父容器中按列和行进行承载的空间量。这个属性可以让我们直观地看到自己在做什么。👇

Alt Text

我们称之为布局的蓝图(模板)👇。

Alt Text

column-gap

此属性用于在网格内的列之间放置间隙。👇

Alt Text

row-gap

此属性用于在网格内的行之间放置间隙。👇

Alt Text

justify-items

此属性用于沿着X轴[主轴]在网格容器内定位网格项(子项)。它的4个值表示情况如下:👇

Alt Text

Alt Text

align-items

此属性用于沿Y轴[Cross Axis]在网格容器内定位网格项(子项)。它的4个值表示情况如下:👇

Alt Text

justify-content

此属性用于将我们的网格[基本上所有内容]沿X轴[主轴]放置在网格容器内。它的7个值表示情况如下:👇

Alt Text

Alt Text

align-content

这用于沿着Y轴[Cross Axis]将我们的网格[基本上所有内容]放置在网格容器内。它的7个值表示情况如下:👇

Alt Text

Alt Text

子类属性

Alt Text

Grid 坐标

Alt Text

Alt Text

grid-column : start/end

这两个属性用于将多个列连接在一起。它是 grid-column-startgrid-column-start 的缩写。

grid-row : start/end

这两个属性用于将多个 ROWS 连接在一起。它是 grid-row-startgrid-row-end 的简写。

grid-area

首先,我们需要设置 grid-template-areas☝️完成后,我们必须在子类中指定父类中使用的名称,如下所示:👇

Alt Text

在父容器内指定网格模板区域👇

Alt Text

在带有网格区域的子类中指定在父容器中使用的名称👇

Alt Text

Justify-self

该属性用于沿X轴[主轴]在网格容器内定位1个单独的网格项(子项)。它的4个值表示情况如下:👇

Alt Text

align-self

该属性用于沿Y轴[Cross Axis]在网格容器内定位1个单独的网格项(子项)。它的4个值表示情况如下:👇

Alt Text

速记

Alt Text

place-content

Alt Text

place-items

Alt Text

place-self

Alt Text

grid-template

Alt Text

gap/grid-gap

Alt Text

共享你,读完了本文,想必已经掌握了 CSS Grid 的使用!

本文正在参与「掘金 3 月闯关活动」,点击查看活动详情

Q.E.D.


一个热心肠的正经前端程序猿~