To implement a grid layout and customize the number of columns, you can utilize the CSS grid model along with adjusting the column numbers using grid-column. This method involves a clever workaround. You can start by setting the original column value to 60, then specify span for the first 6 elements (first and second rows) to be 20, followed by setting span for the 7th to 11th elements to 12, and finally setting span for the remaining elements to 15.
Wondering how we came up with those values? We basically calculated the LCM of 3, 4, and 5 which equals 60. Then we divided 60 by each column number: 60 / 3 = 20, 60 / 5 = 12, 60 / 4 = 15.
ul {
display: grid;
grid-template-columns: repeat(60, 1fr);
}
li:nth-child(-n+6) {
grid-column: span 20;
}
li:nth-child(n+7):nth-child(-n+11) {
grid-column: span 12;
}
li:nth-child(n+12) {
grid-column: span 15;
}
/* just for styling */
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
li {
text-align: center;
}
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
</ul>
If you wish to replicate the image exactly, you can simply add grid-column: 1 to the starting row of each block:
ul {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
li:nth-child(1), li:nth-child(4), li:nth-child(7), li:nth-child(12) {
grid-column: 1;
}
/* just for styling */
ul,
li {
list-style: none;
margin: 0;
padding: 0;
}
li {
text-align: center;
}
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
</ul>