JSFiddle - React, Tailwind, and code Playground

by Tomek

HTML

<div id="largeFrac" class="grid">
    <div>0</div>
    <div>1</div>
    <div>2</div>
</div>
<div id="smallFrac" class="grid">
    <div>0</div>
    <div>1</div>
    <div>2</div>
</div>

CSS

#smallFrac {
    grid-template-columns: 20fr 10px 19fr 21px 10px 20fr;
}
#largeFrac {
    grid-template-columns: 100fr 10px 95fr 105px 10px 100fr;
}
#largeFrac>* {
    background-color: lightpink;
}
#smallFrac>* {
    background-color: lightgreen;
}
.grid {
    grid-template-rows: 1em;
    display: grid;
    background-color:lightgray;
    width: 720px
}
.grid :first-child {
    grid-column: 1;
    grid-row: 1;
}
.grid>:nth-child(2) {
    grid-column: 3;
    grid-row: 1;
}
.grid>:nth-child(3) {
    grid-column: 4;
    grid-row: 1;
}