JSFiddle - React, Tailwind, and code Playground

Разница между auto-fit и auto-fill при наличии только одной строки

by Ankhena

HTML

<p>
  auto-fit будет вести себя почти как auto-fill, но если есть только одна строка и есть место для дополнительных колонок, но нет элементов, которые можно вставить эти колонки, то тогда он сделает ширину пустых колонок равную нулю. А если выставить максимальную ширину колонок на 1fr, то браузер разделит оставшееся место поровну между ними.
</p>
<h2>Разница между auto-fit и auto-fill при наличии только одной строки</h2>

<div class="block block-1">
  <figure class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ponte_Sisto_Roma.jpg/220px-Ponte_Sisto_Roma.jpg" alt="">
  </figure>
  <figure class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ponte_Sisto_Roma.jpg/220px-Ponte_Sisto_Roma.jpg" alt="">
  </figure>
  <figure class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ponte_Sisto_Roma.jpg/220px-Ponte_Sisto_Roma.jpg" alt="">
  </figure>
  <figure class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ponte_Sisto_Roma.jpg/220px-Ponte_Sisto_Roma.jpg" alt="">
  </figure>
  <figure class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ponte_Sisto_Roma.jpg/220px-Ponte_Sisto_Roma.jpg" alt="">
  </figure>
  <figure class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ponte_Sisto_Roma.jpg/220px-Ponte_Sisto_Roma.jpg" alt="">
  </figure>
  <figure class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ponte_Sisto_Roma.jpg/220px-Ponte_Sisto_Roma.jpg" alt="">
  </figure>
</div>

<div class="block block-2">
  <figure class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ponte_Sisto_Roma.jpg/220px-Ponte_Sisto_Roma.jpg" alt="">
  </figure>
  <figure class="item">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fe/Ponte_Sisto_Roma.jpg/220px-Ponte_Sisto_Roma.jpg" alt="">
  </figure>
  <figure...

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 20px;
}

.block {
  display: grid;
  grid-gap: 20px;
  max-width: 1200px;
  margin: 20px auto;
  background: #eee;
}

.block-1 {
  grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
}

.block-2 {
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
}

.item {
  padding: 0;
  margin: 0;
}

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