CSS Gridi omaduste lühendatud vorm

Omadus grid on lühendatud vorm kõikide gridi konteineri veergude ja ridade omaduste kirjutamiseks. Kõik väärtused kirjutatakse ühes reas kaldkriipsu kaudu.

grid abil saab ühes reas kirjeldada ainult üht tüüpi omadusi - selgesõnalised (grid-template-rows, grid-template-columns, grid-template-areas) või kaudsed (grid-auto-rows, grid-auto-columns, grid-auto-flow). Need omadused, mis jäid määramata, saavad vaikeväärtused.

Näide

Loome tabeli kasutades omadust grid:

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

Näide

Nüüd määrame teisele ja kolmandale reale sama kõrguse, ning igale veerule - erineva laiuse:

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

Näide

Nüüd teeme eelmise näite tabelis ülemise rea laiuseks kaks fraktsiooni, ja esimese veeru - pooleks fraktsiooniks:

<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: 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;
}

Praktilised ülesanded

Realiseerige järgmine näide: