1
votes

affichage: grille. Comment étirer un bloc sur toute sa largeur

J'étudie la grille. Je veux que le troisième bloc s'étire sur toute sa largeur. Si possible sans ajouter de classes supplémentaires.

Est-il possible de le faire en utilisant le CSS interne?

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 2;
}

En fin de compte, je veux que les suivent . p>

css css-grid

2 commentaires

Pourquoi dites-vous «sans cours supplémentaires»?. Il existe de nombreuses façons de résoudre un problème, donc ici, vous apportez des modifications en CSS ou en HTML pour obtenir ce que vous recherchez

Peut-être que ce n'est pas possible uniquement en utilisant CSS, vous devez changer la structure HTML ou ajouter une autre classe supplémentaire.

3 Réponses :

0
votes

Essayez ce code. Hope vous aidera.

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="third"></div>
</div>

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>

<div class="grid">
  <div class="first"></div>
  </div>
  <div class="grid">
  <div class="third"></div>
</div>

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 1;
}

1 commentaires

Mais cela change la structure HTML

2
votes

Vous pouvez utiliser Adjacent Sibling Combinator , qui a gagné Vous n'avez pas besoin d'utiliser des requêtes multimédias, et d'utiliser uniquement les propriétés CSS Grid.

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

ou:

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
  
  & > * {
    border: dotted 2px black;
  }
}
.first {
  background-color: #6CD4FF;
  grid-row: 1;
}
.second {
  background-color: #8B8DF9;
  grid-row: 1;
}
.third {
  background-color: #DDFD77;
  grid-row: 2;
}
.second + .third {
  grid-column: 1 / span 2;
}

// A bit more generic
div + .third {
  grid-column: 1 / span 2;
}

.second + .third {
  grid-column: 1 / span 2;
}

1 commentaires

Ha! Pour une raison quelconque, je n'y ai pas pensé)

1
votes

Voici une solution plus générique où vous pouvez utiliser les sélecteurs nth-child () :

<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
  <div class="third"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="second"></div>
</div>
<div class="grid">
  <div class="first"></div>
  <div class="third"></div>
</div>

.grid {
  margin: 36px auto;
  height: 120px;
  width: 100%;
  display: grid;
  grid-gap: 8px;
}
.grid > * {
    border: dotted 2px black;
  }

.first {
  background-color: #6CD4FF;
}
.second {
  background-color: #8B8DF9;
}
.third {
  background-color: #DDFD77;
}
.grid :nth-child(3):last-child {
  grid-column:span 2;
}

0 commentaires