Căn chỉnh phần tử trong Grid

7.1 Thuộc tính justify-items

CSS Grid Layout cung cấp các công cụ hiệu quả để quản lý căn chỉnh các phần tử bên trong lưới. Các thuộc tính justify-items, align-items và place-items cho phép điều chỉnh cách các phần tử grid được bố trí trong các ô của chúng theo chiều ngang và chiều dọc. Hãy cùng tìm hiểu chi tiết những thuộc tính này.

Thuộc tính justify-items xác định căn chỉnh theo chiều ngang của tất cả các phần tử grid bên trong các ô của chúng trên toàn bộ lưới.

Cú pháp:

    
      .grid-container {
        justify-items: value;
      }
    
  

Ở đây:

• value: giá trị xác định căn chỉnh theo chiều ngang của phần tử. Các giá trị khả dĩ:
  • start: căn chỉnh phần tử theo đầu ô
  • end: căn chỉnh phần tử theo cuối ô
  • center: căn giữa phần tử trong ô
  • stretch (mặc định): kéo dài phần tử để lấp đầy toàn bộ chiều rộng của ô

Ví dụ 1: Căn chỉnh theo đầu ô

Trong ví dụ này, tất cả các phần tử sẽ được căn chỉnh theo mép trái của ô:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: start; /* Tất cả phần tử được căn chỉnh theo đầu ô */
      }
    
  

Ví dụ 2: Căn giữa phần tử

Trong ví dụ này, tất cả các phần tử sẽ được căn giữa trong các ô:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        justify-items: center; /* Tất cả phần tử được căn giữa trong ô */
      }
    
  

7.2 Thuộc tính align-items

Thuộc tính align-items xác định căn chỉnh theo chiều dọc của tất cả các phần tử grid bên trong các ô của chúng trên toàn bộ lưới.

Cú pháp:

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

Ở đây:

• value: giá trị xác định căn chỉnh theo chiều dọc của phần tử. Các giá trị khả dĩ:
  • start: căn chỉnh phần tử theo đầu ô
  • end: căn chỉnh phần tử theo cuối ô
  • center: căn giữa phần tử theo chiều dọc trong ô
  • stretch (mặc định): kéo dài phần tử để lấp đầy toàn bộ chiều cao của ô

Ví dụ 1: Căn chỉnh theo đầu ô

Trong ví dụ này, tất cả các phần tử sẽ được căn chỉnh theo mép trên của ô:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: start; /* Tất cả phần tử được căn chỉnh theo đầu ô */
      }
    
  

Ví dụ 2: Căn giữa phần tử theo chiều dọc

Trong ví dụ này, tất cả các phần tử sẽ được căn giữa theo chiều dọc trong các ô:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        align-items: center; /* Tất cả phần tử được căn giữa theo chiều dọc trong ô */
      }
    
  

7.3 Thuộc tính place-items

Thuộc tính place-items là viết tắt để đồng thời thiết lập các giá trị align-items và justify-items.

Cú pháp:

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

Ở đây:

• align-value: giá trị cho căn chỉnh theo chiều dọc trong ô (align-items)
• justify-value: giá trị cho căn chỉnh theo chiều ngang trong ô (justify-items)

Trong trường hợp chỉ định một giá trị cho thuộc tính place-items, chẳng hạn như place-items: stretch, các phần tử sẽ được căn chỉnh theo cả hai hướng.

Ví dụ 1: Căn giữa phần tử theo chiều dọc và chiều ngang

Trong ví dụ này, tất cả các phần tử sẽ được căn giữa trong các ô theo cả chiều ngang và chiều dọc:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: center; /* Các phần tử được căn giữa theo cả chiều ngang và chiều dọc */
      }
    
  

Ví dụ 2: Kéo dài phần tử theo chiều cao và căn chỉnh theo mép trên bên trái

Trong ví dụ này, tất cả các phần tử sẽ được kéo dài theo chiều cao và căn chỉnh theo mép trên bên trái của ô:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 100px);
        place-items: stretch start; /* Các phần tử kéo dài toàn bộ chiều cao của ô và căn chỉnh theo mép trên bên trái */
      }
    
  

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

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

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Ba cột có độ rộng bằng nhau */
        grid-template-rows: repeat(3, 100px); /* Ba hàng có chiều cao cố định */
        gap: 10px;
        place-items: center center; /* Căn giữa phần tử theo cả chiều ngang và chiều 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 phần tử trong CSS Grid</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ó độ rộng bằng nhau và ba hàng có chiều cao cố định. Sử dụng thuộc tính place-items để căn giữa phần tử theo cả chiều ngang và chiều dọc
• .grid-item: định nghĩa các kiểu cơ bản cho phần tử grid, như màu nền, màu chữ, khoảng cách, căn giữa văn bản và đường viền