Kapsayıcı sorgu kartı

Bu demo dahili, duyarlı bir kart oluşturmak için kapsayıcı sorguları kullanır. Kart, daha dar boyutlardaki tek sütunlu düzenden daha geniş boyutlarda iki sütunlu düzene geçer.

Kapsayıcıyı oluşturmak için önce üst öğede kapsayıcıyı ayarlayın:

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

Bazı temel stiller ayarlayabilirsiniz:

.desc {
  display: none;
}

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

Ve bu temel stilleri, söz konusu üst kapsayıcının satır içi genişliğine göre güncelleyin:

/* 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;
  }
}

Bu, kullanıcı arayüzünüzün farklı bölümlerinde tam olarak aynı bileşene sahipseniz kapsayıcıyı yeniden boyutlandırmak ve en uygun şekilde sığdırmak için kendi mantığını kullanabileceği anlamına gelir. Kartın düzeni üzerinde, yalnızca global görüntü alanına güvenebileceğiniz duruma göre daha iyi kontrole sahip olursunuz. Aşağıda bu durum, kapsayıcı sorgu kartını değişen sütun genişliklerine sahip bir tabloya yerleştirerek gösterilmektedir:

Codepen'deki bu demoyu keşfedin

HTML

<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>

CSS

        /* 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;
  }
}