<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Query Card</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="warning"><strong>Warning:</strong> Your browser does not support CSS container queries. Please open this
        demo in Chrome Canary with the experimental <i>#enable-container-queries</i> flag turned on.</div>

    <div class="parent-grid">
        <div class="container">
            <div class="card">
                <div class="visual"></div>
                <div>
                    <div class="meta">
                        <h1>Title</h1>
                        <h2 class="subtitle">Subtitle</h2>
                    </div>
                    <p class="desc">Here is some descriptive text. It's optional text to support the main idea of the
                        card, and it will be hidden when this card has less inline space.</p>
                    <button>I'm a button</button>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="card">
              <div class="visual"></div>
              <div>
                <div class="meta">
                  <h1>Card Title</h1>
                  <h2 class="subtitle">Subtitle</h2>
                </div>
                  <p class="desc">Here is some descriptive text. It's optional text to support the main idea of the card, and it will be hidden when this card has less inline space.</p>
                <button>I'm a button</button>
              </div>
            </div>
          </div>
          <div class="container">
            <div class="card">
              <div class="visual"></div>
              <div>
                <div class="meta">
                  <h1>Card Title</h1>
                  <h2 class="subtitle">Subtitle</h2>
                </div>
                  <p class="desc">Here is some descriptive text. It's optional text to support the main idea of the card, and it will be hidden when this card has less inline space.</p>
                <button>I'm a button</button>
              </div>
            </div>
          </div>
    </div>
</body>

</html>
:root {
  --coral: hsl(300, 100%, 93%);
  --coral--b: hsl(280, 100%, 70%);
  --blue: hsl(200, 100%, 90%);
  --blue--b: hsl(200, 100%, 80%);
  --green: hsl(113, 85%, 95%);
  --green--b: hsl(84, 71%, 53%);
  --yellow: hsl(30, 100%, 93%);
  --yellow--b: hsl(40, 100%, 80%);
  --page-padding: 1rem;
}

body {
  font-family: system-ui, serif;
  display: grid;
  align-items: center;
  height: 100%;
  padding: 3rem;
}

.box {
  font-size: 2rem;
  padding: 1rem;
  display: grid;
  place-items: center;
  border-radius: 1rem;
  border-style: dashed;
  background-color: var(--coral);
  border: 1px solid var(--coral--b);
}

.coral {
  background-color: var(--coral);
  border: 1px solid var(--coral--b);
}

.yellow {
  background-color: var(--yellow);
  border: 1px solid var(--yellow--b);
}

.blue,
.card {
  background-color: var(--blue);
  border: 1px solid var(--blue--b);
}

.green,
.visual {
  background-color: var(--green);
  border: 1px solid var(--green--b);
}

.section {
  font-size: 1.5rem;
  padding: 1rem;
  border-style: dashed;
}

.parent {
  height: 100%;
}

/* Warning */
.warning {
  max-width: 460px;
  margin: 0 auto 2rem;
  background: #ffcebf;
  border: 1px solid tomato;
  padding: 1rem;
}

h1 + h2 {
  margin-top: -1rem;
}

button {
  border: none;
  padding: 0.5rem;
  background: var(--coral);
  border: 1px solid var(--coral--b);
  font-weight: 600;
  letter-spacing: 0.1rem;
  text-transform: uppercase;
}

@supports (container: inline-size) {
  .warning {
    display: none;
  }
}

.container {
  container-type: inline-size;
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
}

.visual {
  aspect-ratio: 1 / 1;
}

.desc {
  display: none;
}

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

@container (min-width: 350px) {
  .card {
    display: grid;
    grid-template-columns: 40% 1fr;
    align-items: center;
    gap: 1rem;
    text-align: left;
  }
}

@container (min-width: 500px) {
  .desc {
    display: block;
  }
}

/* Parent grid */
.parent-grid {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: 50% 1fr 20%;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.