vue中 display: grid;

在 Vue 中使用 `display: grid;` 样式属性可以实现网格布局，该属性是 CSS Grid 布局的一部分，可以用于定义网格容器的行和列。

下面是一个简单的示例，展示如何在 Vue 中使用 `display: grid;`：

<template>
  <div class="grid-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
  </div>
</template>

<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}

.item {
  background-color: #fff;
  padding: 20px;
  text-align: center;
  font-size: 30px;
}
</style>

在上面的示例中，我们定义了一个 `grid-container` 容器，使用 `display: grid;` 将其设置为网格布局。我们还通过 `grid-template-columns` 属性定义了容器中的列，并使用 `repeat` 函数并传入参数 `3` 和 `1fr`，表示重复三次每个列的宽度为 `1fr`，这将使容器被分成三列。最后，使用 `grid-gap` 属性定义了行和列之间的间距。

然后，我们在容器中添加了六个 `item` 元素，这些元素将被放置在容器的网格中。我们可以在 `item` 类中定义元素的样式，例如设置背景颜色、文字大小等。

总的来说，在 Vue 中使用 `display: grid;` 可以轻松地创建响应式的网格布局，使您的页面更加美观和易于阅读。