Use CSS to specify columns

Question

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:

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

"as list items are added" - why not create 3 <div> columns of 33% width and prepend the items to the correct div? — M4tini
– M4tini, Commented May 22, 2016 at 5:08
If you can support HTML5, you could use the flex layout, with the order attribute. See this site for more information and try it — Alexandre FILLATRE
– Alexandre FILLATRE, Commented May 22, 2016 at 5:27
With float:left, fixed width, and setting margin-left to something positions it in the correct column. But the margin-left leaves empty boxes of whitespace. — hayden
– hayden, Commented May 22, 2016 at 5:53

hayden · Accepted Answer · 2018-06-18 12:02:17Z

1

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>

answered Jun 18, 2018 at 12:02

hayden

2,78320 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Use CSS to specify columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related