Cân chỉnh Grid Container

8.1 Thuộc tính justify-content

CSS Grid Layout cung cấp công cụ mạnh mẽ để quản lý việc cân chỉnh toàn bộ container lưới trong không gian có sẵn. Các thuộc tính justify-content, align-content và place-content cho phép điều khiển cân chỉnh hàng và cột trong container, đảm bảo tính linh hoạt và chính xác khi tạo bố cục.

Thuộc tính justify-content điều khiển cân chỉnh ngang của toàn bộ lưới trong container. Thuộc tính này hữu ích khi kích thước của container lớn hơn chiều rộng cần thiết của lưới.

Cú pháp:

    
      .grid-container {
        display: grid;
        justify-content: value;
      }
    
  

Trong đó: value có thể nhận các giá trị sau:

• start: căn chỉnh lưới theo đầu container
• end: căn chỉnh lưới theo cuối container
• center: căn chỉnh lưới ở giữa container
• stretch: kéo giãn lưới để điền đầy container
• space-around: đặt không gian đều quanh mỗi phần tử
• space-between: đặt không gian đều giữa các phần tử
• space-evenly: đặt không gian đều giữa các phần tử và cạnh container

Ví dụ 1: Cân chỉnh theo đầu của container

Trong ví dụ này, toàn bộ nội dung sẽ được căn chỉnh theo cạnh trái của container:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: start; /* Cân chỉnh nội dung theo cạnh trái của container */
      }
    
  

Ví dụ 2: Căn giữa nội dung

Trong ví dụ này, toàn bộ nội dung sẽ được căn giữa bên trong container:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        justify-content: center; /* Căn giữa nội dung bên trong container */
      }
    
  

8.2 Thuộc tính align-content

Thuộc tính align-content xác định cách nội dung lưới được căn chỉnh theo trục dọc trong grid-container. Nó hữu ích khi lưới không điền hết không gian dọc có sẵn.

Cú pháp:

    
      .grid-container {
        align-content: value;
      }
    
  

Trong đó: value — giá trị xác định cân chỉnh dọc của nội dung. Các giá trị có thể:

• start: căn chỉnh nội dung theo đầu container
• end: căn chỉnh nội dung theo cuối container
• center: căn giữa nội dung trong container
• space-between: đặt nội dung với khoảng cách bằng nhau giữa các phần tử
• space-around: đặt nội dung với khoảng cách bằng nhau quanh mỗi phần tử
• space-evenly: đặt nội dung với khoảng cách bằng nhau giữa các phần tử và cạnh container
• stretch (mặc định): kéo giãn nội dung để điền đầy không gian có sẵn

Ví dụ 1: Cân chỉnh theo đầu của container

Trong ví dụ này, toàn bộ nội dung sẽ được căn chỉnh theo cạnh trên của container:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: start; /* Cân chỉnh nội dung theo cạnh trên của container */
      }
    
  

Ví dụ 2: Căn giữa nội dung

Trong ví dụ này, toàn bộ nội dung sẽ được căn giữa bên trong container:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 100px);
        align-content: center; /* Căn giữa nội dung bên trong container */
      }
    
  

8.3 Thuộc tính place-content

Thuộc tính place-content là một dạng viết tắt để đặt đồng thời các giá trị của justify-content và align-content.

Cú pháp:

    
      .grid-container {
        place-content: justify-value align-value;
      }
    
  

Trong đó:

• justify-value: giá trị cho cân chỉnh ngang (justify-content)
• align-value: giá trị cho cân chỉnh dọc (align-content)

Ví dụ 1: Căn giữa nội dung theo cả chiều ngang và dọc

Trong ví dụ này, toàn bộ nội dung sẽ được căn giữa bên trong container theo cả chiều ngang và dọc:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: center center; /* Căn giữa nội dung theo cả chiều ngang và dọc */
      }
    
  

Ví dụ 2: Kéo giãn nội dung theo chiều rộng và căn chỉnh theo đầu

Trong ví dụ này, nội dung sẽ được kéo giãn theo chiều rộng của container và căn chỉnh theo cạnh trên:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px);
        grid-template-rows: repeat(3, 100px);
        place-content: stretch start; /* Kéo giãn nội dung theo chiều rộng và căn chỉnh theo cạnh trên */
      }
    
  

8.4 Ví dụ triển khai hoàn chỉnh

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 100px); /* Ba cột có chiều rộng cố định */
        grid-template-rows: repeat(3, 100px); /* Ba hàng có chiều cao cố định */
        gap: 10px;
        place-content: center center; /* Căn giữa nội dung theo chiều ngang và dọc */
      }

      .grid-item {
        background-color: #3498db;
        color: white;
        padding: 20px;
        text-align: center;
        border: 1px solid #fff;
      }
    
  

    
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Ví dụ cân chỉnh Grid Container</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ã nguồn:

• .grid-container: tạo một container Grid với ba cột có chiều rộng cố định và ba hàng có chiều cao cố định. Sử dụng thuộc tính place-content để căn giữa nội dung theo chiều ngang và dọc.
• .grid-item: xác định các kiểu cơ bản cho các phần tử lưới, như màu nền, màu chữ, đệm, căn giữa chữ và đường viền.