🎨 CSS Lesson 07 — CSS Grid

🧭 Grid = 2D Layout — row AND column တပြိုင်နက် ချနိုင်
Flexbox (1D) + Grid (2D) = modern layout powerhouse

1. grid-template-columns

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;  /* 3 fixed columns */
  grid-template-columns: 1fr 1fr 1fr;         /* 3 equal columns */
  grid-template-columns: repeat(3, 1fr);       /* same, shorthand */
  grid-template-columns: 1fr 2fr 1fr;          /* ratio */
  gap: 16px;
}

2. gap

gap: 16px;            /* rows + columns */
row-gap: 10px;
column-gap: 20px;
gap: 10px 20px;       /* row-gap column-gap */

3. grid-column / grid-row — Spanning

.item {
  grid-column: 1 / 3;   /* column 1 မှ 3 အထိ span */
  grid-column: span 2;  /* 2 columns ကျယ် */
  grid-row: 1 / 3;      /* 2 rows ကျယ် */
}

4. grid-template-areas — Named Layout

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

5. auto-fit + minmax — Responsive Grid

/* Responsive without media queries! */
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
/* auto-fit  → stretch to fill empty space */
/* auto-fill → keep column sizes, add empty cols */
/* minmax(min, max) → min size to max size */

6. justify-items & align-items

/* container properties */
justify-items: start | end | center | stretch(default)  /* horizontal */
align-items:   start | end | center | stretch(default)  /* vertical */

/* individual item */
justify-self: center;
align-self: end;

7. Real Use — Card Grid Layout

grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));