Những bài học
Bắt đầu
Bắt đầu học
CodeGym /Khóa học Java /Frontend SELF VI /Chia không gian

Chia không gian

Frontend SELF VI
Mức độ , Bài học
Có sẵn

6.1 Thuộc tính grid-gap

CSS Grid Layout cung cấp công cụ linh hoạt để quản lý không gian giữa các phần tử trong grid. Các thuộc tính grid-gap, grid-row-gap và grid-column-gap cho phép dễ dàng đặt khoảng cách giữa các hàng và cột, giúp tạo ra giao diện ngăn nắp và có tổ chức. Chúng ta sẽ xem xét kỹ hơn các thuộc tính này.

Thuộc tính grid-gap (rút gọn là gap) xác định khoảng cách tổng thể giữa các hàng và cột trong grid. Đây là cách viết rút gọn cho grid-row-gap và grid-column-gap.

Cú pháp:

    
      .grid-container {
        grid-gap: value;
      }

Ở đây:

  • value: giá trị khoảng cách giữa các hàng và cột. Có thể được chỉ định bằng các đơn vị khác nhau (px, %, fr, auto, v.v.)

Ví dụ 1: Giá trị chung cho hàng và cột

Trong ví dụ này, khoảng cách 20px sẽ được áp dụng cho cả hàng và cột:

CSS
    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-gap: 20px; /* Khoảng cách 20px giữa tất cả hàng và cột */
      }

Ví dụ 2: Giá trị khác nhau cho hàng và cột

Trong ví dụ này, sử dụng hai giá trị: giá trị đầu tiên (10px) cho hàng, giá trị thứ hai (20px) cho cột:

CSS
    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-gap: 10px 20px; /* 10px giữa hàng và 20px giữa cột */
      }

6.2 Thuộc tính grid-row-gap

Thuộc tính grid-row-gap xác định khoảng cách giữa các hàng trong grid. Điều này cho phép đặt giá trị riêng biệt cho khoảng cách giữa hàng, không phụ thuộc vào cột.

Cú pháp:

    
      .grid-container {
        grid-row-gap: value;
      }

Ở đây:

  • value: giá trị khoảng cách giữa các hàng. Có thể được chỉ định bằng các đơn vị khác nhau

    • Ví dụ 1: Đặt khoảng cách cố định giữa các hàng

    Trong ví dụ này, khoảng cách giữa các hàng sẽ là 15px:

    CSS
        
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-row-gap: 15px; /* Khoảng cách 15px giữa các hàng */
      }

    Ví dụ 2: Sử dụng phần trăm để đặt khoảng cách

    Trong ví dụ này, khoảng cách giữa các hàng sẽ là 5% của chiều cao hàng:

    CSS
        
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-row-gap: 5%; /* Khoảng cách 5% của chiều cao hàng */
      }

    6.3 Thuộc tính grid-column-gap

    Thuộc tính grid-column-gap xác định khoảng cách giữa các cột trong grid. Điều này cho phép đặt giá trị riêng biệt cho khoảng cách giữa cột, không phụ thuộc vào hàng.

    Cú pháp:

        
      .grid-container {
        grid-column-gap: value;
      }

    Ở đây:

    • value: giá trị khoảng cách giữa các cột. Có thể được chỉ định bằng các đơn vị khác nhau

    Ví dụ 1: Đặt khoảng cách cố định giữa các cột

    Trong ví dụ này, khoảng cách giữa các cột sẽ là 25px:

    CSS
        
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-column-gap: 25px; /* Khoảng cách 25px giữa các cột */
      }

    Ví dụ 2: Sử dụng em để đặt khoảng cách

    Trong ví dụ này, khoảng cách giữa các cột sẽ là 2em:

    CSS
        
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        grid-column-gap: 2em; /* Khoảng cách 2em giữa các cột */
      }

    6.4 Kết hợp sử dụng grid-row-gap và grid-column-gap

    Bạn có thể kết hợp các thuộc tính grid-row-gap và grid-column-gap để quản lý chính xác hơn khoảng cách giữa các hàng và cột.

    Ví dụ triển khai đầy đủ:

    CSS
        
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Ba cột có cùng độ rộng */
        grid-template-rows: repeat(3, 100px); /* Ba hàng có chiều cao cố định */
        grid-row-gap: 15px; /* Khoảng cách 15px giữa các hàng */
        grid-column-gap: 25px; /* Khoảng cách 25px giữa các cột */
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    HTML
        
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Sử dụng grid-gap, grid-row-gap và grid-column-gap</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item item1">Phần tử 1</div>
            <div class="grid-item item2">Phần tử 2</div>
            <div class="grid-item item3">Phần tử 3</div>
            <div class="grid-item item4">Phần tử 4</div>
            <div class="grid-item item5">Phần tử 5</div>
            <div class="grid-item item6">Phần tử 6</div>
          </div>
        </body>
      </html>

    Giải thích mã:

    • .grid-container: tạo một container Grid với ba cột có cùng độ rộng và ba hàng có chiều cao cố định. Sử dụng các thuộc tính grid-row-gap và grid-column-gap để đặt khoảng cách giữa các hàng và cột
    • .grid-item: xác định các kiểu cơ bản cho các phần tử trong grid như màu nền, màu chữ, khoảng đệm, canh giữa văn bản và đường viền
    Bình luận
    TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
    GO TO FULL VERSION