CSS tinklelio savybių sutrumpintas užrašas

Savybė grid yra sutrumpinta visų stulpelių ir eilučių tinklelio konteinerio savybių užrašo forma. Visos reikšmės įrašomos vienoje eilutėje per brūkšnį.

Naudojant grid vienoje eilutėje galima aprašyti tik vieną tipą savybių - eksplicitesnes (grid-template-rows, grid-template-columns, grid-template-areas) arba implicitesnes (grid-auto-rows, grid-auto-columns, grid-auto-flow). Savybės, kurios liko nenurodytos, įgauna numatytąsias reikšmes.

Pavyzdys

Sukurkime lentelę naudodami savybę 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;
}

Pavyzdys

Dabar nustatykime antrai ir trečiai eilutėms vienodą aukštį, o kiekvienam stulpeliui - skirtingą plotį:

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

Pavyzdys

Dabar iš ankstesnio pavyzdžio lentelės padarykime viršutinę eilutę dviejų frakcijų aukščio, o pirmą stulpelį - pusės frakcijos pločio:

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

Praktinės užduotys

Implementuokite šį pavyzdį: