69. RWD Grid View Trong CSS Responsive

RWD Grid View trong CSS Responsive:

Grid View trong Responsive Web Design là một phương pháp sử dụng CSS Grid Layout để xây dựng các lưới linh hoạt, giúp điều chỉnh bố cục của trang web sao cho phản hồi tốt trên các thiết bị và kích thước màn hình khác nhau. Điều này giúp bạn tạo ra các cột và hàng có thể thay đổi tỷ lệ theo kích thước màn hình.

Dưới đây là một ví dụ về cách sử dụng Grid View để tạo một giao diện Responsive Web Design:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      padding: 20px;
    }

    .grid-item {
      background-color: #f0f0f0;
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
  </div>
</body>
</html>

Trong ví dụ này:

Chúng ta sử dụng .grid-container để tạo một lưới sử dụng CSS Grid Layout.
Sử dụng grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); để tạo cột có kích thước linh hoạt. Điều này cho phép mỗi cột có ít nhất 250px và sẽ thêm cột mới khi không có đủ chỗ trống.
Sử dụng gap: 20px; để tạo khoảng cách giữa các ô trong lưới.
Sử dụng .grid-item để tạo kiểu cho các ô trong lưới.

Khi bạn thay đổi kích thước màn hình, các cột sẽ tự động thay đổi tỷ lệ để phù hợp với không gian hiển thị. Điều này giúp tạo ra giao diện phản hồi linh hoạt trên nhiều thiết bị khác nhau.

Leave a Comment Cancel Reply