Eigenschap grid-template-columns

De eigenschap grid-template-columns bepaalt het aantal en de breedte van de kolommen die een element in een grid of rooster zal innemen. De eigenschap wordt opgegeven in het ouder-element en bepaalt de breedte van de kolommen van de kind-elementen. In de waarde van de eigenschap geven we de breedte van de kolommen op in willekeurige eenheden voor afmetingen.

Bij het opgeven van waarden in pixels in de eigenschappen zullen de kolomafmetingen er exact aan voldoen. Als we het woord auto opgeven, dan zullen de kolommen alle beschikbare ruimte opvullen. Het gebruik van de eenheid fr (fractie) betekent dat alle ruimte wordt verdeeld in gelijke delen. Het voordeel van fr is de aanpassingsvermogen aan verschillende containers of schermresoluties, omdat fr ze eenvoudig verdeelt in het opgegeven aantal fracties zonder binding aan een exacte afmeting in pixels.

Syntaxis

selector {
	grid-template-columns: kolombreedte;
}

Voorbeeld

Laten we de kolombreedtes instellen voor onze elementen in het grid:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50px 100px 200px 50px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we voor de eerste en derde kolom een vaste breedte in pixels instellen, en laat de tweede kolom automatisch de beschikbare ruimte opvullen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 100px auto 150px;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we nu met behulp van de eigenschap grid-template-columns instellen dat de eerste en tweede kolom één deel van de container innemen, en de derde kolom - drie delen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 1fr 3fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Waarden, opgegeven in eenheden fr kunnen fractionele waarden aannemen. Laten we het vorige voorbeeld aanpassen door voor de tweede en derde kolom een breedte in gebroken getallen in te stellen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 1fr 0.5fr 2.5fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we in de eigenschap grid-template-columns de functie repeat() opgeven, die de container vertelt dat alle drie kolommen dezelfde breedte moeten hebben:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we nu het vorige voorbeeld aanpassen zodat aan de drie identieke kolommen een vierde wordt toegevoegd, die twee fracties van de container zal innemen:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(3, 1fr) 2fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we voor de eerste twee kolommen een breedte van één fractie van de container instellen, en voor de laatste twee kolommen - twee fracties:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we nu de kolombreedtes instellen door waarden te combineren, opgegeven met behulp van de functie repeat() en vrije eenheden fr:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(2, 1fr) 3fr repeat(2, 2fr);
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Ook kan in de functie repeat() de waarde auto-fill worden opgegeven, die onze container vult met identieke kolommen van de gewenste breedte:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, 200px);
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Het is erg handig om samen met auto-fill de functie minmax op te geven, die een bereik van kolombreedtes instelt van minimale tot maximale waarde. Als de breedte van de container niet alle kolommen kan bevatten, zullen sommige ervan verplaatst worden naar een nieuwe regel, waarbij de kolommen in de regel er gelijkmatig over worden verdeeld. Laten we het vorige voorbeeld aanpassen door daarin de functie minmax op te geven. Om verschillende plaatsingsopties van kolommen te zien pas je de breedte van je browserpagina aan:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we nu de eigenschap auto-fit opgeven, waarvan het verschil met auto-fill erin ligt, dat het het aantal kolommen aanpast aan de beschikbare breedte van de container, door ze uit te breiden of samen te trekken:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	border: 2px solid #696989;
	padding: 10px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Naast fr kunnen ook waarden in % worden gebruikt, die eveneens bepalen welk deel van de container de kolom zal innemen. Hierbij wordt eerst de grootte van de kolom in % berekend, en de resterende vrije ruimte wordt verdeeld in fracties:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</div>

#parent {
	display: grid;
	grid-template-columns: 50% 1fr 2fr 30%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we samen de eigenschappen grid-template-columns en grid-template-rows gebruiken:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we met behulp van de eigenschappen grid-template-columns en grid-template-rows een tabel maken van negen cellen, gerangschikt in drie rijen. Waarbij de tweede en derde rij dezelfde breedte hebben, en elke kolom - een verschillende breedte:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 60px 1fr 60px;
	grid-template-columns: 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we nu in de tabel uit het vorige voorbeeld de bovenste rij een breedte van twee fracties geven, en de eerste kolom - een halve fractie:

<div id="parent">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</div>

#parent {
	display: grid;
	grid-template-rows: 2fr 1fr 1fr;
	grid-template-columns: 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Zie ook

de eigenschap grid-template-rows,
die het aantal en de breedte van rijen in een grid bepaalt
de eigenschap grid-auto-columns,
die het aantal en de breedte van kolommen in een impliciet grid bepaalt