Frontend Hub/CSS Course
Bài học: CSS Grid

Course Content

CSS Fundamentals

Layout Cơ Bản

CSS Grid

🎯 CSS Grid Layout

Học cách tạo layout 2 chiều mạnh mẽ với CSS Grid - công cụ hoàn hảo cho complex layouts và responsive design

💡 CSS Grid là hệ thống layout 2D mạnh mẽ, kiểm soát cả rows và columns để tạo layouts phức tạp dễ dàng.

🏗️ Grid Container

  • • Element với display: grid
  • • Định nghĩa columns và rows
  • • Kiểm soát gap, alignment

📦 Grid Items

  • • Direct children của grid container
  • • Có thể span multiple cells
  • • Có thể explicit positioning

Grid cơ bản

/* Tạo grid container */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}

.grid-item {
  background-color: #ecfdf5;
  padding: 20px;
  text-align: center;
  border: 1px solid #10b981;
  border-radius: 4px;
}

🎯 Grid Best Practices

✅ Do's

  • • Dùng Grid cho 2D layouts
  • • Kết hợp với Flexbox
  • • Sử dụng template-areas cho complex layouts
  • • Dùng auto-fit/auto-fill cho responsive

❌ Don'ts

  • • Không dùng Grid cho 1D layouts
  • • Tránh over-complicated definitions
  • • Không quên browser fallbacks
  • • Tránh nested grids không cần thiết

🎊 Grid vs Flexbox

CSS Grid - 2D

Page layouts, dashboards, galleries

Flexbox - 1D

Navigation, components, centering

📋 CSS Grid Cheat Sheet

Container

display: grid
grid-template-columns: 1fr 1fr
gap: 20px

Items

grid-column: 1 / 3
grid-area: header

Functions

repeat(3, 1fr)
minmax(200px, 1fr)
auto-fit / auto-fill

CSS Grid là công cụ mạnh mẽ nhất cho 2D layouts! 🚀