כרטיס שאילתה לקונטיינר

בהדגמה הזו נעשה שימוש בשאילתות קונטיינר כדי ליצור כרטיס רספונסיבי ורספונסיבי. הכרטיס עובר מפריסה של עמודה אחת בגדלים צרים יותר לפריסה של שתי עמודות כאשר הוא גדול יותר.

כדי ליצור את המאגר, קודם צריך להגדיר חסימה בהורה:

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

ניתן להגדיר כמה סגנונות בסיסיים:

.desc {
  display: none;
}

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

את סגנונות הבסיס האלה מעדכנים בהתאם לרוחב השורה של מאגר ההורה הזה:

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

כלומר, אם אותו רכיב בדיוק בחלקים שונים של ממשק המשתמש, הוא יכול להשתמש בלוגיקה משלו כדי לשנות את גודל המאגר ולהתאים אותו בצורה הטובה ביותר למאגר. יש לכם שליטה טובה יותר על פריסת הכרטיס מאשר שהייתם יכולים לשלוט בו רק באזור התצוגה הגלובלי. כדי להמחיש זאת, מציבים את כרטיס השאילתה של מאגר התגים ברשת עם עמודות ברוחב שונה:

הדגמה ב-Codepen

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