<!-- Fixed column sizes -->
.grid {
  display: grid;
  grid-template-columns: 200px 300px 200px;
  /* Three columns: 200px, 300px, 200px -->
}

<!-- [200px] [300px] [200px] -->

/* Variable column sizes -->
.grid {
  display: grid;
  grid-template-columns: 100px 200px;
  /* Two columns: 100px, 200px */
}

<!-- [100px] [200px] -->

/* Single row definition -->
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 100px;  /* all rows 100px tall -->
}

<!-- [1/4] [2/4] [1/4] -->
<!-- All rows are 100px -->

/* Multiple row sizes -->
.grid {
  display: grid;
  grid-template-rows: 100px auto 50px;
  /* Three rows: fixed, auto, fixed */
}

<!-- Row 1: 100px -->
<!-- Row 2: content height -->
<!-- Row 3: 50px -->

/* Mixing units -->
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  /* Two fixed sides, flexible middle */
}

<!-- [200px fixed] [flexible] [200px fixed] -->

<!-- fr: flexible ratio unit -->
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* Three equal columns, share available space -->
}

<!-- [33%] [33%] [33%] -->

/* Unequal ratios -->
.grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  /* First column is 2/3, second is 1/3 */
}

<!-- [66%] [33%] -->

/* Mixed units with fr -->
.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;
  /* 200px fixed, remaining split equally */
}

<!-- [200px] [remaining/2] [remaining/2] -->

/* fr respects gap -->
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  /* fr accounts for gap in calculation */
}

<!-- [~50% - 10px] [gap:20px] [~50% - 10px] -->

/* Complex fr ratios -->
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  /* Ratios: 1:2:1 -->
}

<!-- [25%] [50%] [25%] -->

<!-- Two-column sidebar layout -->
.layout {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
  min-height: 100vh;
}

.header { grid-column: 1 / -1; }
.sidebar { grid-row: 2; }
.content { grid-row: 2; }
.footer { grid-column: 1 / -1; }

<!-- Sidebar 250px fixed, content flexible -->

/* Three-column with center larger -->
.grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 20px;
}

<!-- [25%] [50%] [25%] -->

/* Fixed + flex + fixed (common) -->
.toolbar {
  display: grid;
  grid-template-columns: 100px 1fr 100px;
  gap: 20px;
}

<!-- [fixed] [flexible] [fixed] -->

/* Content-sized grid */
.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 20px;
  width: fit-content;
}

<!-- Columns size to their content -->

/* Responsive grid with repeat -->
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

<!-- Auto number of columns, each 250px+, wraps responsively -->

<!-- repeat() for pattern repetition -->
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Equivalent to: 1fr 1fr 1fr */
}

<!-- [1fr] [1fr] [1fr] -->

/* Repeat with fixed sizes -->
.grid {
  display: grid;
  grid-template-columns: repeat(4, 200px);
  /* Equivalent to: 200px 200px 200px 200px -->
}

<!-- [200px] [200px] [200px] [200px] -->

/* auto-fit: responsive columns (fit items) -->
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  width: 100%;
}

<!-- Columns wrap: creates as many 200px columns as fit -->

/* auto-fill: responsive columns (fill space) -->
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

<!-- Like auto-fit but fills remaining space with empty tracks -->

/* Repeating pattern -->
.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr 2fr);
  /* Equivalent to: 1fr 2fr 1fr 2fr */
}

<!-- [1fr] [2fr] [1fr] [2fr] -->

/* For rows too -->
.grid {
  display: grid;
  grid-template-rows: repeat(3, 200px);
  height: 600px;
}

<!-- Three 200px rows -->

<!-- auto: size to content -->
.grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  /* Sides size to content, middle flexible */
}

<!-- [content] [flexible] [content] -->

/* All auto: all columns size to content -->
.grid {
  display: grid;
  grid-template-columns: auto auto auto;
  width: fit-content;
}

<!-- Columns only as wide as needed -->

/* mix-content keywords -->
.grid {
  display: grid;
  grid-template-columns: min-content 1fr max-content;
}

<!-- Left: minimum content width -->
<!-- Middle: flexible fill -->
<!-- Right: maximum content width -->

/* Practical examples -->

/* Table with fixed sidebar and flex content -->
.form {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
}

.label {
  /* Left column sizes to label text -->
}

input {
  /* Right column flexible -->
}

<!-- Labels don't stretch, inputs do -->

/* Navigation with flex middle -->
.navbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
}

.logo { /* auto: logo width */ }
.nav { /* 1fr: flexible center */ }
.actions { /* auto: button width */ }