On gists

KP: Max column count with auto-fit

CSS CSS trick

index.html Raw #

<div class="wrapper">
  <h1>Our products</h1>
  <p>
    Dolor sit amet consectetur adipisicing elit. Quo expedita voluptas
    provident.
  </p>
  <div class="layout">
    <main class="grid">
      <div class="product">
        <img src="https://images.unsplash.com/photo-1559715541-5daf8a0296d0?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzU1ODd8&ixlib=rb-4.0.3&q=80&w=400" alt="Toy duck in a batman costume" />
        <h3 class="product__title">Bat Duck</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1472457897821-70d3819a0e24?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzU1ODd8&ixlib=rb-4.0.3&q=80&w=400" alt="lego stormtrooper" />
        <h3 class="product__title">Lego Storm Trooper</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1627752458987-d721d34ecd68?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxNjN8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Figurines</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1599481238505-b8b0537a3f77?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Gundam</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product" data-featured="true">
        <img src="https://images.unsplash.com/photo-1605287977617-ddd865d5f696?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Stuffed hamster</h3>
        <p class="product__description">
          A nice fuzzy and cuddly stuffed hamster for you to snuggle with
          and enjoy. Might be small in size, but it isn't small in cuteness.
        </p>

        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1556012018-50c5c0da73bf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYyMjh8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Teddy bear</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYyMjh8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Super Mario Figurines</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>

      <div class="product">
        <img src="https://images.unsplash.com/photo-1517242810446-cc8951b2be40?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2OTYzMzYxODV8&ixlib=rb-4.0.3&q=80&w=400" alt="" />
        <h3 class="product__title">Lego duck man</h3>
        <div class="flex-group space-between v-center">
          <p class="product__price">From <span>$25</span></p>
          <button class="button" data-type="outline">Buy</button>
        </div>
      </div>
    </main>

    <aside>
      <h2>Lorem ipsum dolor sit amet.</h2>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
        minima quasi ipsa!
      </p>
    </aside>
  </div>
</div>

<!-- This is from a different demo that I forked for this one
     it's a good tutorial looking at container queries and subgrid :) -->
<!-- <a class="yt" href="https://youtu.be/pKHKQwAsZLI">
  Watch the tutorial
</a> -->

css.css Raw #

.grid {
  --grid-max-col-count: 3;
  --grid-min-col-size: 200px;
  --grid-gap: 1rem;

  /* calculations, do not touch */
  --grid-col-size-calc: calc(
    (100% - var(--grid-gap) * var(--grid-max-col-count)) /
      var(--grid-max-col-count)
  );
  --grid-col-min-size-calc: min(
    100%,
    max(var(--grid-min-col-size), var(--grid-col-size-calc))
  );

  display: grid;
  gap: var(--grid-gap);

  grid-template-columns: repeat(
    auto-fit,
    minmax(var(--grid-col-min-size-calc), 1fr)
  );
}

:root {
  --clr-primary-900: hsl(200, 23%, 8%);
  --clr-primary-800: hsl(206, 23%, 12%);
  --clr-primary-700: hsl(206, 23%, 18%);
  --clr-primary-600: hsl(206, 23%, 26%);
  --clr-primary-500: hsl(206, 23%, 32%);
  --clr-primary-400: hsl(206, 23%, 45%);
  --clr-primary-300: hsl(206, 23%, 65%);
  --clr-primary-200: hsl(206, 23%, 85%);
  --clr-primary-100: hsl(206, 23%, 92%);

  --clr-accent-600: hsl(183, 40%, 20%);
  --clr-accent-500: hsl(183, 40%, 32%);
  --clr-accent-400: hsl(183, 40%, 45%);
  --clr-accent-300: hsl(183, 40%, 58%);
  --clr-accent-200: hsl(183, 40%, 80%);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  color-scheme: dark;
}

body {
  font-family: system-ui;
  line-height: 1.7;
  background: var(--clr-primary-900);
  color: var(--clr-primary-200);

  padding: 4rem 0;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  color: var(--clr-primary-100);
}

h1,
h2 {
  line-height: 1.1;
}

h1 {
  font-size: clamp(2.75rem, 10vw - 1rem, 4.5rem);
}

h1 + p {
  font-size: 1.275rem;
  margin-block: 1rem 3.25rem;
}

h3 {
  line-height: 1.35;
}

.wrapper {
  width: min(100% - 4rem, 85rem);
  margin-inline: auto;
}

.layout {
  display: grid;
  gap: 1rem;
  /*   @media (width > 760px) { */
  grid-template-columns: 1fr 240px;
  /*   } */
}

aside {
  padding: 1rem;
  border-radius: 0.5rem;
  background: dodgerblue;
}

.flex-group {
  display: flex;
  gap: 1rem;
}

.space-between {
  justify-content: space-between;
}

.v-center {
  align-items: end;
}

.button {
  font: inherit;
  line-height: 1;
  display: inline-flex;
  cursor: pointer;
  text-decoration: none;
  padding: 0.5em 1.25em 0.7em;
  border-radius: 0.25em;
  color: var(--button-color, var(--clr-primary-100));
}

.button[data-type="outline"] {
  --button-color: var(--clr-accent-300);

  font-weight: 700;
  background: transparent;
  border: 2px solid var(--button-color);
}

.button[data-type="outline"]:hover,
.button[data-type="outline"]:focus {
  background: var(--button-color);
  color: var(--clr-primary-800);
}

.product {
  --_padding: 1rem;

  grid-row: span 3;

  display: grid;
  grid-template-rows: subgrid;
  gap: 1rem;
  background: var(--clr-primary-700);
  border-radius: 0.5rem;
  overflow: hidden;
}

.product > :not(img) {
  margin-inline: var(--_padding);
}

.product > :last-child:not(img) {
  margin-block-end: var(--_padding);
}

.product > img {
  width: 100%;
  height: 120px;
  object-fit: cover;
}

.product__price {
  line-height: 1;
}

.product__price span {
  display: block;
  font-size: 2rem;
  color: var(--clr-accent-300);
  font-weight: 900;
}

.product__description {
  display: none;
}

info.txt Raw #

https://codepen.io/kevinpowell/pen/GgRwqxJ
https://www.youtube.com/watch?v=CHULPvkXIRo