Xác định dòng và cột

3.1 Thuộc tính grid-template-columns

CSS Grid Layout cho phép tạo bố cục trang web phức tạp bằng cách sử dụng dòng và cột. Hai thuộc tính chính để xác định cấu trúc của grid là grid-template-rows và grid-template-columns. Những thuộc tính này cho phép bạn đặt số lượng và kích thước của dòng và cột trong Grid container, từ đó cung cấp cho nhà phát triển khả năng kiểm soát hoàn toàn bố cục của các phần tử.

Thuộc tính grid-template-columns xác định số lượng và kích thước của các cột trong grid. Nó chấp nhận một hoặc nhiều giá trị, có thể được chỉ định trong các đơn vị đo lường khác nhau, như pixel (px), phần trăm (%), đơn vị linh hoạt (fr), và các đơn vị khác.

Ví dụ 1: Đặt kích thước cố định cho cột

Trong ví dụ này, grid sẽ gồm ba cột. Cột đầu tiên có chiều rộng 100px, cột thứ hai có chiều rộng 200px, và cột thứ ba có chiều rộng 100px:

    
      .grid-container {
        display: grid;
        grid-template-columns: 100px 200px 100px; /* Ba cột với kích thước cố định */
      }
    
  

Ví dụ 2: Sử dụng đơn vị linh hoạt (fr)

Trong ví dụ này, grid sẽ gồm ba cột. Cột đầu tiên và cột thứ ba sẽ chiếm một lượng không gian như nhau, còn cột thứ hai sẽ rộng gấp đôi mỗi cột đó:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr 1fr; /* Ba cột với kích thước linh hoạt */
      }
    
  

Ví dụ 3: Sử dụng hàm lặp (repeat)

Trong ví dụ này sử dụng hàm repeat, giúp đơn giản hóa việc viết mã. Grid sẽ gồm ba cột có chiều rộng bằng nhau:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Ba cột bằng nhau */
      }
    
  

Ví dụ 4: Đặt kích thước tối thiểu và tối đa (minmax)

Trong ví dụ này, mỗi trong ba cột sẽ có chiều rộng tối thiểu 100px và kích thước linh hoạt, có thể mở rộng đến 1fr tùy thuộc vào không gian có sẵn:

    
      .grid-container {
        display: grid;
        grid-template-columns: repeat(3, minmax(100px, 1fr)); /* Ba cột với chiều rộng tối thiểu 100px và kích thước linh hoạt */
      }
    
  

3.2 Thuộc tính grid-template-rows

Thuộc tính grid-template-rows tương tự grid-template-columns, nhưng nó xác định số lượng và kích thước của các dòng trong grid. Nó cũng chấp nhận một hoặc nhiều giá trị, có thể được chỉ định trong các đơn vị đo khác nhau.

Ví dụ 1: Đặt kích thước cố định cho dòng

Trong ví dụ này, grid sẽ gồm ba dòng. Dòng đầu tiên cao 50px, dòng thứ hai cao 100px, dòng thứ ba cao 50px:

    
      .grid-container {
        display: grid;
        grid-template-rows: 50px 100px 50px; /* Ba dòng với kích thước cố định */
      }
    
  

Ví dụ 2: Sử dụng đơn vị linh hoạt (fr)

Trong ví dụ này, grid sẽ gồm ba dòng. Dòng đầu tiên và dòng thứ ba sẽ chiếm một lượng không gian bằng nhau, còn dòng thứ hai sẽ cao gấp đôi mỗi dòng đó:

    
      .grid-container {
        display: grid;
        grid-template-rows: 1fr 2fr 1fr; /* Ba dòng với kích thước linh hoạt */
      }
    
  

Ví dụ 3: Sử dụng hàm lặp (repeat)

Trong ví dụ này, sử dụng hàm repeat, giúp đơn giản hóa việc viết mã. Grid sẽ gồm ba dòng có chiều cao bằng nhau:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, 1fr); /* Ba dòng bằng nhau */
      }
    
  

Ví dụ 4: Đặt kích thước tối thiểu và tối đa (minmax)

Trong ví dụ này, mỗi trong ba dòng sẽ có chiều cao tối thiểu 50px và kích thước linh hoạt, có thể mở rộng đến 1fr tùy thuộc vào không gian có sẵn:

    
      .grid-container {
        display: grid;
        grid-template-rows: repeat(3, minmax(50px, 1fr)); /* Ba dòng với chiều cao tối thiểu 50px và kích thước linh hoạt */
      }
    
  

3.3 Kết hợp các thuộc tính

Kết hợp các thuộc tính grid-template-rows và grid-template-columns

Những thuộc tính này có thể được sử dụng cùng nhau để tạo ra các grid phức tạp với kích thước khác nhau cho dòng và cột.

Trong ví dụ này, grid sẽ gồm hai cột: cột đầu tiên sẽ chiếm 1 phần không gian sẵn có, còn cột thứ hai chiếm 2 phần. Grid cũng sẽ gồm hai dòng: dòng đầu tiên cao 100px, còn dòng thứ hai cao 200px.

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
      }
    
  

Ví dụ thực hiện đầy đủ:

    
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 2fr;
        grid-template-rows: 100px 200px;
        gap: 10px;
      }

      .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ụ CSS Grid</title>
          <link rel="stylesheet" href="styles.css">
        </head>
        <body>
          <div class="grid-container">
            <div class="grid-item">Phần tử 1</div>
            <div class="grid-item">Phần tử 2</div>
            <div class="grid-item">Phần tử 3</div>
            <div class="grid-item">Phần tử 4</div>
          </div>
        </body>
      </html>
    
  

Giải thích mã:

• .grid-container: xác định container như một grid-container với hai cột và hai dòng. Khoảng cách giữa các phần tử được thiết lập bằng thuộc tính gap
• .grid-item: xác định phong cách cơ bản cho các phần tử grid, như màu nền, màu chữ, khoảng đệm, căn giữa văn bản và đường viền