Savybė grid

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

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

Sintaksė

elementas {
	grid: tinklelio savybės;
}

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: 400px;
	height: 200px;
}

#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Pavyzdys

Dabar nustatykime antrai ir trečiai eilutėms vienodą plotį, 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: 400px;
	height: 300px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Pavyzdys

Dabar lentelėje iš ankstesnio pavyzdžio padarykime viršutinę eilutę dviejų frakcijų ploč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: 400px;
	height: 400px;
}
#parent > div {
	padding: 10px;
	border: 1px solid #696989;
}

Taip pat žiūrėkite

savybė grid-template,
kuri nustato elementui stulpelių ir eilučių skaičių bei plotį
savybė grid-template-rows,
kuri nustato eilučių skaičių ir plotį tinklelyje
savybė grid-template-columns,
kuri nustato stulpelių skaičių ir plotį tinklelyje
savybė grid-template-areas,
kuri nustato elementų išdėstymą tinklelyje
savybė grid-auto-flow,
kuri nustato automatinį elementų išdėstymą tinklelyje