grid-template-columns và grid-template-rows hoạt động thế nào?

.grid {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;      /* 3 cột */
  grid-template-rows: auto 1fr auto;          /* 3 hàng */
}

/* repeat() cho track lặp lại */
.g2 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(2, 200px) 1fr; }

/* responsive không cần media query */
.cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* đặt tên cho đường kẻ, dùng lại khi đặt item */
.g4 { grid-template-columns: [full-start] 1fr [content-start] 720px [content-end] 1fr [full-end]; }

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