webentwicklung-frage-antwort-db.com.de

Spalten gleicher Breite im CSS-Raster

Ich möchte, dass der HTML-Code in n gleichen Spalten angezeigt wird, ob zwei oder drei oder mehr untergeordnete Elemente zum Zeilenelement mit css grid gehören. Flexbox macht dies einfach, aber ich kann es nicht mit css grid erledigen wird geschätzt.

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

Versuche dies:

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

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

Ansonsten ist hier eine Demo, die nützlich sein kann: jsFiddle

Weitere Informationen zur Einheit fr finden Sie in den folgenden Beiträgen: 

6
Michael_B

Definieren Sie dies in Ihrem Gittercontainer. Legt drei Spalten gleicher Breite fest.

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

@ Michael_Bs Antwort ist fast da.

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

Gibt Ihnen in Chrome, Firefox und Safari eine Reihe gleich großer Spalten wie beim Schreiben.

1
wegry

dadurch können die Spalten besser verteilt werden, und die Spalten haben dieselbe Größe, unabhängig davon, ob die Größe der Elemente nicht angepasst wird.

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