web-dev-qa-db-fra.com

CSS Grid gap/column sur des éléments spécifiques?

J'ai créé la grille ci-dessous à l'aide de CSS Grid et je me demande s'il est possible de laisser un espace uniquement entre des éléments spécifiques de la grille, plutôt que d'appliquer un espace universel à tous les éléments de la grille. Voici ce que j'ai en ce moment:

body {
  margin: 40px;
}

.wrapper {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row] ;
  background-color: #fff;
  color: #444;
}

  .box {
    background-color:#444;
    color:#fff;
    padding:20px;
    font-size:150%;
  }
    .a {
      grid-column: col / span 2;
      grid-row: row 1 / 3;
    }
    .b {
      grid-column: col 3 / span 1;
      grid-row: row ;
    }
    .c {
      grid-column: col 3 / span 1;
      grid-row: row 2 ;
    }
    .d {
      grid-column: col / span 1;
      grid-row: row 3;
    }
    .e {
      grid-column: col 2 / span 1;
      grid-row: row 3;
    }
    .f {
      grid-column: col 3 / span 1;
      grid-row: row 3;
    }
    .g {
      grid-column: col / span 1;
      grid-row: row 4;
    }
    .h {
      grid-column: col 2 / span 1;
      grid-row: row 4;
    }
    .i {
      grid-column: col 3 / span 1;
      grid-row: row 4;
    }
<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
</div>

Je voudrais supprimer l’écart entre les 2 rangées supérieures du côté droit et entre chaque cellule des rangées situées en dessous. Je voudrais garder les cellules brisées comme elles sont maintenant parce que la disposition sera différente sur le bureau. Voici une représentation graphique de ce que je vais faire:

 enter image description here

csscss3gridcss-grid
4
user13286

C'est impossible. Vous pouvez référencer un élément de grille spécifique avec grid-item:nth-child(n) et lui définir des marges négatives.

2
Vladimir.V.Bvn

J'ai un travail autour pour obtenir le résultat souhaité. Je viens de déplacer les trois lignes dans une section de grille séparée. Je ne suis pas sûr que cela aide ou pas, mais le voici:

body {
  margin: 40px;
}

.wrapper1 {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row] ;
  background-color: #fff;
  color: #444;
  margin-bottom: 10px;
}
.wrapper2 {
  display: grid;
  grid-template-columns: [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row] ;
  background-color: #fff;
  color: #444;
  margin-bottom: 10px;
}

.wrapper3 {
  display: grid;
  grid-template-columns: [col] 100px [col] 100px [col] 100px;
  grid-template-rows: [row] auto [row] auto [row] ;
  background-color: #fff;
  color: #444;
  margin-bottom: 10px;
}

.box {
  background-color:#444;
  color:#fff;
  padding:20px;
  font-size:150%;
}
.a {
  grid-column: col 1 / span 2;
  grid-row: row 1 / 3;
}

.b {
  grid-column: col 3 / span 1;
  grid-row: row ;
}

.c {
  grid-column: col 3 / span 1;
  grid-row: row 2 ;
}

.d {
  grid-column: col 1 / span 1;
  grid-row: row 3;
  width: 80%;
}

.e {
  grid-column: col 2 / span 1;
  grid-row: row 3;
  width: 80%;
}

.f {
  grid-column: col 3 / span 1;
  grid-row: row 3;
  width: 80%;
}

.g {
  grid-column: col 1 / span 1;
  grid-row: row 4;
  width: 80%;
}

.h {
  grid-column: col 2 / span 1;
  grid-row: row 4;
  width: 80%;
}

.i {
  grid-column: col 3 / span 1;
  grid-row: row 4;
  width: 80%;
}
<div class="wrapper1">
    <div class="box a">A</div>
    <div class="box b">B</div>
    <div class="box c">C</div>
</div>
<div class="wrapper2">
    <div class="box d">D</div>
    <div class="box e">E</div>
    <div class="box f">F</div>
</div>
<div class="wrapper3">
    <div class="box g">G</div>
    <div class="box h">H</div>
    <div class="box i">I</div>
</div>

0
Aagam Jhaveri