CSS Grid as a Default Template
xxxxxxxxxx
.wrapper {
display: grid;
/*Using the full width/height of the designated box elements, use fr as in example below */
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr ;
/*Delete the two lines above and add more/less columns/rows by specifying one more for each below */
grid-template-columns: 100px 100px 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
grid-gap: 10px;
}
.box {
background-color: orange;
/*Play with all the columns/rows width/height properties to get what you're desiring*/
}
/* HTML:
<div class="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
<div class="box">7</div>
<div class="box">8</div>
<div class="box">9</div>
<div class="box">10</div>
<div class="box">11</div>
<div class="box">12</div>
<div class="box">13</div>
<div class="box">14</div>
<div class="box">15</div>
<div class="box">16</div>
</div>
*/