display: grid

display: grid 是 CSS 属性，用于创建网格布局。通过将元素的 display 属性设置为 grid，可以将其子元素放置在一个网格中，以便更灵活地控制布局。

使用 display: grid 可以实现多列和多行的布局，可以指定每个列和行的大小、位置和间距。通过使用 grid-template-columns 和 grid-template-rows 属性，可以定义网格的列和行的数量、大小和样式。此外，还可以使用 grid-column 和 grid-row 属性来控制子元素在网格中的位置。

例如，下面的代码将创建一个包含两列和三行的网格布局：

<div style="display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 100px 200px 150px;">
  <div style="background-color: red;">元素1</div>
  <div style="background-color: green;">元素2</div>
  <div style="background-color: blue;">元素3</div>
  <div style="background-color: yellow;">元素4</div>
  <div style="background-color: orange;">元素5</div>
  <div style="background-color: purple;">元素6</div>
</div>

在这个例子中，第一个 div 元素将被放置在第一列第一行，背景色为红色；第二个 div 元素将被放置在第二列第一行，背景色为绿色；依此类推。