web-dev-qa-db-fra.com

Comment faire pour que les éléments de la dernière ligne consomment l'espace restant dans la grille CSS?

Existe-t-il un moyen de forcer tous les éléments de la dernière ligne, d'une grille, à remplir la ligne, peu importe leur nombre?

Je ne connais pas le nombre d'éléments qui seront dans la grille donc je ne peux pas les cibler directement. J'ai essayé d'utiliser grid-auto-flow: dense, mais cela n'aide pas vraiment.

Voici ma question visualisée: enter image description here :

div {
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
span {
  height: 50px;
  background: blue;
}
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>  
</div>
cssgrid-layoutcss-grid
12
Ogdila

Ceci est totalement possible avec la grille CSS en combinant les règles CSS nth-child et nth-last-of-type. La seule mise en garde est que le nombre de colonnes doit être connu à l'avance.

.grid {
    display: grid;
    grid-template-columns: auto auto auto;
    justify-items: start;
    grid-gap: 10px;
}

.grid div {
  border: 1px solid #ccc;
  width: 100%;
}

.grid > *:nth-child(3n-1) {
  justify-self: center;
  text-align: center;
}

.grid > *:nth-child(3n) {
  justify-self: end;
  text-align: right;
}

.grid > *:nth-child(3n-1):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 2;
}

.grid > *:nth-child(3n-2):nth-last-of-type(1) {
  border-color: red;
  grid-column: span 3;
}
<div class="grid">
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
  <div>text</div>
  <div>text</div>
  <div>TEXT</div>
</div>
0
rainecc

J'ai trouvé la réponse à votre question que je l'ai reproduite ici: https://jsfiddle.net/nmcobalt/dg3mutwv/13/

Vous devez utiliser le sélecteur css nth: dernier enfant par itération (en utilisant sass) calculant les enfants en fonction de la fonction modulo et du facteur constant des 3 colonnes.

@mixin setLastChildFluid{
  @for $i from 1 through 10 {    
    $span: 3;
    @if $i % 3 == 0{
      $span: 1;
    } @else if $i % 3 == 1{
      $span: 3;
    } @else if $i % 3 == 2{
      $span: 2;
    } 
    @if $span == 2 {
      span:nth-child(#{$i - 1}){
        &:nth-last-child(2){
          grid-column-end:span 1;
          position:relative;
          bottom:0;
          width:calc(150% + 5px);
          left:0;    
        }
      }
      span:nth-child(#{$i}){
        &:nth-last-child(1){
          grid-column-start:2;
          position:relative;
          bottom:0;
          width:calc(150% + 5px);
          left:calc(50% + 5px);
        }
      }

    } @else {
      span:nth-child(#{$i}){
        &:last-child{
            grid-column-end:span #{$span};          
        }
      }
    }

  }
}
div {
  position:relative;
  margin:20px auto;
  width: 400px;
  background: #d8d8d8;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(3, 1fr);

  @include setLastChildFluid;
}
span {
  height: 50px;
  background: blue;
  color:yellow;
}

et le balisage html suivant; J'ai fait deux exemples différents (enveloppés par div) pour reproduire votre requête:

<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
</div>
<div>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
</div>

Modifiez le nombre de divs afin de voir le résultat fluide.

0
Vardalas Esteleleloulieth