×

Cách sử dụng grid-row-gap - Quản lý khoảng cách giữa các hàng trong Grid

Avatar of admin
admin 1 Views

Khi làm việc với CSS Grid, việc điều chỉnh khoảng cách giữa các hàng là một phần quan trọng để bố trí nội dung một cách hợp lý và thẩm mỹ. Một trong những thuộc tính quan trọng và hữu ích cho việc này là grid-row-gap. Tuy nhiên, kể từ phiên bản chuẩn mới hơn, thuộc tính này đã được thay thế bằng row-gap. Mặc dù vậy, hiểu cách thức hoạt động của grid-row-gap vẫn rất cần thiết để làm việc với các project cũ hoặc tham khảo học thuật.

grid-row-gap là gì?

Thuộc tính grid-row-gap cho phép bạn đặt khoảng cách dọc giữa các hàng trong lưới. Điều này giúp tạo ra khoảng trống và ngăn cách các phần tử nằm trên các hàng khác nhau, làm cho bố cục trang web trở nên dễ nhìn và thoải mái hơn cho người dùng.

Cú pháp và sử dụng

Cú pháp cơ bản của grid-row-gap rất đơn giản:

.grid-container {
  display: grid;
  grid-row-gap: 20px;
}

Trong ví dụ trên, khoảng cách giữa các hàng sẽ được đặt là 20px. Bạn có thể sử dụng các đơn vị khác như rem, em, %, hoặc vw để điều chỉnh giá trị khoảng cách theo ý muốn.

Ứng dụng thực tế

Hãy cùng xem xét một ví dụ cụ thể:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-row-gap: 30px;
            gap: 20px; /* Tùy chọn để áp dụng cả khoảng cách cột */
        }
        .grid-item {
            background-color: rgba(255, 165, 0, 0.8);
            border: 1px solid rgba(0, 0, 0, 0.8);
            padding: 20px;
            font-size: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>  
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>  
    </div>
</body>
</html>

Trong ví dụ này, .grid-container sẽ có khoảng cách giữa các hàng là 30px và khoảng cách giữa các cột là 20px nhờ vào thuộc tính gap.

Lưu ý về phiên bản

Kể từ CSS Grid Level 2, grid-row-gap đã được chuyển thành row-gap. Vì thế, đối với các dự án mới hoặc khi bạn muốn chắc chắn rằng mã nguồn của mình tuân theo tiêu chuẩn mới nhất, hãy sử dụng row-gap.

.grid-container {
  display: grid;
  row-gap: 20px;
}

Kết luận

Việc nắm rõ và sử dụng grid-row-gap giúp bạn quản lý khoảng cách giữa các hàng trong các thiết kế dùng CSS Grid một cách dễ dàng. Dù thuộc tính này hiện đã có sự thay thế bằng row-gap, việc hiểu biết về cách hoạt động của cả hai là một điều cần thiết để bạn có thể làm việc với nhiều phiên bản khác nhau của CSS Grid. Một bố cục trang web ngăn nắp, dễ nhìn luôn cần sự cân nhắc kỹ lưỡng về khoảng cách và không gian giữa các phần tử.

Comments

Bài viết liên quan