web-dev-qa-db-fra.com

Puis-je avoir un nombre variable de colonnes par ligne dans une grille CSS?

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 100px;
  grid-auto-rows: 60px;
  grid-gap: 15px;
}

.col {
  background-color: tomato;
}
<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Cela crée 2 lignes, la première mesure 100 pixels de haut, la seconde est créée automatiquement avec 60px la taille. 2 colonnes dans la deuxième ligne ont 1fr largeur.

Est-ce possible via CSS Grid/Flexbox de centrer horizontalement 2 colonnes dans la 2ème ligne? C'est à dire. avoir un nombre variable de colonnes par ligne.

Je suis coincé à essayer de résoudre un cas d'utilisation trivial pour le framework CSS Grid dans le navigateur. C'est assez simple à réaliser si vous construisez vos grilles avec Flexbox.

Mais puis-je y parvenir avec CSS Grid?

Voici une démo CodePen de ce que j'essaie de réaliser.

csscss-grid
10
knitevision

Si vos lignes ont un nombre variable de cellules qui ne sont pas toutes disposées sur un seul espace bidimensionnel (ligne et colonne), vous n'avez pas de grille. Une grille par définition contient un nombre fixe de lignes et de colonnes et des cellules qui s'étendent sur une ou plusieurs de chacune.

(Peut-être que vous auriez plusieurs grilles hétérogènes, une par ligne, mais cela défait tout le point des grilles, vraiment.)

3
BoltClock

Vous demandez ceci:

Puis-je avoir un nombre variable de colonnes par ligne dans une grille CSS?

Mais alors vous dites ceci:

Est-ce possible via CSS Grid/Flexbox de centrer horizontalement 2 colonnes dans la 2ème ligne?

On dirait que vous êtes coincé dans un classique Problème XY : Vous vous concentrez sur votre tentative de solution plutôt que votre problème réel.

Oui, il est possible de centrer les colonnes (et les éléments de grille et le contenu) dans la grille CSS. (Voir différentes méthodes ici: Centrage dans la grille CSS )

Non, il n'est pas possible d'avoir un nombre variable de colonnes par ligne dans une grille CSS, ou n'importe quelle grille d'ailleurs. Sinon, vous n'avez pas de grille.

Puisque l'apparence est souvent tout ce qui compte dans une mise en page, vous pouvez créer quelque chose qui ressemble à trois "colonnes" dans la première ligne et deux "colonnes" dans la deuxième ligne - centrées - à l'aide de CSS Grid.

Dans mon exemple ci-dessous, j'ai divisé l'espace horizontal dans le conteneur de grille entre 12 colonnes. J'ai ensuite utilisé les fonctions de placement en ligne de Grid pour positionner et dimensionner les éléments.

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 40px;
  grid-gap: 10px;
}

.col:nth-child(-1n + 3) {
  grid-column: span 4;
}
.col:nth-last-child(2) {
  grid-row-start: 2;
  grid-column: 3 / span 4;
}
.col:nth-last-child(1) {
  grid-row-start: 2;
  grid-column: 7 / span 4;
}
.col {
  background-color: tomato;
}
<div class="grid">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

démo codepen

Voici à quoi cela ressemble en utilisant Firefox DevTools :

enter image description here

10
Michael_B

Vous pouvez résoudre ce problème en ayant des grilles imbriquées. Grille-1 (couvre la zone complète) Grille-2 (couvre la rangée-1) Grille-3 (couvre la rangée-2)

Ce paramètre vous permet de raccourcir la largeur de la ligne 2.

1
Toolbox

Vous pouvez toujours l'essayer de cette façon:

[~ # ~] css [~ # ~] 

body {
    margin: 2% 35%;
}
.container {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: [col] 100px [col] 100px [col] 100px [col] 100px  ;
    grid-template-rows: [row] auto [row] auto [row] ;
    background-color: #fff;
    color: #444;
}
.col {
    background-color: #444;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    font-size: 150%;

}
.a {
    grid-column: col / span 2;
    grid-row: row ;
}
.b {
    grid-column: col 3 / span 2 ;
    grid-row: row ;
}
.c {
    grid-column: col ;
    grid-row: row 2 ;
}
.d {
    grid-column: col 2 / span 3 ;
    grid-row: row 2 ;
}
.e {
    grid-column: col / span 4;
    grid-row: row 3;
}

[~ # ~] html [~ # ~] 

<div class="container">
    <div class="col a">A</div>
    <div class="col b">B</div>
    <div class="col c">C</div>
    <div class="col d">D</div>
    <div class="col e">E</div>
</div>

CodePen: https://codepen.io/anon/pen/MOLrvq

1
Alina