<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="item">21</div>
<div class="item">22</div>
<div class="item">23</div>
<div class="item">24</div>
<div class="item">25</div>
<div class="item">26</div>
<div class="item">27</div>
<div class="item">28</div>
<div class="item">29</div>
<div class="item">30</div>
<div class="item">31</div>
<div class="item">32</div>
<div class="item">33</div>
<div class="item">34</div>
<div class="item">35</div>
<div class="item">36</div>
<div class="item">37</div>
<div class="item">38</div>
<div class="item">39</div>
<div class="item">40</div>
<div class="item">41</div>
<div class="item">42</div>
<div class="item">43</div>
<div class="item">44</div>
<div class="item">45</div>
<div class="item">46</div>
<div class="item">47</div>
<div class="item">48</div>
<div class="item">49</div>
<div class="item">50</div>
<div class="item">51</div>
<div class="item">52</div>
<div class="item">53</div>
<div class="item">54</div>
<div class="item">55</div>
<div class="item">56</div>
<div class="item">57</div>
<div class="item">58</div>
<div class="item">59</div>
<div class="item">60</div>
<div class="item">61</div>
<div class="item">62</div>
<div class="item">63</div>
<div class="item">64</div>
<div class="item">65</div>
<div class="item">66</div>
<div class="item">67</div>
<div class="item">68</div>
<div class="item">69</div>
<div class="item">70</div>
<div class="item">71</div>
<div class="item">72</div>
<div class="item">73</div>
<div class="item">74</div>
<div class="item">75</div>
<div class="item">76</div>
<div class="item">77</div>
<div class="item">78</div>
<div class="item">79</div>
<div class="item">80</div>
<div class="item">81</div>
<div class="item">82</div>
<div class="item">83</div>
<div class="item">84</div>
<div class="item">85</div>
<div class="item">86</div>
<div class="item">87</div>
<div class="item">88</div>
<div class="item">89</div>
<div class="item">90</div>
<div class="item">91</div>
<div class="item">92</div>
<div class="item">93</div>
<div class="item">94</div>
<div class="item">95</div>
<div class="item">96</div>
<div class="item">97</div>
<div class="item">98</div>
<div class="item">99</div>
<div class="item">100</div>
<div class="item">101</div>
<div class="item">102</div>
<div class="item">103</div>
<div class="item">104</div>
<div class="item">105</div>
<div class="item">106</div>
<div class="item">107</div>
<div class="item">108</div>
<div class="item">109</div>
<div class="item">110</div>
<div class="item">111</div>
<div class="item">112</div>
<div class="item">113</div>
<div class="item">114</div>
<div class="item">115</div>
<div class="item">116</div>
<div class="item">117</div>
<div class="item">118</div>
<div class="item">119</div>
<div class="item">120</div>
<div class="item">121</div>
<div class="item">122</div>
<div class="item">123</div>
<div class="item">124</div>
<div class="item">125</div>
<div class="item">126</div>
<div class="item">127</div>
<div class="item">128</div>
<div class="item">129</div>
<div class="item">130</div>
<div class="item">131</div>
<div class="item">132</div>
<div class="item">133</div>
<div class="item">134</div>
<div class="item">135</div>
<div class="item">136</div>
<div class="item">137</div>
<div class="item">138</div>
<div class="item">139</div>
<div class="item">140</div>
<div class="item">141</div>
<div class="item">142</div>
<div class="item">143</div>
<div class="item">144</div>
<div class="item">145</div>
<div class="item">146</div>
<div class="item">147</div>
<div class="item">148</div>
<div class="item">149</div>
<div class="item">150</div>
<div class="item">151</div>
<div class="item">152</div>
<div class="item">153</div>
<div class="item">154</div>
<div class="item">155</div>
<div class="item">156</div>
<div class="item">157</div>
<div class="item">158</div>
<div class="item">159</div>
<div class="item">160</div>
<div class="item">161</div>
<div class="item">162</div>
<div class="item">163</div>
<div class="item">164</div>
<div class="item">165</div>
<div class="item">166</div>
<div class="item">167</div>
<div class="item">168</div>
<div class="item">169</div>
<div class="item">170</div>
<div class="item">171</div>
<div class="item">172</div>
<div class="item">173</div>
<div class="item">174</div>
<div class="item">175</div>
<div class="item">176</div>
<div class="item">177</div>
<div class="item">178</div>
<div class="item">179</div>
<div class="item">180</div>
<div class="item">181</div>
<div class="item">182</div>
<div class="item">183</div>
<div class="item">184</div>
<div class="item">185</div>
<div class="item">186</div>
<div class="item">187</div>
<div class="item">188</div>
<div class="item">189</div>
<div class="item">190</div>
<div class="item">191</div>
<div class="item">192</div>
<div class="item">193</div>
<div class="item">194</div>
<div class="item">195</div>
<div class="item">196</div>
<div class="item">197</div>
<div class="item">198</div>
<div class="item">199</div>
<div class="item">200</div>
<div class="item">201</div>
<div class="item">202</div>
<div class="item">203</div>
<div class="item">204</div>
<div class="item">205</div>
<div class="item">206</div>
<div class="item">207</div>
<div class="item">208</div>
<div class="item">209</div>
<div class="item">210</div>
<div class="item">211</div>
<div class="item">212</div>
<div class="item">213</div>
<div class="item">214</div>
<div class="item">215</div>
<div class="item">216</div>
<div class="item">217</div>
<div class="item">218</div>
<div class="item">219</div>
<div class="item">220</div>
<div class="item">221</div>
<div class="item">222</div>
<div class="item">223</div>
<div class="item">224</div>
<div class="item">225</div>
<div class="item">226</div>
<div class="item">227</div>
<div class="item">228</div>
<div class="item">229</div>
<div class="item">230</div>
<div class="item">231</div>
<div class="item">232</div>
<div class="item">233</div>
<div class="item">234</div>
<div class="item">235</div>
<div class="item">236</div>
<div class="item">237</div>
<div class="item">238</div>
<div class="item">239</div>
<div class="item">240</div>
<div class="item">241</div>
<div class="item">242</div>
<div class="item">243</div>
<div class="item">244</div>
<div class="item">245</div>
<div class="item">246</div>
<div class="item">247</div>
<div class="item">248</div>
<div class="item">249</div>
<div class="item">250</div>
<div class="item">251</div>
<div class="item">252</div>
<div class="item">253</div>
<div class="item">254</div>
<div class="item">255</div>
<div class="item">256</div>
</div>
.grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-auto-flow: dense;
gap: 10px;
}
.item {
aspect-ratio: 1 / 1;
display: grid;
place-content: center;
background-color: #ccc;
}
.item:nth-child(13n + 1) {
grid-column: 1 / span 2;
grid-row: span 2;
}
.item:nth-child(13n + 2) {
grid-column: 3 / span 2;
grid-row: span 2;
}
.item:nth-child(13n + 3) {
grid-column: 5 / span 2;
grid-row: span 2;
}
.item:nth-child(13n + 4) {
grid-column: 1 / span 3;
grid-row: span 3;
}
.item:nth-child(13n + 5) {
grid-column: 4 / span 3;
grid-row: span 3;
}
.item:nth-child(13n + 6) {
grid-column: 1 / span 4;
grid-row: span 4;
}
.item:nth-child(13n + 7) {
grid-column: 5 / span 2;
grid-row: span 2;
}
.item:nth-child(13n + 8) {
grid-column: 5 / span 2;
grid-row: span 2;
}
.item:nth-child(13n + 9) {
grid-column: 1 / span 3;
grid-row: span 3;
}
.item:nth-child(13n + 10) {
grid-column: 4 / span 3;
grid-row: span 3;
}
.item:nth-child(13n + 11) {
grid-column: 1 / span 2;
grid-row: span 2;
}
.item:nth-child(13n + 12) {
grid-column: 1 / span 2;
grid-row: span 2;
}
.item:nth-child(13n + 13) {
grid-column: 3 / span 4;
grid-row: span 4;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.