作者：HammadAhmed探索几乎所有的属性和函数。阅读本文后，您将能够使用这个很棒的CSS添加来处理任何类型的布局。术语：GridGrid是一个二维网格系统。它可用于构建复杂的布局以及较小的界面。属性：display只要将一个元素的display属性设置为grid，它就变成了一个网格。.grid-to-be{display:grid;}这使得.grid-to-be成为一个网格容器及其子网格项。术语：网格线在定义明确定义的网格轨道时创建网格线。您可以使用它们来放置网格项目。术语：网格轨道网格线是两条网格线之间的空间。网格中的行和列是网格轨道。属性：grid-template-columns您可以使用grid-template-columns属性来创建列。要定义列，请按照您希望列在网格中出现的顺序将grid-template-columns属性设置为列大小。让我们看一下：.grid{display:grid;grid-template-columns:100px100px100px;}这里定义了三个宽度为100px的列。所有网格项目都将在这些列中排序。行高将等于该行中最高元素的高度，但这可以通过grid-template-rows进行更改。请注意，在仅定义列而未定义行的情况下，元素将填充列，然后环绕在行中。这是由于Grid使用gridlines和gridlines创建的隐式网格。属性：grid-template-rowsgrid-template-rows用于定义网格中行的数量和大小。它的语法类似于网格模板列。.grid{显示：网格；网格模板列：100px100px100px；grid-template-rows:100px100px100px;}如果只有grid-template-rows而没有grid-template-columns属性会导致列宽等于行中最宽元素的宽度。属性：grid-templategrid是三个属性grid-template-rows、grid-template-columns和grid-template-areas的简写。用法如下：.grid{grid-template:"headerheaderheader"80px"navarticlearticle"600px/100px1fr;}可以照常定义模板区域，把每一行的宽度放在最右边，最后将所有列宽放在正斜杠之后。像以前一样，您可以将所有内容放在一条线上。数据类型：fr是为CSS网格布局创建的新单位。fr允许您在不计算百分比的情况下创建灵活的网格，1fr表示可用空间的一小部分。可用空间按总位数等分，所以3fr4fr3fr将空间分成3+4+3=10份，为三行或三列分配3、4、3等份的可用空间分别。例如：.grid{显示：网格；grid-template-columns:3fr4fr3fr;}如果将固定单元与灵活单元混合使用，则每个分区的可用空间是在减去固定空间后计算的。让我们看另一个例子：.grid{display:grid;grid-template-columns:3fr200px3fr;}单个相等部分的宽度计算如下：(widthof.grid-200px)/(3+3)。装订线的空间（如果存在）最初也会从.grid的宽度中减去。这是fr和%之间的区别，即百分比不包括您使用grid-gap定义的装订线。这里3fr200px3fr基本等于1fr200px1fr。显式网格和隐式网格显式网格是使用属性grid-template-rows或grid-template-columns创建的网格。隐式网格由Grid创建的Gridlines和GridRails组成，用于保存具有grid-template-*属性的手动创建的网格之外的项目。当我们像这样创建网格时自动放置：.grid{display:grid;网格模板列：1fr1fr1fr；即使我们只定义列，作为单独的.grid直接子单元格仍然按行放置。这是因为Grid包含自动放置规则。属性：grid-auto-columns不是由grid-template-columns定义的，隐式创建的gridcolumntrack创建的column的大小可以用grid-template-columns属性定义，其默认值为auto；您可以将其设置为您需要的值。.grid{显示：网格；网格模板列：100px100px100px；grid-auto-columns:50px;}property:grid-auto-rowsgrid-auto-rows的工作方式类似于grid-template-columns。.grid{显示：网格；网格模板行：100px100px100px；grid-auto-rows:50px;}attribute:grid-auto-flowgrid-auto-flow属性控制网格单元如何流入网格，以及它的默认行值。.grid{显示：网格；网格模板列：100px100px100px；grid-auto-flow:column;}上面grid中的“gridcells”会被一个一个的填充，直到没有item剩下为止。基于行的放置使用行号将项目放置在网格中称为基于行的放置。属性：grid-row-start如果你想让特定的网格项从特定的行开始，你可以这样做：.grid-item{grid-row-start:3;}属性：grid-row-end如果你想一个特定的网格项在特定的行结束，你可以这样做：.grid-item{grid-row-end:6;}属性：grid-column-start如果你想让特定的网格项从特定的列开始,你可以这样做:.grid-item{grid-column-start:3;}属性:grid-column-end如果你想让特定的网格项结束在特定的列上,你可以这样做:.grid-item{grid-column-end:6;}属性：grid-row和grid-columngrid-row和grid-column属性可以用来手动放置和调整网格项的大小。每个属性都是其各自星号和末尾属性的简写：grid-row-start、grid-row-end、grid-column-start和grid-column-end。使用正斜杠“/”分隔开始值和结束值：.grid-item{grid-column:3/5;grid-row:2/7;}属性：grid-area您可以使用grid-area来简写网格行和网格列。它是这样的：///.grid-item{grid-area:2/3/7/5;}此代码的行为与前一个标头中的代码相同。跨越网格的元素要使元素跨越网格，请使用grid-row或grid-column属性。设置起始行1和结束行-1。这里1表示相关轴上最左边的网格线，-1表示相关轴上最右边的网格线。在从右到左书写的脚本中，这是相反的，即1表示最右边的行，-1表示最左边的行。.grid-item-weird{grid-column:1/-1;}如果你想让单个项目占据整个网格，你可以对grid-row和grid-column都这样做：.grid-item-weird{网格行：1/-1;网格列：1/-1；}或者简单地说：.grid-item-weird{grid-area:1/1/-1/-1;}keyword:span当使用grid-使用row和grid-column时，可以使用span关键字来声明项目应该覆盖的行数或列数，而不是显式定义行号：.grid-item{grid-column:3/span2;}youItems也可以固定到终点线并在另一个方向越过。下面的代码实现了与上面相同的结果：.grid-item{grid-column:span2/5;}span可以以相同的方式应用于行。术语：网格单元网格单元是四条相交网格线之间的空间，就像表格中的单元格一样。术语：网格区域网格区域是占据网格上矩形区域的网格单元。它们是使用命名的网格区域或基于行的放置创建的。属性：grid-template-areas(&grid-area)除了放置和调整单个网格项的大小外，还可以使用跨度、网格列，所谓的“模板区域”。grid-template-area允许您命名网格区域，以便网格项目可以进一步填充它们。.grid{显示：网格；网格模板列：100px1fr100px；网格模板行：100px800px100px；grid-template-areas:"headerheaderheader""sidebar-1contentsidebar-2""footerfooterfooter"}这里一对引号代表一行网格。您可以将所有内容都放在一行中而无需列对齐，但我所做的只是让它看起来更整洁。我先定义了三列三行，然后给每个单元格起一个名字。通过在第一行中重复“header”三次，您告诉CSS要做的是用一个名为header的网格项覆盖整个内容。其余的也一样。以下是每个网格项如何通过使用grid-template-areas命名为其定义空间：.header{grid-area:header}.sidebar-1{grid-area:sidebar-1}。content{grid-area:content}.sidebar-2{grid-area:sidebar-2}.footer{grid-area:footer}没有比这更简单的了，尤其是使用其他CSS方法来布局内容。早些时候你看到grid-area也用于基于行的定位。如果要将单元格留空，可以使用点来设置：.grid{display:grid;网格模板列：100px1fr100px；网格模板行：100px800px100px；grid-template-areas:"headerheaderheader""sidebarcontentsidebar""footerfooter."}这里，页脚以第二列结束。属性：grid-templategrid是三个属性grid-template-rows、grid-template-columns和grid-template-areas的简写。像这样使用：.grid{grid-template:"headerheaderheader"80px"navarticlearticle"200px/100pxauto;}你可以像往常一样定义模板区域，将每行的宽度放在最右边，并且然后将所有列的宽度放在正斜杠之后。和以前一样，您可以将所有内容放在同一行。功能：repeat()repeat()函数有助于减少网格轨道列表的冗余并为其添加语义层。使用起来非常简单直观。让我们看看：你也可以重复某种曲目列表，像这样：.grid{display:grid;网格模板列：重复（3、1fr2fr）；//这与：1fr2fr1fr2fr1fr2fr}repeat()不必是值的唯一部分。您可以在其前后添加其他值。例如：grid-template-columns:2frrepeat(5,1fr)4fr;。属性：grid这里的grid是grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow六个属性的简称。首先，你可以像这样使用grid-template（前面的例子）：.grid{grid:"headerheaderheader"80px"navarticlearticle"200px/100pxauto;}其次不是你看起来的样子，grid和css的属性是不同：是的，你没有看错：一个叫做css的属性，所有CSS属性的简称。我也是在某次思考中无意中碰到的。但是现在我不会教你如何使用它，也许在未来。第三，你以某种方式使用网格。您可以将grid-template-rows与grid-auto-columns或grid-auto-rows结合使用。语法非常简单：.grid-item{grid:
