JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

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

CSS

* {
  margin: 0;
  padding: 0;

}

.container {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  column-count: 2;
}

.item {
  text-align: center;
  background: mistyrose;
  border: 3px solid tomato;
  color: tomato;
  width: calc(50% - 6px);
}

JavaScript

item = $('.item');
items = item.length

shortColumn = Math.floor(items / 2);
longColumn = Math.ceil(items / 2);

screenHeightShort = $('body').height() - (shortColumn * 6 ); 
screenHeightLong = $('body').height() - (longColumn * 6 ); 


$('.item:odd').addClass('even');
$('.item:even').addClass('odd');

$('.item:even').height(screenHeightShort / shortColumn );
$('.item:odd').height(screenHeightLong / longColumn );

/* console.log($('body').height());
console.log(Math.floor(items / 2) * 3 );
console.log($('body').height() + (Math.floor(items / 2) * 3 )) */

/* console.log(Math.floor(items / 2));
  console.log(Math.ceil(items / 2)); */

/* item.each(function () {  
  console.log($(this).index());
  $(this).addClass("class-" + ($(this).index() + 1));
  
}); */
/* 
item.each(function () {    
    if($(this).hasClass('odd') {
      $(this).addClass('newClass');
    }else{
      $(this).addClass('');
    }
}); */



/* 

if(items % 2 == 1) {
  console.log(Math.floor(items / 2));
  console.log(Math.ceil(items / 2));
  
    item.each(function () {
      console.log($(this).attr('class'));
      $(this).addClass('Dani');
    });
}else{
item.each(function () {
    console.log($(this).attr('class'));
    $(this).addClass('Clare');
});
}

 */