grid-template-columns and grid-template-rows are awesome CSS properties for defining the size & number of grid columns and rows.
They can take a ton of different values (e.g. length, percentage, fr, repeat, minmax, etc.), and make it really easy to control the width and height of your grid columns and rows.
Example
<div id="grid">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>10</span>
<span>11</span>
<span>12</span>
</div>
#grid {
display: grid;
grid-template-columns: 150px repeat(2, 50px) 300px;
grid-template-rows: 40px repeat(2, 100px);
}
#grid span {
border: 1px solid black;
padding: 5px;
text-align: center;
}
Result
1
2
3
4
5
6
7
8
9
10
11
12