网格也可以按列来自动定位项目，只要设置 grid-auto-flow 的属性值为 column 即可。此时网格将根据已定义的 grid-template-rows 按列摆放项目，当一列中的项目排满，就继续排到下一列中，或排到一个新创建的隐式列中。因为显式定义了行轨道，所以列轨道是自适应大小的，同样地，也可以像 grid-auto-rows 那样通过设置 grid-auto-columns 来控制隐式列的尺寸。

在下面的例子中，创建了一个行高为100 像素的三个行轨道的网格，按列优先自动排列，先创建一个150 像素宽的列，接着是一个50 像素宽的列，直至创建出足够多的列来容纳全部项目。

<template>
  <div class="wrapper">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
  </div>
</template>
<style scoped>
.wrapper {
  display: grid;
  grid-template-rows: repeat(3, 100px);
  gap: 10px;
  grid-auto-flow: column;
  grid-auto-columns: 150px 50px;
  background: #f0f0f0;
}
div {
  background: lightblue;
  text-align: center;
}
</style>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24