Tidadigi Logo

CSS grid-gap Property

Thuộc tính grid-gap đặt kích thước khoảng cách giữa các hàng và cột trong grid layout. Nó cho phép bạn dễ dàng kiểm soát khoảng cách giữa các phần tử. Khoảng cách này áp dụng cho cả hướng ngang và hướng dọc.

Đây là thuộc tính viết tắt cho các thuộc tính sau:

  • grid-column-gap property
  • grid-row-gap property

Syntax: 

grid-gap: grid-row-gap grid-column-gap;

Property Values:

  • grid-row-gap: Đặt kích thước khoảng cách giữa các hàng trong grid layout. Giá trị mặc định là 0.
  • grid-column-gap: Đặt kích thước khoảng cách giữa các cột trong grid layout. Giá trị mặc định là 0.

Different Examples of CSS Grid Gap Property

Example 1:  Trong ví dụ này, chúng ta sử dụng thuộc tính CSS grid-gap để tạo khoảng cách giữa hàng và cột.

html 
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS grid-gap Property
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: black;
        }

        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-column-gap: 50px;
            grid-row-gap: 10px;
            background-color: blue;
            padding: 10px;
        }

        .grid-container>div {
            background-color: white;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>Grid-gap property</h2>
    <p>This grid has a 50px gap between
        columns and 10px gap between rows. :
    </p>
    <div class="grid-container">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
        <div class="item5">S</div>
    </div>
</body>
  
</html>

Output: 

css-grid-gap-property

Example 2:  Trong ví dụ này, chúng ta sử dụng thuộc tính CSS grid-gap để tạo khoảng cách giữa hàng và cột.

html 
<!DOCTYPE html>
<html>
  
<head>
    <title>
        CSS grid-gap Property
    </title>
    <style>
        body {
            text-align: center;
        }

        h1 {
            color: green;
        }

        .grid-container {
            display: grid;
            grid-template-columns: auto auto auto;
            grid-column-gap: 8%;
            grid-row-gap: 5%;
            background-color: black;
            padding: 6%;
        }

        .grid-container>div {
            background-color: yellow;
            text-align: center;
            padding: 20px 0;
            font-size: 30px;
        }
    </style>
</head>

<body>

    <h1>GeeksforGeeks</h1>
    <h2>Grid-gap property</h2>
    <p>This grid has a 8% gap between columns
        and 5% gap between rows:
    </p>
    <div class="grid-container">
        <div class="item1">G</div>
        <div class="item2">E</div>
        <div class="item3">E</div>
        <div class="item4">K</div>
        <div class="item5">S</div>
    </div>
</body>
  
</html>

Output: 

css-grid-gap-property

Thuộc tính CSS grid-gap rất hữu ích để tạo bố cục grid đẹp mắt và có khoảng cách tốt. Bằng cách hiểu và sử dụng các thuộc tính grid-gap, grid-row-gap, và grid-column-gap, các nhà phát triển có thể đạt được sự kiểm soát chính xác khoảng cách giữa các phần tử. Nó giúp nâng cao thiết kế và khả năng sử dụng trang web. Đảm bảo khả năng tương thích giữa các trình duyệt. Cân nhắc các phiên bản trình duyệt được hỗ trợ khi triển khai thuộc tính này để duy trì trải nghiệm người dùng nhất quán.

Supported Browsers: Các trình duyệt được hỗ trợ bởi grid-gap property được liệt kê dưới đây:

  • Google Chrome 57.0 trở lên
  • Edge 16.0 trở lên
  • Mozilla Firefox 52.0 trở lên
  • Safari 10.1 trở lên
  • Opera 44.0 trở lên

Last Updated : 21/07/2025