喜欢再看一遍，养成习惯。本文已收录到GitHubhttps://github.com/qq44924588...更多往期好评文章已归类，同时整理了我的很多文档和教程资料。欢迎来到星和完美。面试时可参考考点复习。我希望我们能在一起。为了保证更好的可读性，本文采用意译而非直译。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代码：.parent{display:grid;网格模板列：200px1fr1fr200px；网格模板行：100px1fr50px；网格列间隙：20px；网格行间距：20px；.div1{网格区域：1/1/2/5;}.div2{网格区域：2/1/3/2;}.div3{网格区域：2/2/3/4;}.div4{网格区域：2/4/3/5;}.div5{网格区域：3/1/4/5;}}创建一个simple-layout.htm并添加以下代码：
