css - track - grid-template-columns
CSS Grid: ¿Es posible aplicar color a los espacios vacíos de grid? (5)
Por ejemplo: si uno tiene una cuadrícula de cuadrados de 5x5, ¿es la única forma de obtener líneas de cuadrícula de color para llenar la cuadrícula con 25 elementos y aplicar bordes a esos mismos elementos?
Puede hacer eso, pero los bordes de la cuadrícula no se colapsan de la misma manera que los bordes de la tabla con la propiedad border-collapse , y, a diferencia de los espacios vacíos, se aplicarán al perímetro de la cuadrícula junto con los bordes internos, que pueden no estar deseado. Además, si tiene una declaración de grid-gap , las brechas separarán los bordes de su elemento de la cuadrícula de manera muy similar border-collapse: separate puntos border-collapse: separate con los bordes de la tabla.
grid-gap es el enfoque idiomático para espaciar elementos de grid, pero no es lo ideal, ya que los espacios de grid son solo eso: espacio vacío, no cuadros físicos. Para ese fin, la única manera de colorear estas brechas es aplicar un color de fondo al contenedor de la cuadrícula.
¿Hay alguna forma de estilizar más que el ancho de las brechas de cuadrícula dentro del módulo de diseño de cuadrícula CSS? No puedo encontrar nada al respecto en la documentación, sin embargo, uno podría pensar que sería posible, ya que las brechas de la rejilla tienden a estar coloreadas en muchos diseños. Si no es posible, ¿hay alguna solución?
Agregué el color del borde como color de fondo a la cuadrícula y agregué un color de fondo a todos los elementos de la cuadrícula.
.grid {
width: 1000px;
display: grid;
background: #D7D7D7;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: 200px;
grid-gap: 1px;
}
.grid-item {
background: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="grid">
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
Esto funciona para mi
En lugar de usar la solución anterior , recomiendo usar el border con pseudo-clases porque si tiene una cantidad irregular de "celdas de tabla", terminará con una celda llena de color feo al final de la "tabla".
Si desea usar los bordes entre las "celdas de la tabla" y no siempre tiene la misma cantidad de celdas, puede hacer algo como esto (este ejemplo también funcionaría con flexbox):
.wrapper {
display: grid;
grid-template-columns: repeat(2, auto);
/* with flexbox:
display: flex;
flex-wrap: wrap;
*/
}
/* Add border bottom to all items */
.item {
padding: 10px;
border-bottom: 1px solid black;
/* with flexbox:
width: calc(50% - 21px);
*/
}
/* Remove border bottom from last item & from second last if its odd */
.item:last-child, .item:nth-last-child(2):nth-child(odd) {
border-bottom: none;
}
/* Add right border to every second item */
.item:nth-child(odd) {
border-right: 1px solid black;
}
<div class="wrapper">
<div class="item">BOX 1</div>
<div class="item">BOX 2</div>
<div class="item">BOX 3</div>
<div class="item">BOX 4</div>
<div class="item">BOX 5</div>
</div>
Puedes usar bordes en lugar de pinzamientos o simplemente cambiar el color de fondo, si eso funciona.
.yourDiv {
border-right: 5px solid rgb(110, 0, 210);
border-top: 10px solid rbg(255, 255, 0);
}
¡Espero eso ayude!
Lamentablemente, actualmente no hay ninguna forma en la especificación de cuadrícula de CSS para crear un estilo de grid-gap . Se me ocurrió una solución que funciona bien, aunque solo involucra html y css: muestre líneas de cuadrícula de borde solo entre elementos