CODEWITHSUNDEEP
htmlcssmultiple-columns
rdiazroman
rdiazroman

Reputation: 429

Two columns divs, ordered vertically

I need a 2 columns HTML-CSS layout using divs. From 0 to 5 elements, it should have only one column. From 6 to 10, two columns. And maximun of 6 elements per column.

elem1
elem2
elem3
elem4
elem5

elem1   elem7
elem2   elem8
elem3   elem9
elem4   elem10
elem5
elem6

Upvotes: 1

Views: 1623

Answers (1)

Artem Lopatiy
Artem Lopatiy

Reputation: 938

In that case we can use CSS3 transformation to achieve needed behaviour.

.container {
    width: 300px;
    height: 300px;
    border: 1px dotted black;
    padding:0;
    transform: rotate(270deg);
}

.card {
  margin:0;
  padding:0;
  width: 50px;
  height: 50px;
  float: right;
  border: 1px solid black;
  display: inline-block;
  box-sizing:border-box;
  transform: rotate(90deg)
}
<div class="container">
  <div class="card">1</div>
  <div class="card">2</div>
  <div class="card">3</div>
  <div class="card">4</div>
  <div class="card">5</div>
  <div class="card">6</div>
  <div class="card">7</div>
  <div class="card">8</div>
  <div class="card">9</div>
  <div class="card">10</div>
</div>

Make sure to use transparent container div, because its' content will be rotated.

Upvotes: 1

Related Questions