JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<h1>Grid: With CSS Variables</h1>


<div class="grid-container">
  <a href="#"><div class="grid-item">1<br>hfju</div></a>
  <a href="#"><div class="grid-item">2</div></a>
  <a href="#"><div class="grid-item">3</div></a>
  <a href="#"><div class="grid-item">4</div></a>
  <a href="#"><div class="grid-item">5</div></a>
  <a href="#"><div class="grid-item">6</div></a>  
  <a href="#"><div class="grid-item">7</div></a>
  <a href="#"><div class="grid-item">8</div></a>
  <a href="#"><div class="grid-item">9</div> </a> 
  <a href="#"><div class="grid-item">10</div> </a>
  <a href="#"><div class="grid-item">11</div> </a>
  <a href="#"><div class="grid-item">12</div> </a>
</div>

CSS

:root {--columns: 300px 300px 300px;
--h1-font-size: 40px;}
    


h1 {font-size: var(--h1-font-size);}

.grid-container  {
display: inline-grid;
grid-template-columns: var(--columns);
grid-gap: 10px

}
.grid-container a  {
display: inline-grid;
}
.grid-item {
background-color: #999;
padding: 20px 0;
font-size: 30px;
text-align: center;
}

@media all and (max-width: 900px) {:root {--columns: 300px 300px; --h1-font-size: 30px;} }
@media all and (max-width: 600px) {:root {--columns: 300px; --h1-font-size: 20px;} }