JSFiddle - React, Tailwind, and code Playground

by LuckyCat

HTML

<div class="parent">
<div class="child child-active">1jhjhsjgh sjgshjs ghjsghsjgshj jhjh djgd hjgdhjdghfdyhjdfyhjdfyu fsyufstyufstyufstyrfstyssb hnjgjh,nksj dklhjdkl hdkljh dkj h kj dh kjdhnd kjdhkjdhdjkhdkjdh jkhk</div>
<div class="child">mjnjsdhn2</div>
<div class="child">3</div>
<div class="child">4</div>
<!--<div class="child">5</div>
<div class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
<div class="child">9</div>-->
</div>

CSS

.parent {
  display: grid;
  /*grid-template: 50px 50px 50px / 50px 50px 50px;
    grid-template-columns: 75px auto auto;
    grid-template-rows: 75px auto auto;
    height: 200px;
    width: 200px;*/
    grid-template-columns: 1fr 1fr;
    /*grid-template-rows: 1fr 1fr;*/
}

.child {
    /*min-width: 2.5rem;
    min-height: 2.5rem;*/
    padding: .5rem;
    background-color: #97dffa;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border: 1px solid #fff;
    
        align-self: start;
}