JSFiddle - React, Tailwind, and code Playground

by jnfsmile

HTML

<div style="height:60%; margin: 20px">
 <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
    <li>i</li>
</ul>
</div>

CSS

* {
    margin:0;
    padding:0;
}
ul {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    counter-reset:image;
}
li {
    background: #f0f0f0;
    background-size:cover;
    width:29%;
    height:29%;
    top:0%;
    left: 0%;
    list-style:none;
    margin: 10px;
    position:absolute;
    border: 1px solid goldenrod;
}
s
li:nth-child(-n+3) {
    top:0%;
}
li:nth-child(n+4) {
    top:31%;
}
li:nth-child(n+7) {
    top:62%;
}
li:nth-child(3n+2) {
    left:31%;
}
li:nth-child(3n+3) {
    left:62%;
}