<div class="wrapper">
    <article class="flow">
      <h1>Auto responsive grid</h1>
      <figure class="callout">
        <p>In this example there will be as many tracks as will fit into the container with a minimum size of 200px.</p>
        <p><code>grid-template-columns: repeat(auto-fill, minmax(200px,1fr));</code></p>
        <p><strong>Resize the editor panel to see the grid change.</strong></p>

      <div class="container" id="container">
        <div class="box">Item one</div>
        <div class="box">Item two</div>
        <div class="box">Item three</div>
        <div class="box">Item four</div>
        <div class="box">Item five</div>
        <div class="box">Item six</div>
        <div class="box">Item seven</div>
        <div class="box">Item eight</div>
:root {
  --var-col: 1fr;

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px,1fr));
  gap: 10px;
  background-color: var(--color-stroke);
  padding: 1em;
  max-width: 70rem;

select {
  min-width: unset;

External CSS

  1. https://codepen.io/web-dot-dev/pen/abpoXGZ.css

External JavaScript

This Pen doesn't use any external JavaScript resources.