Grid with 2 column, vertical align items in second columns if odd number of items

Question

I need to create 2 columns layout which will align items in the second column vertically if the number of items is odd. Can't realize how to do it. A number of items are unknown.

 .container { border: 1px solid red; display: grid; grid-auto-rows: 1fr; grid-template-rows: auto; grid-template-columns: 1fr 1fr; } .item { border: 1px dashed blue; box-sizing: border-box; height: 50px; }

 <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> </div>

Here is a link to Codepen if someone prefers this editor. https://codepen.io/anatoly314/pen/bGvRmEa

Thank you!

Answer 1

A hacky solution to use with caution:

 .container { border: 1px solid red; display: grid; grid-auto-rows: 1fr; grid-template-rows: auto; grid-template-columns: 1fr 1fr; margin: 5px; } .item { border: 1px dashed blue; box-sizing: border-box; height: 50px; } /* translate all the elements in the second column when we have odd elements */ .item:first-child:nth-last-child(odd) ~ .item:nth-child(even) { transform:translateY(50%); }

 <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> </div> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> </div>

Also like below if you want to fill all the space:

 .container { border: 1px solid red; display: grid; grid-auto-rows: 1fr; grid-template-rows: auto; grid-template-columns: 1fr 1fr; margin: 5px; } .item { border: 1px dashed blue; box-sizing: border-box; height: 50px; } .item:first-child:nth-last-child(odd) ~ .item:nth-child(even) { transform:translateY(50%); } /* no transform for the fist item in the second column */ .item:first-child:nth-last-child(odd) + .item:nth-child(even) { transform: none; } /* make first and last item in second column bigger */ .item:first-child:nth-last-child(odd) + .item:nth-child(even), .item:nth-last-child(2):nth-child(even){ height: 150%; } /* smaller transform for the last item since it's bigger */ .item:nth-last-child(2):nth-child(even) { transform:translateY(33%)!important; }

 <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> </div> <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> <div class="item">6</div> <div class="item">7</div> <div class="item">8</div> <div class="item">9</div> <div class="item">10</div> <div class="item">11</div> </div>