* {
  box-sizing: border-box;
}
body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  color: #0f172a;
}

/* The container query context */
.product-card-container {
  container-type: inline-size;
  width: 100%;
}

.product-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}

.product-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.image-wrapper {
  position: relative;
  height: 240px;
  background: #f1f5f9;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover img {
  transform: scale(1.05);
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.rating {
  font-weight: 600;
  color: #d97706;
  font-size: 0.9rem;
}

.description {
  margin: 0;
  color: #64748b;
  line-height: 1.5;
  font-size: 0.95rem;
}

.footer {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}

.original-price {
  font-size: 0.9rem;
  color: #94a3b8;
  text-decoration: line-through;
  margin-left: 6px;
}

button {
  background: #0f172a;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #334155;
}

/* CONTAINER QUERY: If the container is wider than 450px */
@container (min-width: 480px) {
  .product-card {
    flex-direction: row;
    align-items: stretch;
  }
  
  .image-wrapper {
    width: 45%;
    height: auto;
    min-height: 280px;
  }
  
  .content {
    width: 55%;
    justify-content: center;
  }
  
  h3 {
    font-size: 1.5rem;
  }
}

Back to Snippets

CSS Container Query Product Card

Build a truly responsive component with CSS Container Queries. This card adjusts its layout based on the space available in its parent container rather than the screen size, which makes it perfect for sidebars or grids.

251

#css

#container queries

#responsive

#card

#layout

#modern css

/HTML *CSS ()JS Output Live Updates

* {
  box-sizing: border-box;
}
body {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #f8fafc;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  color: #0f172a;
}

/* The container query context */
.product-card-container {
  container-type: inline-size;
  width: 100%;
}

.product-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s;
}

.product-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.image-wrapper {
  position: relative;
  height: 240px;
  background: #f1f5f9;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover img {
  transform: scale(1.05);
}

.badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ffffff;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.rating {
  font-weight: 600;
  color: #d97706;
  font-size: 0.9rem;
}

.description {
  margin: 0;
  color: #64748b;
  line-height: 1.5;
  font-size: 0.95rem;
}

.footer {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.price {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
}

.original-price {
  font-size: 0.9rem;
  color: #94a3b8;
  text-decoration: line-through;
  margin-left: 6px;
}

button {
  background: #0f172a;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

button:hover {
  background: #334155;
}

/* CONTAINER QUERY: If the container is wider than 450px */
@container (min-width: 480px) {
  .product-card {
    flex-direction: row;
    align-items: stretch;
  }
  
  .image-wrapper {
    width: 45%;
    height: auto;
    min-height: 280px;
  }
  
  .content {
    width: 55%;
    justify-content: center;
  }
  
  h3 {
    font-size: 1.5rem;
  }
}

CSS Container Query Product Card

Share Code Snippet