I have a grid with a variable number of elements, but it should always have 3 columns:

<div >
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span>10</span>
  <span>11</span>
  <span>12</span>
  <span>13</span>
</div>

With the above, I get the 3 columns, but the elements are placed into columns first, like so:

1   2   3
4   5   6
7   8   9
10  11  12
13

However, I want the elements to be put into rows first, like so:

1   6   11
2   7   12
3   8   13
4   9   
5   10 

Is this possible using only grid, without having to modify the classes since the number of elements varies? (And no JavaScript!)

CodePudding user response：

Try with grid-rows-3 and grid-flow-col

span {
      border: 1px solid red;
}

<script src="https://cdn.tailwindcss.com"></script>
<div >
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>

</div>

CodePudding user response：

Use the Tailwind attributes grid-rows-3 with grid-flow-col to make the list like this:

<div >
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>

</div>