CSS Grid Lanes: Masonry Layout Cuối Cùng Được Hỗ Trợ Native

Sau nhiều năm tranh luận về cú pháp, CSS Masonry Layout cuối cùng đã có tên chính thức: grid-lanes. Safari 26 là browser đầu tiên ship tính năng này, và đây là mọi thứ bạn cần biết với tư cách là một frontend developer.

Masonry Layout là gì và tại sao nó khó?

Masonry layout — kiểu layout mà Pinterest dùng, các cards có chiều cao khác nhau được sắp xếp lấp đầy không gian trống — trước đây không thể làm thuần CSS mà không có JavaScript. Bạn cần libraries như Masonry.js hoặc tự calculate positions bằng tay với IntersectionObserver và resize events.

CSS Working Group đã bàn cãi về tính năng này từ lâu. Hai đề xuất chính là: nhúng masonry vào CSS Grid (với grid-template-rows: masonry) hoặc tạo display type mới. Cuối cùng, họ chọn cú pháp display: grid-lanes.

Cú pháp mới: grid-lanes

Đây là cách dùng cơ bản nhất:

/* Masonry layout với 3 cột */
.masonry-container {
  display: grid-lanes;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Mỗi item tự điều chỉnh chiều cao — không cần gì thêm */
.masonry-item {
  break-inside: avoid;
}

So sánh với cách cũ dùng CSS columns (vẫn hoạt động nhưng flow theo vertical, không phải horizontal):

/* Cách cũ — column flow, items sắp xếp từ trên xuống rồi sang cột tiếp */
.old-masonry {
  columns: 3;
  column-gap: 1rem;
}

/* Grid Lanes — row flow đúng như mong muốn, item 1 trước rồi mới đến item 2 */
.new-masonry {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

Responsive Masonry không cần media queries

Điều thú vị nhất là khi kết hợp grid-lanes với auto-fill và minmax — bạn có layout responsive hoàn toàn mà không cần một media query nào:

.photo-gallery {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  padding: 1rem;
}

.photo-card {
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
}

.photo-card img {
  width: 100%;
  height: auto;
  display: block;
}

.photo-card-caption {
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

Ở màn hình rộng bạn có nhiều cột, trên mobile tự thu về 1-2 cột. Không JavaScript, không library, không resize handler.

Dùng trong React/Next.js với CSS Modules

Tailwind CSS chưa có official support cho grid-lanes, nhưng bạn có thể dùng CSS Modules hoặc arbitrary values tạm thời:

/* styles/gallery.module.css */
.masonryGrid {
  display: grid-lanes;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.masonryItem {
  break-inside: avoid;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

// components/PhotoGallery.tsx
import styles from "./gallery.module.css";

interface Photo {
  id: string;
  url: string;
  alt: string;
  caption?: string;
}

export function PhotoGallery({ photos }: { photos: Photo[] }) {
  return (
    <div className={styles.masonryGrid}>
      {photos.map((photo) => (
        <div key={photo.id} className={styles.masonryItem}>
          <img src={photo.url} alt={photo.alt} />
          {photo.caption && <p>{photo.caption}</p>}
        </div>
      ))}
    </div>
  );
}

Progressive Enhancement — Làm đúng ngay từ đầu

Hiện tại (Q1 2026), Safari 26 là browser đầu tiên ship grid-lanes. Chrome và Firefox đang theo sau. Để không breaking users của browsers khác, dùng @supports:

/* Fallback cho browsers chưa support */
.masonry-grid {
  columns: 3;
  column-gap: 1rem;
}

/* Progressive enhancement với grid-lanes */
@supports (display: grid-lanes) {
  .masonry-grid {
    display: grid-lanes;
    columns: unset;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

Approach này đảm bảo: Safari 26 users có masonry layout đẹp, còn lại fallback về CSS columns — vẫn functional, chỉ là thứ tự items sẽ theo vertical thay vì horizontal.

Kết luận

Sau nhiều năm phụ thuộc vào JavaScript cho masonry layouts, chúng ta cuối cùng có giải pháp CSS native. grid-lanes không chỉ đơn giản hơn mà còn performant hơn đáng kể — browser handle layout natively thay vì JavaScript phải recalculate sau mỗi lần resize hay load ảnh mới.

Takeaway: Nếu bạn đang build photo galleries, card feeds, hay bất kỳ UI nào cần "fill gaps intelligently", hãy bookmark cú pháp này. Implement ngay với @supports để Safari 26 users có trải nghiệm tốt nhất — đây sẽ là một trong những CSS features được dùng nhiều nhất trong 2026.