Počet a šírka stĺpcov v CSS gridoch

Začíname s prácou v gride tým, že nastavíme počet a šírku stĺpcov, podľa ktorých sa budú rozmiestňovať dcérske elementy. Na tento účel použijeme vlastnosť grid-template-columns, ktorá sa uvádza v rodičovskom elemente a určuje počet a šírku stĺpcov, ktoré budú zaberať dcérske elementy v gride. V hodnote vlastnosti uvedieme šírku stĺpcov v pixeloch.

Príklad

Najprv vytvorme rodičovský element a urobme z neho grid kontajner. Povedzme, že máme div, v ktorom sa nachádza štyri dcérske elementy. Nastavme pre neho vo vlastnosti display hodnotu grid, a vo vlastnosti grid-template-columns napíšme šírku pre dva stĺpce:

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

Príklad

Teraz vytvorme tabuľku so štyrmi rôznymi veľkosťami stĺpcov:

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

Praktické úlohy

Povedzme, že máte div s deviatimi dcérskymi elementmi. Urobte rodičovský element grid kontajnerom.

Umiestnite dcérske elementy do dvoch stĺpcov so šírkou 200px.

Umiestnite dcérske elementy do troch stĺpcov so šírkou 150px.

Umiestnite dcérske elementy do troch stĺpcov: prvý so šírkou 100px, druhý 150px, a tretí 200px.