5分钟学会CSS网格布局

要将包装元素变成网格（grid），只需将其显示属性设置为grid：.wrapper{display:grid;}然而，这还没有做任何事情，因为我们还没有定义我们希望网格的样子。它只会将6个div堆叠在一起。我添加了一些样式，但它与CSSGrid没有任何关系。列（columns）和行（lines）要使它成为二维网格容器，我们需要定义列和行。让我们创建3列和2行。我们将使用grid-template-row和grid-template-column属性。.wrapper{显示：网格；网格模板列：100px100px100px；grid-template-rows:50px50px;}如您所见，我们为grid-template-columns写了3个值，所以我们将得到3列。我们想要得到2行，所以我们为grid-template-rows指定了2个值。这些值决定了我们希望我们的列有多宽（100px），以及我们希望我们的行有多高（50px）。结果如下：为确保您了解这些值与网格外观的关系，请查看此示例。.wrapper{显示：网格；网格模板列：200px50px100px；grid-template-rows:100px30px;}请尝试理解上面的代码，思考上面的代码会产生什么样的布局。这就是上面代码布局的结果：很容易理解，也很容易使用，不是吗？让我们让它更难一点。放置项目（子元素）接下来你需要学习的是如何在网格（grid）上放置项目（子元素）。请特别注意，这是Grid布局超级大国发挥作用的地方，因为它使创建布局变得非常简单。我们使用与以前相同的HTML标记，为了帮助我们更好地理解，我们为每个项目（子元素）添加一个单独的类：1