0
519
VistasCSS Grid que se expande automáticamente en las columnas en blanco restantes
Estoy buscando una solución a mi problema con la cuadrícula CSS. El problema que tengo ahora es que tengo una cuadrícula con 4 columnas y 10 cuadros que llena una celda de fila de columna de esta manera: 
Sin embargo, me gustaría que los dos cuadros restantes se amplíen automáticamente para ajustarse a todo el ancho de esta manera: 
(casilla 9 y casilla 10). Aunque lo he logrado aquí, no quiero tener que hacerlo manualmente. Me gustaría que la cuadrícula pueda hacerlo automáticamente. ¿Es esto alcanzable?
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <style> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> </head> <style> html { } .grid { width:100%; height:200px; display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px; } .grid .box { width:100%; height:100%; text-align: center; background-color: red; } /* .grid .box:nth-child(9) { grid-column: span 2; } .grid .box:nth-child(10) { grid-column: span 2; } */ @media (max-width:768px){ .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } } </style> <body> <div class="grid"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> <div class="box">Box 5</div> <div class="box">Box 6</div> <div class="box">Box 7</div> <div class="box">Box 8</div> <div class="box">Box 9</div> <div class="box">Box 10</div> </div> </body> </html>2 Respuestas
Responde la pregunta0
En realidad eras muy cercano :)
.grid { width:100%; height:200px; display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:10px; } .grid .box { width:100%; height:100%; text-align: center; background-color: red; } .grid .box:nth-child(9) { grid-column: 1/span 2; } .grid .box:nth-child(10) { grid-column: 3/span 2; } @media screen (max-width:768px){ .grid { grid-template-columns: 1fr 1fr 1fr 1fr; } } <div class="grid"> <div class="box">Box 1</div> <div class="box">Box 2</div> <div class="box">Box 3</div> <div class="box">Box 4</div> <div class="box">Box 5</div> <div class="box">Box 6</div> <div class="box">Box 7</div> <div class="box">Box 8</div> <div class="box">Box 9</div> <div class="box">Box 10</div> </div>0
Puede hacer esto con flex-box usando flex-grow y un cálculo para el ancho . Para los elementos secundarios divisibles por 4, el ancho calc los llenará dinámicamente usando el ancho calculado width: calc(25% - 1em) . Para los elementos sobrantes que no son divisibles por cuatro , flex-grow: 1 se asegurará de que llenen el espacio restante.
.parent { display: flex; flex-wrap: wrap; gap: 1em; } .child { display: flex; justify-content: center; flex-grow: 1; width: calc(25% - 1em); background-color: red; height: 2em; } <div class="parent"> <div class="child">Box 1</div> <div class="child">Box 2</div> <div class="child">Box 3</div> <div class="child">Box 4</div> <div class="child">Box 5</div> <div class="child">Box 6</div> <div class="child">Box 7</div> <div class="child">Box 8</div> <div class="child">Box 9</div> </div> <br><br> <div class="parent"> <div class="child">Box 1</div> <div class="child">Box 2</div> <div class="child">Box 3</div> <div class="child">Box 4</div> <div class="child">Box 5</div> <div class="child">Box 6</div> <div class="child">Box 7</div> <div class="child">Box 8</div> <div class="child">Box 9</div> <div class="child">Box 10</div> </div> <br><br> <div class="parent"> <div class="child">Box 1</div> <div class="child">Box 2</div> <div class="child">Box 3</div> <div class="child">Box 4</div> <div class="child">Box 5</div> <div class="child">Box 6</div> <div class="child">Box 7</div> <div class="child">Box 8</div> <div class="child">Box 9</div> <div class="child">Box 10</div> <div class="child">Box 11</div> </div>