CODEWITHSUNDEEP
htmlcss
hayden
hayden

Reputation: 2763

Use CSS to specify columns

How to use CSS to place items into columns without changing the order of the html tags?

<ul>
  <li class="column-2">1</li>
  <li class="column-1">2</li>
  <li class="column-1">3</li>
  <li class="column-3">4</li>
  <li class="column-3">5</li>
</ul>

Should look like this:

enter image description here

As items are added they should fall into their specified column (Tetris style).

Upvotes: 1

Views: 102

Answers (1)

hayden
hayden

Reputation: 2763

CSS grid with grid-auto-flow: column; achieves the effect I was looking for.

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-flow: column;
}

.column-1 {
  grid-column-start: 1;
}

.column-2 {
  grid-column-start: 2;
}

.column-3 {
  grid-column-start: 3;
}
<div class="wrapper">
  <div class="column-2">1</div>
  <div class="column-1">2</div>
  <div class="column-1">3</div>
  <div class="column-3">4</div>
  <div class="column-3">5</div>
  <div class="column-1">6</div>
</div>

Upvotes: 1

Related Questions