Grid - Referentie
grid-template-columns
Met grid-template-columns kun je het aantal kolommen bepalen binnen een grid. Als er meer elementen zijn dan kolommen dan maakt de grid automatisch een nieuwe rij aan.
Een
Twee
Drie
Vier
Veel voorkomende values voor grid-template-columns:
CSS
grid-template-columns: 1fr 1fr; /* fractions */
grid-template-columns: 200px 100px 200px /* pixels */
grid-template-columns: 50% 20% 30%; /* percentages */
grid-template-columns: 1fr 200px 40% /* een combinatie van waardes */
grid-template-rows
Met grid-template-rows kun je het aantal rijen bepalen binnen een grid. En ook de grootte van elke rij aanpassen.
Een
Twee
Drie
Vier
Vijf
Zes
Zeven
Acht
Veel voorkomende values voor grid-template-rows:
CSS
grid-template-rows: 1fr 1fr; /* fractions */
grid-template-rows: 200px 100px 200px /* pixels */
grid-template-rows: 50% 20% 30%; /* percentages */
grid-template-rows: 1fr 200px 40% /* een combinatie van waardes */