SnippetUI
← Back to snippets

CSS Grid Gallery Responsive

Cách xây dựng image gallery responsive sử dụng auto-fit và minmax mà không cần đến media queries.

HTMLCSS

Bằng cách kết hợp display: grid với grid-template-columns: repeat(auto-fit, minmax(..., 1fr)), bạn có thể dễ dàng tạo ra một image gallery có khả năng tự động tính toán lại số cột tùy theo chiều rộng của viewport. Kỹ thuật này giúp layout responsive một cách hoàn hảo mà không cần phải viết thêm bất kỳ một dòng media query (@media) nào.

Xem trước (Preview)

Gallery image 1Gallery image 2Gallery image 3Gallery image 4Gallery image 5Gallery image 6

Ứng dụng & Tính năng nổi bật (Use Cases & Features)

  • Portfolio hoặc Image Gallery: Rất lý tưởng cho các trang cần hiển thị danh sách hình ảnh theo dạng lưới gọn gàng.
  • Danh sách sản phẩm (E-commerce): Hoàn toàn có thể áp dụng để layout các product card trên trang danh mục.
  • Không cần media query: Việc ứng dụng auto-fit kết hợp minmax giúp code CSS trở nên siêu tinh gọn, dễ đọc và dễ bảo trì.

Thiết kế & Trải nghiệm người dùng (Design & UX)

  • Cố định tỷ lệ khung hình (Aspect Ratio): Sự kết hợp giữa aspect-ratio: 1 / 1 và object-fit: cover đảm bảo các item luôn là hình vuông đều đặn, cho dù hình ảnh gốc có các kích thước khác nhau.
  • Hiệu ứng hover (Hover Effect): Bổ sung hiệu ứng nổi nhẹ (transform: translateY và scale) cùng đổ bóng (box-shadow) khi hover sẽ báo hiệu trực quan cho người dùng rằng đây là các phần tử có thể tương tác được.
  • Animation mượt mà: Sử dụng hàm timing cubic-bezier mang lại cảm giác chuyển động mượt mà và tự nhiên hơn.

Hướng dẫn tùy chỉnh (Customization)

  • Điều chỉnh chiều rộng tối thiểu: Bằng cách thay đổi giá trị 200px trong minmax(200px, 1fr), bạn có thể kiểm soát kích thước nhỏ nhất của mỗi item. Giá trị này càng lớn, số lượng cột tối đa trên một hàng sẽ càng ít đi.
  • Thay đổi tỷ lệ ảnh: Dễ dàng tùy biến lại tỷ lệ ảnh cho phù hợp với nhu cầu thiết kế bằng cách đổi sang 16 / 9 (khung hình ngang) hoặc 3 / 4 (khung hình dọc).

Mã nguồn (Implementation)

index.html 
<div class="gallery">
<img src="/gallery/1.png" alt="Gallery image 1" class="gallery-item" />
<img src="/gallery/2.png" alt="Gallery image 2" class="gallery-item" />
<img src="/gallery/3.png" alt="Gallery image 3" class="gallery-item" />
<img src="/gallery/4.png" alt="Gallery image 4" class="gallery-item" />
<img src="/gallery/5.png" alt="Gallery image 5" class="gallery-item" />
<img src="/gallery/6.png" alt="Gallery image 6" class="gallery-item" />
</div>
styles.css 
.gallery {
display: grid;
/* Tự động điều chỉnh số lượng cột để lấp đầy container trong phạm vi không dưới 200px */
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
padding: 16px;
width: 100%;
box-sizing: border-box;
}

.gallery-item {
width: 100%;
/* Luôn giữ nguyên hình vuông */
aspect-ratio: 1 / 1;
/* Cắt ảnh sao cho tỷ lệ không bị phá vỡ */
object-fit: cover;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}

.gallery-item:hover {
/* Hiệu ứng nổi lên một chút khi hover */
transform: translateY(-4px) scale(1.02);
box-shadow: 0 12px 20px rgba(0, 0, 0, 0.1);
z-index: 10;
}

Hỗ trợ trình duyệt (Browser Support)

  • Cả display: grid và aspect-ratio đều được hỗ trợ đầy đủ trên tất cả các trình duyệt hiện đại (Chrome, Firefox, Safari, Edge).
  • Do không hỗ trợ các trình duyệt quá cũ (như IE11), bạn có thể cần xem xét thêm các giải pháp fallback nếu dự án có yêu cầu khắt khe.