0
151
VistasFilas CSS como diseño de cuadrícula
Actual:
.parent { display: flex; justify-content: center; align-items: center; } .childs { #class for every child flex: 1 1 100%; }Buen ejemplo:
¿Cómo puedo lograr esto con flex box?
Entonces no me gusta así, cuando agrego nuevas filas: (Ejemplo incorrecto) 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
tal vez puedas usar flex-shrink = 0 hace que tus cajas no se encojan
·
Juan Pablo Isaza
Denunciar
0
flex es un mecanismo de diseño más bien unidimensional.
Si está permitido, podría considerar una cuadrícula en la que las celdas se pueden distribuir usando una plantilla y las dimensiones de las celdas se establecen por las definiciones de la cuadrícula, no por el contenido de una sola celda.
Este es el diseño de la plantilla:
'AB' 'AB' 'CB' 'CD' 'CD' '. D'Dar:
.grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: 'AB' 'AB' 'CB' 'CD' 'CD' '. D'; gap: 1vw; width: 50vw; aspect-ratio: 5 / 2; background: black; padding: 1vw; } .grid>* { border: red solid 2px; } .grid>div:nth-child(1) { grid-area: A; } .grid>div:nth-child(2) { grid-area: B; } .grid>div:nth-child(3) { grid-area: C; } .grid>div:nth-child(4) { grid-area: D; } <div class="grid"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta