web-dev-qa-db-fra.com

Définition du nombre minimum et maximum de colonnes à l'aide de la grille CSS

J'ai 10 divs (64px x 64px) à afficher en 5 colonnes maximum (pour les grandes et très grandes fenêtres) et 3 colonnes minimum (pour les petites fenêtres comme iPhone 7, etc.).

J'essaie de faire cela avec CSS Grid mais je ne peux pas faire la partie minimum de colonnes (elle passe à 2 colonnes même s'il y a de la place pour 3 colonnes).

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 140px));
  max-width: 800px;
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

La largeur maximale du conteneur de grille est 800px.

Voici le lien pour Codepen

Éditer: Si possible, je souhaite accomplir cela uniquement avec CSS Grid, c’est-à-dire sans utiliser Media Queries ou Flexbox.

htmlcsscss3css-grid
9
Sumit Bagga

vous pouvez obtenir la sortie requise en utilisant la requête @media utilisée grid-template-columns: repeat(5, 1fr); pour les grands périphériques et grid-template-columns: repeat(3, 1fr); pour petit appareil 

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 1fr);  
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}

@media(max-width:540px){
  .parent {
     grid-template-columns: repeat(3, 1fr);
  }
}
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

1
SantoshK

Je pense que c'est ce que vous recherchez.

body {
  background-color: wheat;
}

.parent {
  display: grid;
  grid-gap: 2vw;
  grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
  max-width: 800px;
}

.child {
  height: 64px;
  width: 64px;
  background-color: brown;
}
<body>
  <div class="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
  </div>
</body>

J'ai changé - grid-template-columns: repeat(auto-fill, minmax(100px, 140px)); à grid-template-columns: repeat(auto-fill, minmax(100px, 120px));

Parce que dans la petite taille de l’écran, l’enfant aura la zone 140px réservée, ce qui le séparera en deux colonnes du petit écran. Je l’ai remplacé par 120px et grid-gap: 2vw; pour résoudre ce problème.

J'espère que cela vous a été utile.

0
weBBer

Vous ne savez pas si cela vous gêne, mais utilisez des requêtes sur les médias:

.parent { grid-template-columns: repeat(3, 1fr); } pour les petits écrans

et

.parent { grid-template-columns: repeat(5, 1fr); } pour les écrans plus grands

0
Frish