grid auto-fit

by DelphinPRO

HTML

<div class="wr">
  <div class="tile">1</div>
  <div class="tile">2</div>
  <div class="tile">3</div>
</div>

SCSS

.wr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  width: 100%;
  gap: 10px;
  .tile {
    display: grid;
    justify-content: center;
    align-items: center;
    height: 200px;
    background: tomato;
    color: #fff;
  }
}










































* {
  margin: 0;
  padding: 0;-webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}