web-dev-qa-db-fra.com

Colonnes d'égale largeur dans la grille CSS

J'aimerais que le code HTML ci-dessous indique dans n colonnes égales s'il y a deux, ou trois, ou plusieurs éléments enfants dans l'élément row en utilisant la grille CSS - Flexbox facilite cela, mais je ne peux pas le faire avec l'aide de CSS grid - aucune aide. est apprécié.

<div class="row">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>
htmlcsscss3gridcss-grid
4
user1678736

Essaye ça:

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
}

.grid-items {
   grid-row: 1;
}

Sinon, voici une démo qui pourrait vous être utile: jsFiddle

Pour en savoir plus sur l’unité fr, consultez les articles suivants: 

6
Michael_B

Définissez ceci sur votre conteneur de grille. Définit trois colonnes d'égale largeur.

grid-template-columns: repeat(3, 1fr);
6
Kevin

@ Michael_B a presque terminé sa réponse.

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
}

Vous donne une rangée de colonnes de taille égale dans Chrome, Firefox et Safari au moment de l'écriture.

1
wegry

cela permet de mieux répartir les colonnes et leur taille est identique, que la taille des éléments ne soit pas ajustée ou non.

     .row {
        display: grid;
        grid-template-columns: repeat( auto-fit, minmax(33.33%, 1fr) );
     }
     .item {
       grid-column: span 1;
     }
0
Diover Vera