Cambiar el número de columnas y filas en una cuadrícula a medida que aumenta el número de elementos

isar

Tengo que diseñar una cuadrícula receptiva.
La cuadrícula debe cambiar según la cantidad de elementos (en lugar del tamaño de la pantalla).

De 5 a 6 elementos deben ser 2x3,
de 7 a 9 elementos deben ser 3x3,
de 10 a 12 elementos deben ser 3x4,
de 13 a 16 elementos deben ser 4x4, y así sucesivamente ...

¿Es esto algo que puedo hacer usando CSS Grid?

Esto es lo que he probado:

<main>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">
  </figure>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">
  </figure>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">
  </figure>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">

  </figure>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">
  </figure>

</main>

main {
  /* display: flex; */
  /* flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-content: stretch;
  height: 100vh;
}
figure {
  margin: 0;
  /* flex-grow: 1; */
  /* flex-basis: 12rem; */
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Acompañar Afif

La creación de columnas implícitas puede hacer esto. Puede considerar nth-child()/ nth-last-child()crear una nueva columna cuando alcance un número específico de columnas:

.container {
  display:inline-grid;
  grid-auto-columns:1fr;
  width:100px;
  vertical-align:top;
}
.container > :nth-child(2) {
  grid-column:2;
}

.container > :nth-last-child(5) ~ :nth-child(3),
.container > :nth-last-child(7) ~ :nth-child(3), /* 7 = 5 + 2 */
.container > :nth-last-child(9) ~ :nth-child(3){ /* 9 = 7 + 2 */
 grid-column:3;
}

.container > :nth-last-child(10) ~ :nth-child(4),
.container > :nth-last-child(13) ~ :nth-child(4), /* 13 = 10 + 3 */
.container > :nth-last-child(16) ~ :nth-child(4){ /* 16 = 13 + 3 */
 grid-column:4;
}

.container > :nth-last-child(17) ~ :nth-child(5),
.container > :nth-last-child(21) ~ :nth-child(5), /* 21 = 17 + 4 */
.container > :nth-last-child(25) ~ :nth-child(5){ /* 25 = 21 + 4 */
 grid-column:5;
}

.container > * {
  border:1px solid red;
}
.container > *::before {
  content:"";
  display:inline-block;
  padding-top:100%;
}

<div class="container">
<div></div>
</div>

<div class="container">
<div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.

En caso de infracción, por favor [email protected] Eliminar

Editado en2021-01-27

Déjame decir algunas palabras

0Comentarios

Iniciar sesiónRevisión de participación posterior

Anterior:Comprensión del operador de espera de C #

TOP Lista

Artículos