Khóa học Frontend NextJS + React

<div class="grid-container-1">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
</div>

.grid-container-1 {
    display: grid; /* Biến phần tử cha thành Grid Container */
    /* Định nghĩa 3 cột với chiều rộng bằng nhau.
       1fr có nghĩa là 1 phần của không gian trống có sẵn. */
    grid-template-columns: 1fr 1fr 1fr;
    /* Hoặc cách viết ngắn gọn hơn: */
    /* grid-template-columns: repeat(3, 1fr); */

    /* Tạo khoảng cách giữa các items */
    gap: 10px;

    padding: 10px; /* Thêm padding để dễ nhìn */
    border: 1px solid #ccc;
}

.grid-item {
    background-color: #f0f0f0;
    border: 1px solid #d0d0d0;
    padding: 20px;
    text-align: center;
}

<div class="grid-container-2">
    <div class="grid-item sidebar">Sidebar (200px)</div>
    <div class="grid-item main-content">Nội dung chính (chiếm phần còn lại)</div>
</div>

.grid-container-2 {
    display: grid;
    /* Cột đầu tiên cố định 200px, cột thứ hai chiếm 1 phần tự do (toàn bộ phần còn lại) */
    grid-template-columns: 200px 1fr;
    gap: 15px; /* Tăng khoảng cách một chút */

    padding: 10px;
    border: 1px solid #ccc;
}

.grid-item {
    background-color: #e9e9ff; /* Màu khác để phân biệt */
    border: 1px solid #c0c0ee;
    padding: 20px;
    text-align: center;
    /* Đảm bảo nội dung đủ dài để thấy rõ layout */
    min-height: 100px;
}

.sidebar {
    background-color: #ffe9e9;
}

<div class="grid-container-3">
    <header class="grid-item" style="background-color: #ffd700;">Header</header>
    <nav class="grid-item" style="background-color: #add8e6;">Navigation</nav>
    <main class="grid-item" style="background-color: #90ee90;">Main Content</main>
    <footer class="grid-item" style="background-color: #ffb6c1;">Footer</footer>
</div>

.grid-container-3 {
    display: grid;

    /* Định nghĩa các "khu vực" (areas) của layout bằng tên */
    grid-template-areas:
        "header header header" /* Hàng 1: 3 cột đều là 'header' */
        "nav    main   main"   /* Hàng 2: cột 1 là 'nav', cột 2&3 là 'main' */
        "footer footer footer"; /* Hàng 3: 3 cột đều là 'footer' */

    /* Định nghĩa số lượng và chiều rộng/cao của các cột/hàng */
    grid-template-columns: 150px 1fr 1fr; /* Cột nav cố định, 2 cột còn lại linh hoạt */
    grid-template-rows: auto 1fr auto;     /* Hàng header/footer tự co giãn theo nội dung, hàng main chiếm phần còn lại */

    gap: 10px; /* Khoảng cách giữa các khu vực */

    min-height: 400px; /* Đặt chiều cao tối thiểu để thấy rõ layout */
    padding: 10px;
    border: 1px solid #ccc;
}

/* Gán tên "khu vực" đã định nghĩa ở trên cho từng phần tử */
header     { grid-area: header; }
nav        { grid-area: nav; }
main       { grid-area: main; }
footer     { grid-area: footer; }

.grid-container-3 .grid-item {
     border: 1px solid #d0d0d0;
     padding: 20px;
     text-align: center;
     /* Xóa màu nền ở .grid-item chung nếu đã đặt màu riêng cho từng khu vực */
     background-color: initial;
}

<div class="grid-container-4">
    <div class="grid-item" style="width: 50px; height: 50px;">Center</div>
    <div class="grid-item" style="width: 70px;">End</div>
    <div class="grid-item" style="height: 60px;">Start</div>
    <div class="grid-item">Stretch</div>
</div>

.grid-container-4 {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Lưới 2 cột */
    grid-template-rows: repeat(2, 100px); /* Lưới 2 hàng cố định 100px */
    gap: 10px;

    /* Căn chỉnh tất cả items trong container theo chiều ngang (trong ô của chúng) */
    justify-items: center; /* center, start, end, stretch */

    /* Căn chỉnh tất cả items trong container theo chiều dọc (trong ô của chúng) */
    align-items: center; /* center, start, end, stretch */

    padding: 10px;
    border: 1px solid #ccc;
}

/* Có thể ghi đè căn chỉnh cho từng item riêng lẻ bằng justify-self, align-self */
.grid-container-4 .grid-item:nth-child(2) {
     justify-self: end; /* Item thứ 2 căn sang phải trong ô của nó */
}

.grid-container-4 .grid-item:nth-child(3) {
     align-self: start; /* Item thứ 3 căn lên trên trong ô của nó */
}

.grid-container-4 .grid-item:nth-child(4) {
     /* Mặc định là stretch nếu item không có kích thước cố định */
     justify-self: stretch;
     align-self: stretch;
}

.grid-container-4 .grid-item {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px;
    /* text-align: center;  Không cần text-align nếu dùng justify-items/align-items center */
}

<div class="grid-container-5">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
    <div class="grid-item">Item 7</div>
    <div class="grid-item">Item 8</div>
</div>

.grid-container-5 {
    display: grid;

    /* repeat(auto-fit, ...) là ma thuật chính!
       Nó sẽ tự động tạo CỘT dựa trên không gian có sẵn.
       minmax(250px, 1fr) định nghĩa kích thước của mỗi cột:
       - Chiều rộng tối thiểu (min) là 250px.
       - Chiều rộng tối đa (max) là 1fr (chiếm 1 phần không gian trống).
       Kết hợp lại, các cột sẽ co giãn nhưng không nhỏ hơn 250px.
       Khi không còn đủ chỗ cho cột 250px nữa, nó sẽ tự động xuống hàng mới. */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 15px;

    padding: 10px;
    border: 1px solid #ccc;
}

.grid-container-5 .grid-item {
    background-color: #fffacd;
    border: 1px solid #eee8aa;
    padding: 20px;
    text-align: center;
    min-height: 80px; /* Đặt chiều cao để dễ hình dung */
}