grid布局和flex布局

以下是关于grid布局和flex布局的介绍：

1. Grid布局

Grid布局是一种二维布局系统，可以将一个网格划分为多个区域，然后将元素放置在这些区域中。它可以更好地控制页面的布局，特别是在响应式设计中非常有用。

以下是一个简单的Grid布局示例：

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

.item {
  background-color: #ccc;
  padding: 20px;
}

2. Flex布局

Flex布局是一种一维布局系统，可以更好地控制元素在容器中的位置和大小。它可以使响应式设计更加容易，并且可以轻松地实现水平和垂直居中。

以下是一个简单的Flex布局示例：

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.item {
  background-color: #ccc;
  padding: 20px;
}