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:

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

css#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:

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

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