0
votes

Comment créer une grille CSS réactive (Affichage: grille) comportant trois boîtes égales sur la rangée supérieure, puis le reste des rangées est deux cases de taille égale?

Je veux faire une grille CSS réactive qui ressemble à ceci:

box | box | box
b o x  |  b o x
b o x  |  b o x

css css-grid

0 commentaires

3 Réponses :

-1
votes

à l'aide de la mise en page CSS Flex et de la requête médiatique CSS, vous pouvez obtenir votre besoin. Voir le code ci-dessous, si la taille de l'écran est réduite à 600px, il passera ensuite à une disposition de colonne unique.

  <body>
    <div class="three-box-row container">
      <div style="background-color: red;">Box 1</div>
      <div style="background-color: green;">Box 2</div>
      <div style="background-color: blue;">Box 3</div>
    </div>
    <div class="two-box-row container">
      <div style="background-color: red;">Box 1</div>
      <div style="background-color: green;">Box 2</div>
    </div>
    <div class="two-box-row container">
      <div style="background-color: green;">Box 1</div>
      <div style="background-color: blue;">Box 2</div>
    </div>
  </body>

1 commentaires

Merci pour la réponse. Cependant, je cherche un moyen d'utiliser la grille CSS pour atteindre cet effet.

2
votes

Voici une façon de le faire en utilisant la fonction Nth-enfant. Pour rendre la grille réactive, vous ajoutez simplement un Query Media qui change le style des cellules et grille à une certaine largeur d'écran.

<div class="grid">
  <div class="cell">One</div>
  <div class="cell">Two</div>
  <div class="cell">Three</div>
  <div class="cell">Four</div>
  <div class="cell">Five</div>
  <div class="cell">Six</div>
  <div class="cell">Seven</div>
</div>

1 commentaires

Vous et @ paulie-D les deux avaient une réponse presque identique. Je choisis le vôtre comme réponse à ma question parce que cela semble avoir répondu en premier. Merci à vous deux.

3
votes

En utilisant une grille de six colonnes

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

0 commentaires