Solución:
Con la cuadrícula CSS puede considerar el uso de max(width,100%/N) dónde N es el número máximo de columnas. Si el ancho del contenedor aumenta, 100%/N seguramente será más grande que width así no tendremos más de N elementos por fila.
.grid-container
--n:4; /* the max number of columns */
display: grid;
grid-template-columns:repeat(auto-fill,minmax(max(200px,100%/var(--n)),1fr));
.grid-item
background: tomato;
padding: 5px;
height: 50px;
margin: 10px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing:border-box;
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
Con lagunas:
.grid-container
--n:4; /* the max number of columns */
display: grid;
grid-template-columns:repeat(auto-fill,
minmax(max(200px,(100% - (var(--n) - 1)*10px)/var(--n)),1fr));
gap:10px;
margin:5px;
.grid-item
background: tomato;
padding: 5px;
height: 50px;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing:border-box;
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
Con flexbox, simplemente puede configurar un max-width al contenedor ya que sus elementos tienen un ancho fijo:
.flex-container
display: flex;
flex-wrap: wrap;
max-width:calc(5*(200px + 20px));
.flex-item
background: tomato;
padding: 5px;
width: 200px;
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing:border-box;
1
2
3
4
5
6
7
8
El único inconveniente es que necesita conocer el ancho de sus elementos y su margen para establecer correctamente el max-width.
Si desea que sus elementos se expandan y cubran todo el ancho, puede usar un truco con min-width como abajo:
.flex-container
display: flex;
flex-wrap: wrap;
.flex-item
background: tomato;
padding: 5px;
min-width: 200px;
width:calc(100%/5 - 20px); /*5 columns*/
height: 100px;
margin: 10px;
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing:border-box;
1
2
3
4
5
6
7
8
Aquí también debe considerar el margen.Puede hacer esto fácilmente más flexible usando la variable CSS:
.flex-container
display: flex;
flex-wrap: wrap;
.flex-item
--m:10px;
background: tomato;
padding: 5px;
min-width: 200px;
width:calc(100%/5 - 2*var(--m)); /*5 columns*/
height: 100px;
margin: var(--m);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing:border-box;
1
2
3
4
5
6
7
8
También puedes considerar flex-grow si desea que su elemento siempre se expanda (incluso cuando hay un ajuste), pero puede enfrentar el problema de la última fila que debe solucionar con algunos trucos:
.flex-container
display: flex;
flex-wrap: wrap;
--m:10px;
.flex-item
background: tomato;
padding: 5px;
min-width: 200px;
flex-grow:1;
width:calc(100%/5 - 2*var(--m)); /*5 columns*/
height: 100px;
margin: var(--m);
line-height: 100px;
color: white;
font-weight: bold;
font-size: 2em;
text-align: center;
box-sizing:border-box;
.flex-container span
min-width: 200px;
flex-grow:1;
width:calc(100%/5 - 2*var(--m)); /*5 columns*/
margin:0 var(--m);
1
2
3
4
5
6
7
8
En el siguiente ejemplo, hicimos que el número de columnas sea 5, por lo que necesitaremos al menos 4 elementos vacíos para solucionar el problema en caso de que tengamos de uno a 4 elementos en la última fila. Por supuesto, esto es un inconveniente, pero como conoce la cantidad de columnas, puede configurar fácilmente esos elementos vacíos y no necesitará ningún JS.
Para hacerlo más flexible, aquí hay una idea con variables CSS:
.flex-container
display: flex;
flex-wrap: wrap;
border:1px solid;
--m:10px;
--n:5;
--width:150px;
.flex-item
background: tomato;
min-width: var(--width);
flex-grow:1;
width:calc(100%/var(--n) - 2*var(--m));
height: 50px;
margin: var(--m);
box-sizing:border-box;
.flex-container span
display:contents; /* each span will give us 2 elements*/
.flex-container span:before,
.flex-container span:after,
.flex-container:before,
.flex-container:after
content:"";
min-width: var(--width);
flex-grow:1;
width:calc(100%/var(--n) - 2*var(--m));
margin:0 var(--m);
order:1; /*we make sure they are at the end*/
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8
solía display:contents para poder configurar N elementos vacíos que luego serán considerados como 2 * N que pueden reducir el código.
Si tiene 7 columnas, solo necesitaremos 6 elementos adicionales. Podemos usar los dos pseudo elementos y luego solo 2 elementos vacíos para cubrir los 4 restantes.
No puedes explícitamente hazlo por un caja flexible o por un Cuadrícula CSS – pero puedes usar un cortar a tajos utilizando CSS Variables (normalmente eso es todo lo que necesitas).
Diseño de cuadrícula CSS
Por ejemplo, puede configurar número de columna global en el :root mientras que un número de columna específico sobre el envoltorio de rejilla – ver un Cuadrícula CSS a continuación con 4 columnas configuradas globalmente:
:root
--columns: 3;
.grid
display: grid;
grid-gap: 10px;
/* adjusting for the 10px grid-gap as well */
grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));
.grid > *
background-color: green;
height: 200px;
1
2
3
4
5
6
Ahora puede establecer una regla para número de columnas sobre el contenedor de rejilla por redeclarar--columns (o puede hacer que JS agregue un class que contiene el --columns declaración) – vea la demostración a continuación:
:root
--columns: 3;
.grid
display: grid;
grid-gap: 10px;
--columns: 4; /* re-define the number of columns */
grid-template-columns: repeat(auto-fit, minmax(calc(100% / var(--columns) - 20px), 1fr));
.grid > *
background-color: green;
height: 200px;
1
2
3
4
5
6
Flexbox
Argumentos similares son válidos para cajas flexibles – vea una demostración simplificada a continuación:
:root
--columns: 3;
.flexbox
display: flex;
flex-wrap: wrap;
--columns: 4; /* re-define the number of columns */
.flexbox > *
background-color: green;
height: 200px;
margin: 10px;
flex-basis: calc(100% / var(--columns) - 20px);
1
2
3
4
5
6
Te mostramos reseñas y calificaciones
Si te ha resultado provechoso este artículo, nos gustaría que lo compartas con otros desarrolladores de esta forma nos ayudas a extender este contenido.