CSS Grid: cột, hàng, fr, gap và grid-template-areas

Một grid trong ba dòng

Đặt display: grid cho container và liệt kê các cột bằng grid-template-columns. Các phần tử con lấp vào các ô theo thứ tự, từ trái sang phải trong tiếng Anh, và một hàng mới bắt đầu mỗi khi các cột đã đầy:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
      gap: 12px;
    }
    .grid div { background: #2563eb; color: white; padding: 16px; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
    <div>7</div>
  </div>
</body>
</html>

Bảy item, ba cột: hai hàng đầy đủ và hàng thứ ba có item 7 ở cột đầu tiên. Mọi cột đều rộng bằng nhau, và mọi item trong một hàng đều cao bằng nhau, nên các cạnh thẳng hàng theo cả hai chiều. Đó là điều grid làm được mà flexbox không có.

Playground grid

Nhập bất kỳ giá trị grid-template-columns nào, hoặc bấm vào một mẫu có sẵn. Phần hiển thị cho biết chiều rộng các cột mà trình duyệt tính ra (từ getComputedStyle) và số hàng các item cần dùng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .presets button { font: 12px ui-monospace, monospace; padding: 4px 8px; border: 1px solid #111827; background: white; cursor: pointer; }
    #grid { display: grid; gap: 8px; padding: 8px; background: #e5e7eb; }
    #grid div { background: #16a34a; color: white; padding: 10px; text-align: center; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <label>grid-template-columns: <input id="cols" size="36" value="repeat(3, 1fr)"></label>
  <div class="presets" id="presets"></div>
  <div id="grid"></div>
  <pre id="out"></pre>
  <script>
    const grid = document.getElementById('grid');
    const input = document.getElementById('cols');
    for (let i = 1; i <= 8; i++) grid.insertAdjacentHTML('beforeend', '<div>' + i + '</div>');
    const update = () => {
      grid.style.gridTemplateColumns = input.value;
      const cols = getComputedStyle(grid).gridTemplateColumns;
      const rows = getComputedStyle(grid).gridTemplateRows.split(' ').length;
      document.getElementById('out').textContent =
        'columns: ' + cols + '\n' + cols.split(' ').length + ' columns, ' + rows + ' rows';
    };
    ['repeat(3, 1fr)', '1fr 2fr', '200px 1fr', 'auto 1fr auto', 'repeat(4, 100px)', 'repeat(auto-fill, minmax(120px, 1fr))'].forEach((v) => {
      const b = document.createElement('button');
      b.textContent = v;
      b.addEventListener('click', () => { input.value = v; update(); });
      document.getElementById('presets').append(b);
    });
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Vài điều đáng xem: 1fr 2fr làm cột thứ hai rộng đúng gấp đôi cột đầu. 200px 1fr giữ 200px và dành phần còn lại cho cột thứ hai. auto 1fr auto cho hai cột ngoài rộng theo nội dung. repeat(4, 100px) để lại khoảng trống ở cuối vì không có cột nào co giãn. Một giá trị không hợp lệ, như 1fr 2, sẽ bị bỏ qua và grid giữ giá trị hợp lệ gần nhất.

Đơn vị fr

fr nghĩa là "một phần của không gian trống". Trình duyệt trừ trước các cột cố định (px, rem, %, nội dung auto) và các khoảng gap, rồi chia phần còn lại cho các cột fr theo con số của chúng.

fr không giống %: phần trăm cộng với gap có thể vượt quá 100% và tràn ra ngoài, còn các cột fr luôn chỉ chia phần còn lại sau khi đã trừ gap.

repeat(), minmax() và grid responsive không cần media query

repeat(4, 1fr) là 1fr 1fr 1fr 1fr. minmax(120px, 1fr) là một cột không bao giờ hẹp hơn 120px và giãn ra để nhận một phần không gian. Kết hợp chúng với auto-fill hoặc auto-fit thay cho số lượng, grid sẽ tạo nhiều cột nhất có thể vừa:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

Chỉ một khai báo đó cho ra số cột rộng ít nhất 180px nhiều nhất mà container chứa được: nhiều cột trên màn hình rộng, một cột trên điện thoại, không cần media query. Sự khác biệt giữa auto-fill và auto-fit lộ ra khi số item ít hơn số cột:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto-fill vs auto-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .g { display: grid; width: 560px; background: #e5e7eb; margin: 4px 0 14px; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .g div { background: #2563eb; color: white; padding: 10px; outline: 1px solid white; }
  </style>
</head>
<body>
  <code>auto-fill</code>
  <div class="g fill"><div>A</div><div>B</div><div>C</div></div>
  <code>auto-fit</code>
  <div class="g fit"><div>A</div><div>B</div><div>C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.g')].map((g) =>
      g.className.split(' ')[1] + ': ' + [...g.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(', ')
    ).join(' | ');
  </script>
</body>
</html>

Container chứa được năm cột 100px. auto-fill giữ cả năm cột, nên A, B và C mỗi item rộng 112px và còn lại hai cột trống. auto-fit thu gọn các cột trống, nên ba item giãn ra mỗi item khoảng 187px.

Đặt item: grid-column và grid-row

Các đường grid được đánh số từ 1 ở mép bắt đầu. grid-column: 1 / 3 nghĩa là "từ đường 1 đến đường 3", tức hai cột. span 2 nghĩa là "hai cột tính từ chỗ item rơi vào", còn -1 là đường cuối cùng:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spanning</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 8px; }
    .grid div { background: #16a34a; color: white; padding: 8px; }
    .grid .wide { grid-column: 1 / -1; background: #111827; }
    .grid .big { grid-column: span 2; grid-row: span 2; background: #2563eb; }
    .grid .tall { grid-row: span 2; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="wide">grid-column: 1 / -1</div>
    <div class="big">span 2 x 2</div>
    <div class="tall">grid-row: span 2</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

Item màu tối lấp đầy cả hàng đầu tiên. Item màu xanh phủ một khối 2 x 2, item màu hổ phách phủ hai hàng. Item a và b tự lấp vào các ô còn lại: grid đặt mọi item có thể vào ô trống kế tiếp. grid-auto-rows: 60px đặt chiều cao cho những hàng bạn không khai báo bằng grid-template-rows.

grid-template-areas: đặt tên cho các phần của bố cục

Với bố cục trang, hãy đặt tên các vùng và vẽ chúng bằng chữ. Mỗi chuỗi là một hàng, mỗi từ là một ô, và một item gia nhập một vùng bằng grid-area:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid areas</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      display: grid;
      grid-template-columns: 160px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "side   main"
        "footer footer";
      gap: 8px;
      min-height: 280px;
    }
    header { grid-area: header; background: #111827; color: white; }
    aside  { grid-area: side;   background: #e5e7eb; }
    main   { grid-area: main;   background: #bfdbfe; }
    footer { grid-area: footer; background: #111827; color: white; }
    .page > * { padding: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

Header và footer trải qua cả hai cột vì tên của chúng lấp đầy cả hai ô trong hàng. Hàng giữa là 1fr, nên nó lấy toàn bộ chiều cao còn lại của 280px. Để xếp chồng mọi thứ trên điện thoại, một media query chỉ cần vẽ lại các vùng thành một cột: grid-template-areas: "header" "side" "main" "footer" với grid-template-columns: 1fr. Trang media query trình bày mẫu này.

Căn chỉnh bên trong ô

Grid item mặc định giãn ra lấp đầy ô của nó. Các thuộc tính sau di chuyển item bên trong ô:

display: grid; place-items: center; là cách ngắn nhất để căn giữa một phần tử con trong hộp.

Grid hay flexbox

Grid là hai chiều: bạn quyết định các cột (và hàng), nội dung lấp vào đó, nên mọi thẻ trong thư viện đều rộng bằng nhau kể cả ở hàng cuối. Flexbox là một chiều: các item tự lấy kích thước theo nội dung dọc theo một đường duy nhất. Hai thứ kết hợp rất tốt: grid cho trang và thư viện thẻ, flexbox bên trong mỗi thẻ cho hàng tiêu đề. Trang flexbox trình bày nửa còn lại.

Thứ tự và khả năng tiếp cận

grid-template-areas, grid-row, grid-column và order có thể đặt item ở bất kỳ đâu, nhưng trình đọc màn hình và phím Tab vẫn đi theo thứ tự HTML. Giữ thứ tự trong mã nguồn có ý nghĩa (header, điều hướng, nội dung chính, footer) và dùng grid để sắp xếp nó, không phải để chữa một thứ tự HTML vô lý.

Lỗi thường gặp

• Đặt display: grid trên các item. Thuộc tính này đặt trên phần tử cha; chỉ con trực tiếp mới là grid item.
• Dùng phần trăm cùng với gap. grid-template-columns: 50% 50% cộng gap: 16px sẽ tràn ra 16px. Dùng 1fr 1fr.
• Dùng auto-fill khi bạn muốn auto-fit. Với ít item, auto-fill để lại các cột trống. Chuyển sang auto-fit để giãn các item.
• Một cột 1fr rộng hơn phần của nó. Cột 1fr không co nhỏ hơn nội dung dài nhất của nó (một URL dài, một ảnh rộng). Dùng minmax(0, 1fr) để nó co được.
• Chuỗi vùng không phải hình chữ nhật. Mỗi vùng được đặt tên phải tạo thành một hình chữ nhật, và mỗi chuỗi hàng phải có cùng số ô, nếu không cả khai báo grid-template-areas sẽ bị bỏ qua.
• Quên rằng số thứ tự đường bắt đầu từ 1. Ba cột có bốn đường: 1 / 4 hoặc 1 / -1 trải qua cả ba cột.