web-dev-qa-db-fra.com

CSS Grid colonnes verticales avec des rangées infinies

J'ai une liste d'éléments de longueur inconnue (à partir d'un CMS). Je veux les afficher dans 2 colonnes verticales lisant. par exemple.

 1 4 
 2 5 
 3 6 
 
 Etc ...

J'essaie de réaliser cela avec une grille CSS, cependant, cela ne semble pas possible sauf si vous définissez le nombre de lignes à l'avance. J'ai essayé grid-auto-flow: column selon https://gridbyexample.com/examples/example18/ mais cela ne fait qu'ajouter des colonnes supplémentaires à la fin.

Je me sens comme ceci devraitêtre possible avec la grille, mais je ne peux pas trouver un moyen. Quelqu'un a des idées?

P.S.Pleasene suggère pas de colonnes de texte CSS.

csscss3css-grid
7
matthewbeta

Sans connaître le nombre exact d'éléments, cela n'est pas possible avec la grille CSS seule.

La seule façon de contourner cette limitation consiste à ajouter une classe à la seconde moitié des éléments.

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: row dense;
  
  /* extra styles */
  grid-gap: 0.5rem;
}

span {
  grid-column-start: 1;
  
  /* extra styles */
  background-color: #def;
  padding: 0.5rem;
}

.second-half {
  grid-column-start: 2;
  
  /* extra styles */
  background-color: #abc;
}
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span class="second-half">5</span>
<span class="second-half">6</span>
<span class="second-half">7</span>

7
chrona

Vous pouvez utiliser un flex dans lequel se trouvent un conteneur et un élément de flex. Vous pouvez limiter la hauteur du conteneur, puis envelopper le contenu de flex pour continuer dans la colonne suivante: - 

<body>
<div class="container">
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
  <p>1</p>
</div>
</body>

CSS:

.container {
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

En savoir plus sur flexbox

2
benedemon

Une solution si votre code HTML est généré, vous pouvez calculer la propriété grid-template-rows sur l'élément conteneur avec Math.ceil( NUM_ITEMS / NUM_COLUMNS )

En réaction:

function VerticalColumns(props) {
    // props.numColumns matches `grid-template-columns` on `.container` element
    const numRows = Math.ceil(props.items.length / props.numColumns);

    const style = {
        gridTemplateRows: `repeat(${numRows}, 1fr)`,
    };

    return (
        <ul className='container' style={ style }>
            { props.items.map((item, index) => (
                <li key={index}>{ item }</li>
            )) }
        </ul>
    )
}

CSS de base:

.container {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(2, 1fr);
}
0
user2166772