Afkorting voor rijen en kolommen in CSS-grids

Er zijn situaties waarin het handig is om de afmetingen van rijen en kolommen in een verkorte vorm op te geven. Hiervoor gebruiken we de eigenschap grid-template, die wordt opgegeven in het bovenliggende element en een verkorte vorm is van het opschrijven van twee eigenschappen: grid-template-rows en grid-template-columns.

Rijen en kolommen voor de grid-container worden gescheiden door een schuine streep, hun afmetingen worden bepaald in meeteenheden.

Voorbeeld

Laten we met behulp van de eigenschap grid-template een tabel maken:

<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: 1fr 1fr 1fr / 1fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we nu voor de tweede en derde rij dezelfde breedte instellen, en voor 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: 60px 1fr 60px / 20% 1fr 15%;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Voorbeeld

Laten we 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: 2fr 1fr 1fr / 0.5fr 1fr 1fr;
	border: 2px solid #696989;
	padding: 10px;
	width: 600px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Praktische opdrachten

Implementeer de volgende tegel: