CSS Grid: ¿Es posible aplicar color a los huecos de la cuadrícula?

Solución:

Lamentablemente, actualmente no hay forma en la especificación de CSS Grid para diseñar grid-gap. Sin embargo, se me ocurrió una solución que funciona bien que involucra solo html y css: mostrar líneas de cuadrícula de borde solo entre elementos

Por ejemplo: si uno tiene una cuadrícula de cuadrados de 5×5, ¿es la única forma de obtener líneas de cuadrícula de colores 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 las tablas con el border-collapse propiedad y, a diferencia de los huecos de la cuadrícula, se aplicarán al perímetro de la cuadrícula junto con los bordes internos, lo que puede no ser deseable. Además, si tienes un grid-gap declaración, los huecos separarán los bordes de los elementos de la cuadrícula como border-collapse: separate hace con los bordes de las tablas.

grid-gap es el enfoque idiomático para espaciar los elementos de la cuadrícula, pero no es ideal ya que los huecos de la cuadrícula son solo eso: espacio vacío, no cajas físicas. Con ese fin, la única forma de colorear estos espacios es aplicar un color de fondo al contenedor de la cuadrícula.

En lugar de usar la solución anterior, recomiendo usar border con pseudoclases porque si tienes una cantidad irregular de “celdas de tabla” terminarás con una celda llena de colores feos al final de la “tabla”.

Si desea usar 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>

---

---

Utiliza Nuestro Buscador