JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<div id="grid" class="animate">
    <div class="juicy-tile" id="cell_0" style="grid-column-start: 1; grid-column-end: span 1; grid-row-start: 1; grid-row-end: span 1; width: 100px; height: 100px;">1</div>
    <div class="juicy-tile" id="cell_1" style="grid-column-start: 3; grid-column-end: span 2; grid-row-start: 1; grid-row-end: span 1; width: 100%; height: 100px;">2</div>
    <div class="juicy-tile" id="cell_2" style="grid-column-start: 6; grid-column-end: span 1; grid-row-start: 1; grid-row-end: span 1; width: 100%; height: 100px;">3</div>
    <div class="juicy-tile" id="cell_3" style="grid-column-start: 1; grid-column-end: span 6; grid-row-start: 3; grid-row-end: span 1; width: 100%; height: 100px;">4</div>
    <div class="juicy-tile" id="cell_4" style="grid-column-start: 1; grid-column-end: span 3; grid-row-start: 5; grid-row-end: span 1; width: 100%; height: 100px;">5</div>
</div>

CSS

#grid {
    grid-template-columns: 100fr 10px 95fr 105px 10px 100fr;
    grid-template-rows: 100px 10px 100px 10px 100px;
    display:grid;
    width: 420px;
}

JavaScript

alert(document.getElementById("cell_4").offsetWidth);