本文转载自微信公众号《前端思维框架》，作者ViktorHub。转载本文请联系前端思维框架公众号。注：本文翻译润色工作已获得原作者授权！通过这篇文章，我将和大家一起重新认识CSSGrid布局。以下是您在2021年使用网格布局可以做的所有事情的备忘单！GridStructureGridArchitecture父类属性01grid-template-columns该属性用于定义列数和宽度。您可以单独设置每列的宽度，或使用repeat()函数为所有列设置统一的宽度。👇02grid-template-rows这个属性用来定义行数和高度。您可以单独设置每行的高度，也可以使用repeat()函数为所有行设置统一的高度。👇03grid-template-areas此属性用于指定网格单元在整个父容器的列和行中应占用的空间量。此属性使我们能够可视化我们正在做的事情。👇我们称之为布局的蓝图（模板）👇。04column-gap此属性用于在网格内的列之间放置间隙。👇05row-gap此属性用于在网格内的行之间放置间隙。👇06justify-items此属性用于沿X轴[主轴]在网格容器内定位网格项（子项）。它的4个值表示的情况如下：👇07align-items该属性用于在网格容器内沿Y轴[CrossAxis]定位网格项（subitems）。它的4个值表示的情况如下：👇08justify-content这个属性用来把我们的网格[基本上所有的内容]沿着X轴[主轴]放置在网格容器里面。它的7个值表示如下情况：👇09align-content这用于将我们的网格[basicallyeverything]沿Y轴[CrossAxis]定位在网格容器内。它的7个值代表的情况如下：👇子类属性01grid-column:start/end这两个属性用于将多个列连接在一起。它是grid-column-start和grid-column-start的缩写。02grid-row:start/end两个属性用于将多个ROWS连接在一起。它是grid-row-start和grid-row-end的简写。03grid-area首先，我们需要设置grid-template-areas??完成后，我们必须在子类中指定父类中使用的名称，如下：👇Specifythegridtemplateareainsidetheparentcontainer👇；128071；在具有网格区域的子类中指定在父容器中使用的名称👇04Justify-self此属性用于沿X轴[主轴]（子级）在网格容器内定位1个单独的网格项。它的4个值表示如下情况：👇05align-self该属性用于在网格容器内沿Y轴[CrossAxis]定位单个网格项（child）。它的4个值表示的情况如下：👇速记01place-content02place-items03place-self04grid-template05gap/grid-gap最后恭喜你阅读本文，你一定已经掌握了Grid布局的使用！欢迎留言交流~原文地址：https://dev.to/joyshaheb/css-grid-cheat-sheet-illustrated-in-2021-1a3原作者：JoyShaheb翻译/润色：ViktorHub
