Stulpelių kiekis ir plotis CSS griduose

Pažintį su darbu griduose pradėsime nuo to, kad priskirsime stulpelių kiekį ir plotį, pagal kurį bus išdėstomi antriniai elementai. Šiam tikslui naudosime savybę grid-template-columns, kuri nurodoma pagrindiniame elemente ir nustato stulpelių kiekį ir plotį, kurį užims antriniai elementai gride. Savybės reikšmėje nurodome stulpelių plotį pikseliais.

Pavyzdys

Pirmiausia sukurkime pagrindinį elementą ir padarykime jį grid konteineriu. Tarkime, kad turime div, kuriame yra keturi antriniai elementai. Nustatykime jam savybėje display reikšmę grid, o savybėje grid-template-columns parašykime plotį dviem stulpeliams:

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

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

Pavyzdys

Dabar sukurkime lentelę su keturiais skirtingo dydžio stulpeliais:

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

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

Praktinės užduotys

Tarkime, kad turite div su devyniais antriniais elementais. Padarykite pagrindinį elementą grid konteineriu.

Išdėstykite antrinius elementus į du stulpelius, kurių plotis 200px.

Išdėstykite antrinius elementus į tris stulpelius, kurių plotis 150px.

Išdėstykite antrinius elementus į tris stulpelius: pirmo plotis 100px, antro 150px, o trečio 200px.