CSS grid-template-columns and grid-template-rows

Two properties on the container describe the tracks.

• grid-template-columns sets the columns: one size per column.
• grid-template-rows sets the rows.

1
2
3
4
5
6
7
8
9
10

<style>
  .grid > div { background: #d0e8f2; border: 1px solid #1a5276; padding: 10px; }
  .grid {
    display: grid;
    grid-template-columns: 100px 1fr 2fr;
    grid-template-rows: 60px auto;
    gap: 8px;
  }
</style>
<div class="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

The first column is a fixed 100px. The other two share what is left, in a 1:2 ratio. The first row is 60px tall. The second row is auto, so it fits its content.

Sizes you can use

Explicit and implicit tracks

Tracks you define are explicit. Items that do not fit go into implicit rows that the browser adds. Size those with grid-auto-rows:

1

.grid { grid-auto-rows: minmax(80px, auto); }

Where does each item go?

Items fill the grid left to right, then top to bottom, one cell per item. The next lessons show how to control spacing (gap) and how to place items yourself (lines).