Significado de auto-fit en CSS Grid

Ahora consideremos el valor auto-fit, que también se aplica al especificar columnas del mismo tamaño en conjunto con la función repeat. Su diferencia con el valor auto-fill radica en que auto-fit ajusta la cantidad de columnas a el ancho disponible del contenedor, expandiendo o comprimiéndolas.

Ejemplo

Consideremos el funcionamiento del valor auto-fit en el ejemplo de un contenedor con ocho elementos. Apliquemos junto con el valor auto-fit la función minmax que ya conoces por la lección anterior:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
  width: 600px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Ejemplo

Y ahora reduzcamos el ancho del contenedor grid a 400px:

html<div id="parent">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

css#parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 2px solid #696989;
  padding: 10px;
  width: 400px;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}

Результат:

Tareas prácticas