CSS Grid

1) Grid Container, Tracks & Gap

.grid{
  display: grid;
  grid-template-columns: 100px 1fr 2fr;
  grid-template-rows: auto 120px;
  gap: 10px;
}

Tracks are columns and rows. The gap adds gutters.

2) fr Unit & minmax()

.grid{
  grid-template-columns: 1fr 2fr minmax(180px, 1fr);
}

fr distributes free space; minmax() guards against too small/large tracks.

3) auto-fit vs auto-fill

.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

auto-fit collapses empty tracks; auto-fill reserves them. Both are great with minmax().

4) Placing Items & Spanning Tracks

.item-a { grid-column: 1 / 3; } /* span two columns */
.item-b { grid-row: 1 / span 2; } /* span two rows */

5) Alignment (justify-* & align-*)

.grid{
  justify-items: center; /* x inside cells */
  align-items: center;   /* y inside cells */
  justify-content: center; /* x of the whole grid */
  align-content: start;   /* y of the whole grid */
}

6) Grid Template Areas

.layout{
  display: grid;
  grid-template-columns: 160px 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "header header header"
                         "sidebar main   main"
                         "footer footer footer";
}
.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

7) Auto Placement & Dense Packing

.grid{
  grid-auto-flow: row dense;
  grid-auto-rows: 80px;
}

dense back-fills gaps when possible (watch out for source-order surprises).

8) Real-World Pattern: Responsive Card Grid

.cards{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}