/* =====================================================================
   CSS Grid 2 Chiều — File code thực hành mẫu
   Bài 3, Series CSS & Animation — js-tools.org
   Mở file index.html bất kỳ, áp các class dưới đây để thử nghiệm.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Lưới tường minh cơ bản: grid-template + đơn vị fr
   --------------------------------------------------------------------- */
.grid-basic {
  display: grid;
  /* 200px cố định | phần còn lại | 100px cố định */
  grid-template-columns: 200px 1fr 100px;
  grid-template-rows: auto auto;
  gap: 16px; /* fr tự trừ gap → không bao giờ tràn */
}

/* Lưới 12 cột kinh điển bằng repeat() */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

/* ---------------------------------------------------------------------
   2. Lưới thẻ responsive — KHÔNG cần media query
   auto-fit  : thu rãnh rỗng về 0 → thẻ giãn lấp đầy hàng
   auto-fill : giữ rãnh rỗng → thẻ giữ kích thước min, chừa chỗ trống
   --------------------------------------------------------------------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* ---------------------------------------------------------------------
   3. Đặt vị trí theo đường lưới (line-based placement)
   --------------------------------------------------------------------- */
.placement {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 120px;
  gap: 10px;
}
.placement .hero {
  grid-column: 1 / 3; /* = 1 / span 2 → chiếm 2 cột */
  grid-row: 1 / 2;
}
.placement .sidebar {
  grid-column: 3 / 4;
  grid-row: 1 / 3; /* kéo dài qua 2 hàng */
}
.placement .full {
  grid-column: 1 / -1; /* trải trọn chiều ngang lưới */
}

/* Lưới ngầm (implicit grid): item dư sẽ rơi vào rãnh tự sinh */
.dense {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 80px;
  grid-auto-flow: dense; /* lấp lỗ hổng (cẩn thận thứ tự đọc) */
  gap: 8px;
}

/* ---------------------------------------------------------------------
   4. Bố cục cả trang bằng tên vùng: grid-template-areas
   --------------------------------------------------------------------- */
.layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    'header  header'
    'sidebar main'
    'footer  footer';
  min-height: 100vh;
  gap: 12px;
}
.layout > header {
  grid-area: header;
}
.layout > nav {
  grid-area: sidebar;
}
.layout > main {
  grid-area: main;
}
.layout > footer {
  grid-area: footer;
}

/* Mobile: sắp xếp lại layout chỉ bằng cách viết lại sơ đồ vùng */
@media (max-width: 640px) {
  .layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      'header'
      'main'
      'sidebar'
      'footer';
  }
}