CSSGridGeneratorCSSGridGenerator是由SarahDrasner创建的免费工具。它是一个可视化设计工具，可以让我们创建一个基本的网格布局，然后我们可以用它来生成相应的代码来帮助我们快速布局。第一个入口是这样的界面：CSSGridlayoutexample当我学习一些东西时，我发现最好的学习方法是使用现有的工具来构建一些有用的东西。在本文中，我们从一个简单的布局开始，然后使用CSSGridGenerator创建在实际项目中使用它所需的代码。首先从一个典型的布局开始，如下图：然后在CSSGridGenerator界面右侧更新对应的内容：Row:4Column:3ColumnSpacing:20RowSpacing:20Spacing让我们的内容有一定的距离Whitespace.只使用列间距是可以的，但是我想在Header和Footer之前留一些空间，所以我也使用行间距。接下来，需要定义应用程序的不同区域。在CSSGridGenerator中，您可以单击并拖动要组合的位置以创建区域。我们希望页脚跨越整个网格，侧边栏占据一个单元格，主要内容区域跨越2列，页脚跨越4列。最终结果如下：这看起来有点像我们想要的布局，但是我们还需要定义一些具体的大小。在CSSGridGenerator中，您会注意到每一行和每一列旁边都有一个输入框，可用于设置特定大小。Header:100pxheightSidebars:200pxwidthFooter:50pxheight这看起来更像我们想要的布局，但你可能会问1fr是多少。轨道可以用任何长度单位定义。Grid还引入了一个额外的长度单位来帮助您创建灵活的Grid轨道。新的fr单位表示网格容器中可用空间的一小部分。第二行的1fr将告诉该区域占用剩余的可用空间。如果将容器设置为100vh，它会占据整个页面的内容，列也是如此。CSSGrid生成的代码点击“请给我示例中的代码”，查看对应布局生成的CSS代码：创建一个simple-layout.htm，添加如下代码：接下来，添加上面生成的CSS：然后添加相应的标签：最后添加以下CSS，这将为.div1-.div5添加一些背景颜色：div:not(.parent){padding:10px;background-color:rgb(199,199,199);}运行：这看起来很好，但是您希望它占据整个浏览器窗口。所以你需要添加height:100vh到.parent类：.parent{display:grid;grid-template-columns:200px1fr1fr200px;grid-template-rows:100px1fr50px;grid-column-gap:20px;grid-row-gap:20px;height:100vh;}最终效果：网格轨道（GridTrack）在相邻的两条网格线之间添加网格轨道。同向的1和2，图中的2和3是相邻的网络线，当然同向的1和3或者不同方向的1和2都不是相邻的网络线。相邻的网络线为网格线，如下图，黑色1和2之间形成网络线（深橙色背景）：上面一共有5条网络线，水平方向为灰色1和2，2和3，3和4，竖黑1和2，2和3，共5个。GridCell一个网格单元由两条相邻的列网格线和两条相邻的行网格线组成，比如下面的深橙色背景就是一个网格单元。一个网络单元应该与一个网络项（item）区分开来。网络项是可以在Html中找到的Dom元素。网络单元是定义容器时将划分的单元格。网格面积添加四条网格线包围的总空间。fr单元（加餐）剩余空间分配号，用于分配一系列长度值中的剩余空间，如果指定了多个部分，则剩余空间将按照各自的数量按比例分配。
