4

I am using CSS grid for a layout. Basically what I want to do is to have the items appear as a grid, but in numerical order. Take the example below:

.list ul {
    display: grid;
    grid-template-columns: auto auto auto;
    list-style-type: none;
    font-size: 20px;
}

.list li {
    padding-bottom: 20px;
}
<div class="list">
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
     </ul>
</div>

Currently, the output of this is:

1-----2-----3
4-----5-----6
7-----8-----9

When I want:

1-----4-----7
2-----5-----8
3-----6-----9

Is there a way to do this with CSS grid?

Stickers
  • 75,527
  • 23
  • 147
  • 186
kawnah
  • 3,204
  • 8
  • 53
  • 103

1 Answers1

3

Change grid-template-columns to:

grid-template-rows: auto auto auto;

Then add this style:

grid-auto-flow: column;

Snippet:

.list ul {
    display: grid;
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
    list-style-type: none;
    font-size: 20px;
}

.list li {
    padding-bottom: 20px;
}
<div class="list">
     <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
     </ul>
</div>
Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
  • Ok interesting! I needed in my specific instance outside the fiddle needed to add `grid-template-rows: repeat(5, auto);` to get the grid in the correct order. – kawnah Jan 12 '18 at 21:36