Vlastnosť grid-column-start

Vlastnosť grid-column-start nastavuje počiatočnú pozíciu prvku v gride alebo sieti podľa stĺpcov. Hodnotou vlastnosti môže byť kladné alebo záporné číslo. Ak zadáme kladné číslo, počiatočná pozícia prvku sa počíta zľava doprava. Pri zadaní záporného člena sa prvok bude umiestňovať v opačnom poradí, t.j. sprava doľava.

Syntax

cssselektor {
  grid-column-start: kladné alebo záporné číslo;
}

Príklad

Nastavme prvkom v gride počiatočné pozície:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
}
#elem2 {
  grid-column-start: 2;
}
#elem3 {
  grid-column-start: 3;
}

Результат:

Príklad

A teraz vo vlastnosti grid-column-start zadajme záporné čísla:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: -1;
}
#elem2 {
  grid-column-start: -2;
}
#elem3 {
  grid-column-start: -3;
}

Результат:

Príklad

A teraz pomocou vlastnosti grid-column-end urobme tak, aby prvý, druhý a tretí prvok boli umiestnené v prvom rade. A štvrtý prvok zaberá celý druhý rad:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem2 {
  grid-column-start: 2;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 3;
  grid-column-end: 4;
}
#elem4 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

Príklad

Pri prekrytí stĺpcov, ktoré zaberajú susedné prvky, každý nasledujúci prvok sa posunie o rad nižšie. Využime túto možnosť a urobme tak, aby sa prvý prvok umiestnil v prvom rade, druhý - v druhom, a tretí a štvrtý - zaberali tretí rad:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</div>
  <div id="elem4">4</div>
</div>

css#parent {
  display: grid;
  padding: 10px;
  border: 2px solid #696989;
}
#parent > div {
  padding: 10px;
  border: 1px solid #696989;
}
#elem1 {
  grid-column-start: 1;
  grid-column-end: 4;
}
#elem2 {
  grid-column-start: 2;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 2;
}
#elem4 {
  grid-column-start: 3;
  grid-column-end: 4;
}

Результат:

Pozri tiež