Thẻ truy vấn vùng chứa

Bản minh hoạ này sử dụng truy vấn vùng chứa để tạo thẻ nội tại thích ứng. Thẻ này sẽ chuyển từ bố cục một cột ở kích thước hẹp hơn sang bố cục hai cột khi có kích thước rộng hơn.

Để tạo vùng chứa, trước tiên, hãy đặt vùng chứa trên thành phần mẹ:

/* Set containment on parent */
.container {
  container-name: myContainer;
  container-type: inline-size;
  /* You can also use the shorthand property `container: myContainer / inline-size`.
}

Bạn có thể thiết lập một số kiểu cơ sở:

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

Đồng thời, cập nhật các kiểu cơ sở đó theo chiều rộng cùng dòng của vùng chứa gốc đó:

/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

/* Display description at >=500px */
@container (min-width: 500px) {
  .desc {
    display: block;
  }
}

Điều này có nghĩa là nếu có cùng một thành phần trong các phần khác nhau của giao diện người dùng, bạn có thể sử dụng logic riêng để đổi kích thước và phù hợp nhất với vùng chứa. Bạn có quyền kiểm soát bố cục của thẻ tốt hơn khi chỉ có khung nhìn chung để dựa vào. Phần sau đây minh hoạ điều này bằng cách đặt thẻ truy vấn vùng chứa vào một lưới có chiều rộng khác nhau của cột:

Hãy khám phá bản minh hoạ trên Codepen này

<div class="container">
  <div class="card">
    <div class="visual"></div>
    <div>
      <div class="meta">
        <h1>Card Title Here</h1>
        <h2 class="time">Subtitle</h2>
      </div>
        <p class="desc">Here is some descriptive text to support the main idea of the card. It will be hidden when there is less inline space.</p>
      <button>I'm a button</button>
    </div>
  </div>
</div>

        /* Set containment on parent */
.container {
  container: inline-size;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

/* Base Styles */
.visual {
  aspect-ratio: 1 / 1;
}

.desc {
  display: none;
}

.card {
  text-align: center;
  padding: 0.5rem;
}

/* Responsive styles */

/* 2-column grid layout at >=350px */
@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

/* Display description at >=500px */
@container (min-width: 500px) {
  .desc {
    display: block;
  }
}