CSS Container Queries

by

CSS:


*,

*::before,

*::after {

  box-sizing: border-box;

}



.w-200 {

  max-width: 200px;

}



.w-400 {

  max-width: 400px;

}



.card-container {

  container-type: inline-size;

  width: 100%;

  margin: 0 auto;

  border: 2px dashed grey;

  display: flex;

  flex-wrap: wrap;

}



.card-container--dark {

  container-type: inline-size;

  container-name: container--dark;

}



.card {

  padding: 5px 10px;

  background: linear-gradient(to bottom right, #add8e6, #f0f0f0);

  border-radius: 5px;

  flex: 0 0 100%;

}



@container (inline-size > 300px) {

  .card {

    flex: 0 0 50%;

  }

}



@container (inline-size > 500px) {

  .card {

    flex: 0 0 33.3%;

  }

}



@container container--dark (inline-size > 300px) {

  .card {

    color: white;

    background: linear-gradient(to bottom right, #00008b, #9400d3);

  }

}

HTML:


<h3>1 card per row</h3>

<div class="card-container w-200">

  <div class="card">

    <h4>Title</h4>

    <p>Lorem ipsum dolor sit amet</p>

  </div>



  <div class="card">

    <h4>Another Title</h4>

    <p>Sed do eiusmod tempor incididunt.</p>

  </div>

</div>



<h3>2 cards per row</h3>

<div class="card-container w-400">

  <div class="card">

    <h4>Title</h4>

    <p>Lorem ipsum dolor sit amet</p>

  </div>



  <div class="card">

    <h4>Another Title</h4>

    <p>Sed do eiusmod tempor incididunt.</p>

  </div>

</div>



<h3>3 cards per row</h3>

<div class="card-container">

  <div class="card">

    <h4>Title</h4>

    <p>Lorem ipsum dolor sit amet</p>

  </div>



  <div class="card">

    <h4>Another Title</h4>

    <p>Sed do eiusmod tempor incididunt.</p>

  </div>



  <div class="card">

    <h4>Title</h4>

    <p>Lorem ipsum dolor sit amet</p>

  </div>

</div>



<h3>Example with container-name</h3>



<div class="card-container card-container--dark">

  <div class="card">

    <h4>Title</h4>

    <p>Lorem ipsum dolor sit amet</p>

  </div>



  <div class="card">

    <h4>Another Title</h4>

    <p>Sed do eiusmod tempor incididunt.</p>

  </div>



  <div class="card">

    <h4>Title</h4>

    <p>Lorem ipsum dolor sit amet</p>

  </div>

</div>

Leave a Comment