Computer >> Máy Tính >  >> Lập trình >> CSS

Cách sử dụng thuộc tính lưới khoảng cách CSS

Đặt khoảng cách giữa các hàng và cột trong Lưới bằng CSS. Bạn có thể thử chạy mã sau để triển khai thuộc tính lưới khoảng cách.

Ví dụ

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            display: grid;
            background-color: green;
            grid-template-columns: auto auto;
            padding: 20px;
            grid-gap: 20px 20px;
         }
         .ele {
            background-color: orange;
            border: 2px solid gray;
            padding: 35px;
            font-size: 30px;
            text-align: center;
         }
      </style>
   </head>
   <body>
      <h1>Game Board</h1>
      <div class = "container">
         <div class = "ele">1</div>
         <div class = "ele">2</div>
         <div class = "ele">3</div>
         <div class = "ele">4</div>
         <div class = "ele">5</div>
         <div class = "ele">6</div>
      </div>
   </body>
</html>