Počet a šířka sloupců v CSS gridu

Seznámení s prací v gridu začneme tím, že nastavíme počet a šířku sloupců, podle kterých se budou umisťovat podřízené elementy. K tomuto účelu použijeme vlastnost grid-template-columns, která se uvádí v nadřazeném elementu a nastavuje počet a šířku sloupců, které zaujmou podřízené elementy v gridu. V hodnotě vlastnosti uvedeme šířku sloupců v pixelech.

Příklad

Nejprve vytvořme nadřazený element a udělejme z něj grid kontejner. Předpokládejme, že máme div, ve kterém se nachází čtyři podřízené elementy. Nastavme pro něj ve vlastnosti display hodnotu grid, a ve vlastnosti grid-template-columns uveďme šířku pro dva sloupce:

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

Příklad

Nyní vytvořme tabulku se čtyřmi různými sloupci o různé velikosti:

<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

Předpokládejme, že máte div s devíti podřízenými elementy. Udělejte nadřazený element grid kontejnerem.

Umístěte podřízené elementy do dvou sloupců o šířce 200px.

Umístěte podřízené elementy do tří sloupců o šířce 150px.

Umístěte podřízené elementy do tří sloupců: první o šířce 100px, druhý 150px, a třetí 200px.