CSS Grid Layout

Giới thiệu CSS Grid

CSS Grid là hệ thống layout 2 chiều mạnh mẽ cho thiết kế web.

Grid Container

display: grid

.container {
  display: grid;
}

grid-template-columns & grid-template-rows

.container {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: 100px auto 100px;
}

gap

.container {
  display: grid;
  gap: 20px; /* row-gap và column-gap */
}

Grid Items

grid-column & grid-row

.item {
  grid-column: 1 / 3; /* Bắt đầu từ line 1, kết thúc ở line 3 */
  grid-row: 1 / 2;
}

.item-large {
  grid-column: span 2; /* Chiếm 2 cột */
}

grid-area

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar content content"
    "footer footer footer";
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

Advanced Grid Features

minmax()

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

auto-fit vs auto-fill

.container {
  /* auto-fit: co giãn các track để lấp đầy container */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  
  /* auto-fill: tạo nhiều track nhất có thể */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

Ví dụ thực tế

Holy Grail Layout

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="main">Main Content</main>
  <aside class="ads">Ads</aside>
  <footer class="footer">Footer</footer>
</div>

.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main ads"
    "footer footer footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  gap: 20px;
}

.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.ads { grid-area: ads; }
.footer { grid-area: footer; }

@media (max-width: 768px) {
  .grid-container {
    grid-template-areas:
      "header"
      "sidebar"
      "main"
      "ads"
      "footer";
    grid-template-columns: 1fr;
  }
}