JSFiddle - React, Tailwind, and code Playground

by mrmayfield

HTML

<div class="holder">
    <div class="sqs-col-32">1</div>
    <div class="sqs-col-32">2</div>
    <div class="sqs-col-32">3</div>
    <div class="sqs-col-32">4</div>
    <div class="sqs-col-32">5</div>
    <div class="sqs-col-32">6</div>
    <div class="sqs-col-32">7</div>
    <div class="sqs-col-32">8</div>

     

</div>

CSS

.holder{
    width: 100%
}

.sqs-col-32{
  border-right: 2px solid black;
  border-bottom: 2px solid black;
  float: left;
  width: 31%;
  height: 100px;
  background-color: blue;
}

.sqs-col-32:nth-child(3n){
    border-right: none;
}

JavaScript

function removeBottomBorder(){
function findLowMultiple(n){
if(n > 0)
        return Math.floor(n/3) * 3;
    else if( n === 0)
        console.log("shouldn't be 0");
    else
        return 3;
}

totalSquares = $('.sqs-col-32').length

lowMultiple = findLowMultiple(totalSquares)

amountToRemoveBorder = totalSquares - lowMultiple

if(0 == 0){
    return data = $('.sqs-col-32').slice(-3).css("border-bottom", "0px solid black");

}

console.log('running')

amountToSlice = amountToRemoveBorder * -1 

console.log(amountToSlice)

data = $('.sqs-col-32').slice(-3).css("border-bottom", "0px solid black");

}
 
 removeBottomBorder()