前端 css grid布局

CSS Grid布局是一种二维网格布局系统，可以轻松地创建复杂的布局。它通过将容器分成行和列来工作，并将子元素放置在这些行和列中。以下是一个简单的CSS Grid布局示例：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
}

.item {
  background-color: #ccc;  border: 1px solid #333;
}

在这个例子中，我们创建了一个具有3列和2行的网格布局。每个单元格都是100像素高，每个列都是相等的。我们还定义了一个名为“item”的类，它将应用于每个子元素。