How do you create a CSS Grid and define its rows and columns?

Put display: grid on the container, then describe the track sizes with grid-template-rows and grid-template-columns.

These two properties literally list the size of each row and each column ("tracks"), in order. The number of values you write is the number of tracks you get.

.container {
  display: grid;
  /* Three rows */
  grid-template-rows: 200px 1fr 100px;
  /* Four columns, each a quarter wide */
  grid-template-columns: 25% 25% 25% 25%;
}

Size units you can mix freely:

• px, %, em — fixed or relative sizes
• fr (fraction) — a share of whatever space is left over
• auto — sized to fit its content

So grid-template-rows: 200px 1fr 100px builds a layout with a fixed 200px header row, a middle row that absorbs all remaining height (1fr), and a fixed 100px footer row — the classic header / content / footer skeleton.

Go deeper:

• MDN — Basic concepts of grid layout — illustrated walkthrough of tracks, grid lines, cells, and the fr unit.
• Grid Garden — write real grid-template-columns/-rows to water your carrots, level by level.