css - tutorial - grid-template-rows




CSS Grid: ¿Es posible aplicar color a los espacios vacíos de grid? (4)

¿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?


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.


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


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!






css-grid