web-dev-qa-db-fra.com

CSS Grid: Est-il possible d'appliquer de la couleur à des espaces de grille?

Existe-t-il un moyen de styler davantage que la largeur des espaces de grille dans le module de disposition de grille CSS? Je ne trouve rien à ce sujet dans la documentation, mais on aurait tendance à penser que ce serait possible, car les espaces de grille ont tendance à être colorés dans de nombreux modèles. Si ce n'est pas possible, existe-t-il une solution de contournement?

csscss-grid
24
Taishi

Malheureusement, il n'y a actuellement aucun moyen dans la spécification CSS Grid de styler grid-gap. Je suis venu avec une solution qui fonctionne bien bien que cela implique seulement html et css: affiche les lignes de la grille de frontière uniquement entre les éléments

6
eriklharper

Par exemple: si l’on a une grille de carrés de 5x5, est-ce le seul moyen d’obtenir des lignes de grille colorées pour remplir la grille de 25 éléments et appliquer des bordures à ces mêmes éléments?

Vous pouvez le faire, mais les bordures de la grille ne se réduisent pas de la même manière que les bordures de tableau avec le border-collapse _ propriété, et contrairement aux espaces vides, ils seront appliqués au périmètre de votre grille avec les bordures intérieures, ce qui peut ne pas être souhaité. De plus, si vous avez un grid-gap déclaration, les espaces sépareront vos bordures d’éléments de grille un peu comme border-collapse: separate fait avec les bordures de la table.

grid-gap est l'approche idiomatique d'espacement des éléments de la grille, mais ce n'est pas idéal, car les espaces vides ne sont que cela: de l'espace vide, pas des boîtes physiques. À cette fin, le seul moyen de corriger ces espaces est d'appliquer une couleur d'arrière-plan au conteneur de la grille.

7
BoltClock

Au lieu d'utiliser le solution ci-dessus , je vous recommande d'utiliser border avec des pseudo-classes, car si vous avez une quantité irrégulière de "cellules de tableau", vous obtiendrez une cellule remplie de couleurs laides à la fin de la "table".

enter image description here

Si vous souhaitez utiliser des bordures entre les "cellules de tableau" et que vous ne disposez pas toujours du même nombre de cellules, vous pouvez faire quelque chose comme ceci (cet exemple fonctionnerait également avec 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>
5
Jan Fässler

J'ai ajouté la couleur de bordure comme couleur d'arrière-plan à la grille et une couleur d'arrière-plan à tous les éléments de la grille.

.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>

Cela fonctionne pour moi.

1
michael

Vous pouvez utiliser des bordures au lieu de grip ou simplement changer la couleur d'arrière-plan, si cela fonctionne.

.yourDiv {
    border-right: 5px solid rgb(110, 0, 210);
    border-top: 10px solid rbg(255, 255, 0);
}

J'espère que ça aide!

0
Elias

Définir la couleur de fond sur la grille colorera vos espaces. Par exemple:

    section {
            display: grid;
            grid-gap: 15px;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            background-color: red;
        }
0
Milan Kosir