web-dev-qa-db-fra.com

Réduire les bordures à l'aide de la grille CSS

Je m'amuse à me familiariser avec la nouvelle spécification CSS Grid, mais je rencontre des problèmes avec les bordures.

Est-il possible de réduire les bordures dans une grille CSS, ou existe-t-il un moyen de styliser la gouttière?

Comme vous pouvez le voir dans l'extrait ci-dessous, le 10px pile de bordures (20px total) entre les blocs.

Je comprends que ce problème n'est pas propre aux grilles CSS, mais j'espère qu'il permettra de nouvelles solutions pour créer une bordure uniforme de 10 pixels entre toutes les boîtes et sur les bords extérieurs.

Mon cas d'utilisation réel est un calendrier que je crée pour m'exercer à travailler avec les grilles et les composants React. Vous pouvez voir le problème que je rencontre ici:

CSS Grid Calendar.

Étant donné que chaque mois est différent, j'aurai beaucoup de cas Edge différents à considérer.

.container {
  display: grid;
  grid-template-columns: 120px 120px;
  box-sizing: border-box;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  border: 10px solid palegreen;
}

.first {
  grid-column: 2 / span 1;
}
<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

J'adore la Grille, mais j'ai du mal à Google! Même quelques suggestions sur la façon d'améliorer ma question seraient très appréciées. L'effondrement des frontières est-il le bon terme? Grilles internes?

Merci!

htmlcsscss3css-grid
22
Tim Foley

Vous pouvez utiliser grid-gap ou box-shadow:

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  box-sizing: border-box;
  grid-gap:10px;
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 box-shadow:0 0 0 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}
<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

ou combinez le paramètre de modèle de ligne et de colonne:

.container {
  display: grid;
  grid-template-columns: 110px 110px;
  grid-template-rows:110px;
  box-sizing: border-box;
  
}

.block {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
 border:solid 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}
<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
</div>

notez que les colonnes et les lignes de 120 pixels afficheront les bordures des deux côtés lorsque la case est définie sur 100 pixels ...

si la valeur fr est utilisée pour les colonnes, ne définissez pas la largeur des cases (les lignes suivraient la même restriction)

.container {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 110px;
  /*whatever else */
  box-sizing: border-box;
}

.block {
  margin: 0 -10px 0 0;/* fixed width value missing */
  height: 100px;
  background-color: lightgrey;
  border: solid 10px palegreen;
}

.first {
  grid-column: 2 / span 1;
}
<div class='container'>
  <div class='block first'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
  <div class='block'>4</div>
  <div class='block'>5</div>
  <div class='block'>6</div>
  <div class='block'>7</div>
</div>
22
G-Cyr

Pensez à contrôler tous les dimensionnements et espacements au niveau du conteneur de grille, et non au niveau de l'élément de grille. Supprimez les bordures et le dimensionnement appliqués aux articles.

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* 1 */ /* 2 */
  grid-auto-rows: 100px; /* 3 */
  grid-gap: 5px; /* 4 */
  padding: 5px;
  background-color: tomato;
}

.block {
  background-color: lightgrey;
}

/* for demo only */
.block:nth-child(-n + 2) {
  visibility: hidden;
}
<div class='container'>
  <div class='block'>0</div>
  <div class='block'>0</div>
  <div class='block'>1</div>
  <div class='block'>2</div>
  <div class='block'>3</div>
  <div class='block'>4</div>
  <div class='block'>5</div>
  <div class='block'>6</div>
  <div class='block'>7</div>
  <div class='block'>8</div>
  <div class='block'>9</div>
  <div class='block'>10</div>
  <div class='block'>11</div>
  <div class='block'>12</div>
  <div class='block'>13</div>
  <div class='block'>14</div>
  <div class='block'>15</div>
  <div class='block'>16</div>
  <div class='block'>17</div>
  <div class='block'>18</div>
  <div class='block'>19</div>
  <div class='block'>20</div>
  <div class='block'>21</div>
  <div class='block'>22</div>
  <div class='block'>23</div>
  <div class='block'>24</div>
  <div class='block'>25</div>
  <div class='block'>26</div>
  <div class='block'>27</div>
  <div class='block'>28</div>
  <div class='block'>29</div>
  <div class='block'>30</div>
  <div class='block'>31</div>  
</div>

démo jsFiddle

Remarques:

  1. auto-fit: Remplissez autant de colonnes que possible sur la ligne. Les colonnes de débordement seront bouclées.
  2. minmax(): Chaque colonne aura une largeur minimale de 120 pixels et une largeur maximale de l'espace libre disponible. L'unité fr est comparable à la propriété flex-grow De la mise en page flexible.
  3. grid-auto-rows: Les lignes créées automatiquement ( lignes implicites ) auront une hauteur de 100 pixels.
  4. grid-gap: 5px gouttières tout autour. Raccourci pour grid-column-gap Et grid-row-gap.
6
Michael_B

Une autre approche que vous pouvez adopter si vous êtes d'accord avec la couleur de la bordure de l'écart étant la même que les cellules du jour qui ne tombent pas le mois en cours consiste à enrouler un div autour de l'ensemble du conteneur de grille et à définir son background-color à la couleur souhaitée pour vos bordures et donnez-lui 1px de padding avec un grid-gap de 1px. Avec cette approche, vous pouvez obtenir une grille à bord uniforme sans la complexité de l'utilisation de box-shadow, ce qui me semble être un hack.

1
eriklharper