0
338
Views¿Cómo centrar CSS Grid pero elementos secundarios al principio?
Quiero implementar este diseño con CSS Grid o Flexbox. Si es necesario, también es posible utilizar JS.
En las imágenes, puede ver cómo se deben organizar los elementos secundarios al agregar 1, 2, 3 y 4 elementos secundarios en una secuencia
El contenido se genera dinámicamente. Es decir, se desconoce el número de elementos secundarios. Puede haber un máximo de 3 elementos secundarios en una fila. Los elementos de la cuadrícula deben estar centrados. Todo el diseño también debe ser receptivo.
.parent { background-color: red; display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; justify-content: center; /* 3* 350px width of child elements + 2*20px gap*/ max-width: 1090px; padding: 20px; } .child { width: 350px; height: 450px; background-color: blue; } <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>Actualmente no responde (si es posible sin consultas de medios) y los elementos secundarios no están centrados.
¿Sabes cómo puedo implementar este diseño?
2 answers
Answer question0
No defina 3 columnas, pero confíe en la creación de columnas implícitas:
.parent { background-color: red; display: grid; grid-auto-columns: calc((100% - 2*20px)/3); /* size of one column */ grid-gap: 20px; justify-content: center; margin: 10px; } .child { height: 50px; background-color: blue; } /* place each item in the adequate column */ .child:nth-child(3n + 1) {grid-column: 1} .child:nth-child(3n + 2) {grid-column: 2} .child:nth-child(3n + 3) {grid-column: 3} <div class="parent"> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> <div class="parent"> <div class="child"></div> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div>0
Creo que tengo algo para esto usando cuadrículas implícitas:
* { box-sizing: border-box; } body { display: flex; flex-direction: column; gap: 50px; background: #000; } section { width: 100%; padding: 30px; background: #666; } .grid-inner { display: grid; gap: 30px; justify-content: center; grid-auto-columns: calc(33% - 15px); } .box { padding: 30px; background: white; border: 1px solid black; } .box:nth-child(2) { grid-column: 2; } .box:nth-child(3) { grid-column: 3; } <section> <div class="grid-inner"> <div class="box"></div> </div> </section> <section> <div class="grid-inner"> <div class="box"></div> <div class="box"></div> </div> </section> <section> <div class="grid-inner"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </section> <section> <div class="grid-inner"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </section> <section> <div class="grid-inner"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </section>