CSS Subgrid và Container Queries: Thay thế hoàn toàn Media Queries phức tạp

Thoát khỏi sự phụ thuộc vào kích thước màn hình toàn cục (Viewport)#

Trong hơn một thập kỷ, các lập trình viên Frontend đều dựa vào Media Queries (@media (min-width: 768px)) để làm giao diện Responsive.

Tuy nhiên, Media Queries có một hạn chế cố hữu: Nó chỉ quan tâm đến độ rộng của toàn bộ màn hình thiết bị, chứ không quan tâm đến độ rộng của khung chứa (Container) mà component đó đang nằm bên trong.

Hai tính năng CSS hiện đại đã được hỗ trợ 100% trên mọi trình duyệt lớn là Container Queries và Subgrid.

1. Container Queries: Component tự thích ứng theo không gian thực tế#

/* Đánh dấu phần tử cha là một container theo chiều ngang */
.card-wrapper {
  container-type: inline-size;
}

/* Khi khung chứa của component rộng hơn 400px: Tự động đổi layout! */
@container (min-width: 400px) {
  .user-card {
    display: flex;
    flex-direction: row;
    gap: 1.5rem;
  }
}

Bây giờ, dù bạn đặt component .user-card ở sidebar hẹp (màn hình to nhưng sidebar nhỏ) hay ở giữa trang chính, component đều tự động hiển thị layout hoàn hảo mà không cần viết media query riêng cho từng trang!

2. CSS Subgrid: Căn hàng thẳng tắp giữa các Card độc lập#

Trước đây trong CSS Grid, các phần tử con bên trong mỗi Card không thể căn thẳng hàng với nhau nếu độ dài của tiêu đề hoặc mô tả không đều nhau.

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-template-rows: auto auto auto; /* 3 hàng: Header, Body, Footer */
}

.card-item {
  display: grid;
  grid-template-rows: subgrid; /* Kế thừa trực tiếp lưới của cha! */
  grid-row: span 3;
}

Tất cả các nút "Xem chi tiết" ở chân card sẽ luôn luôn nằm trên cùng một đường thẳng tắp, đẹp mắt tuyệt đối!

Góc thảo luận#

Anh em đã đưa Container Queries và Subgrid vào dự án production thực tế chưa? Còn rào cản nào về browser compatibility không?

Xem thêm nội dung liên quan:

• Học CSS & UI Styling Chuyên nghiệp
• Review công cụ lập trình web