Bài 14. CSS Grid chi tiết

Một số khái niệm

Flexbox phù hợp sắp xếp theo một hướng dựa vào nội dung; Grid phù hợp khi cần kiểm soát cả hàng lẫn cột, bố cục định trước. Thực tế hay kết hợp: Grid cho khung trang, Flexbox cho thành phần bên trong.

.luoi {
  display: grid;
  grid-template-columns: 200px 1fr 1fr;   /* 3 cột: cố định + 2 phần bằng nhau */
  grid-template-rows: auto 1fr auto;
  gap: 16px;
}
.item { grid-column: 1 / 3; grid-row: 2; }  /* từ đường 1 đến 3: chiếm 2 cột */
.rong { grid-column: span 2; }              /* chiếm 2 cột từ vị trí hiện tại */
.het-hang { grid-column: 1 / -1; }          /* từ đầu đến cuối */

Lưới cơ bản và span

<style>
  .g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .g div { background: #1565c0; color: #fff; padding: 12px; border-radius: 6px; text-align: center; font-size: 13px; }
  .a { grid-column: span 2; background: #e65100 !important; }
  .b { grid-row: span 2; background: #2e7d32 !important; }
  .c { grid-column: 1 / -1; background: #6a1b9a !important; }
</style>
<div class="g"><div class="a">span 2 cột</div><div class="b">span 2 hàng</div><div>3</div><div>4</div><div>5</div><div>6</div><div class="c">1 / -1 toàn hàng</div></div>

Bố cục trang với grid-template-areas

<style>
  .trang { display: grid; gap: 8px; min-height: 230px;
    grid-template-columns: 160px 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "dau dau" "ben chinh" "chan chan"; }
  .trang > * { padding: 10px; border-radius: 6px; color: #fff; }
  header { grid-area: dau; background: #1b5e20; } aside { grid-area: ben; background: #43a047; }
  main { grid-area: chinh; background: #a5d6a7; color: #1b5e20 !important; } footer { grid-area: chan; background: #2e7d32; }
  @media (max-width: 500px) { .trang { grid-template-columns: 1fr; grid-template-areas: "dau" "chinh" "ben" "chan"; } }
</style>
<div class="trang"><header>header</header><aside>aside</aside><main>main</main><footer>footer</footer></div>

Đổi bố cục trên điện thoại chỉ bằng cách viết lại grid-template-areas trong media query, không cần sửa HTML.

Lưới tự co giãn: auto-fit + minmax

<style>
  .the-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
  .the-grid div { background: #fff3e0; border: 1px solid #ffcc80; border-radius: 8px; padding: 14px; text-align: center; }
</style>
<div class="the-grid"><div>Python</div><div>JavaScript</div><div>PHP</div><div>SQL</div><div>CSS</div><div>Flutter</div></div>

Dòng repeat(auto-fit, minmax(140px, 1fr)) tự tính số cột theo chiều rộng: mỗi cột tối thiểu 140px, phần dư chia đều. Đây là cách làm lưới sản phẩm responsive phổ biến nhất. auto-fill giữ lại cột trống, auto-fit giãn các cột hiện có.

Căn chỉnh và subgrid

.luoi { justify-items: center; align-items: start; }  /* căn nội dung trong ô */
.luoi { justify-content: center; }                 /* căn cả lưới trong khung */
.item { justify-self: end; align-self: center; }    /* căn riêng item */
.luoi { grid-auto-flow: dense; }                    /* lấp chỗ trống */

/* subgrid: con dùng chung đường lưới của cha để tiêu đề, nội dung, nút các thẻ thẳng hàng */
.the { display: grid; grid-row: span 3; grid-template-rows: subgrid; }