Raster ohne Medienabfragen

by Sebastian Kay

HTML

<div class="grid-container">
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
<div class="grid-container">
  <div class="grid">
    <div class="item"></div>
    <div class="item span-2"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
<div class="grid-container">
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item span-2"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
<div class="grid-container">
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
<div class="grid-container">
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
<div class="grid-container">
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>
<div class="grid-container">
  <div class="grid">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div...

CSS

.item {
  /*height: 150px;*/
  aspect-ratio: 1 / 1;
  background: hsl(340 80% 50%);
  border: 5px solid hsl(340 80% 70%);
  border-radius: 1rem;
}


.grid-container {
  /* for demo */
  max-width: 65rem;
  margin-inline: auto;
  margin-block: 6rem;

  container-type: inline-size;
}

.grid {
  --min-column-size: 30ch;
  
  display: grid;
  gap: 1rem;
  grid-template-columns: 
    repeat(auto-fit, minmax(
      min(max((var(--min-column-size) - 100%) * 999, var(--min-column-size)), 100%), 
      1fr));
}


html {
  color-scheme: dark;
}