Vlastnosť grid-column-end

Vlastnosť grid-column-end určuje koncovú pozíciu prvku v gride alebo mriežke pred určeným stĺpcom. Hodnotou vlastnosti môže byť kladné alebo záporné číslo. Ak zadáme kladné číslo, koncová pozícia prvku sa počíta zľava doprava. Pri zadaní záporného člena sa prvok umiestni v opačnom poradí, t.j. sprava doľava.

Dôležitý detail vlastnosti grid-column-end spočíva v tom, že číslo určeného stĺpca nie je zahrnuté do koncovej pozície prvku - ak zadáme číslo 3, prvok zaberie iba prvý a druhý stĺpec.

Syntax

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

Príklad

Nastavme prvkom v gride koncové 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;
  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: 1;
  grid-column-end: 3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: 4;
}

Результат:

Príklad

A teraz pomocou vlastnosti grid-column-start urobme tak, aby prvý, druhý a tretí prvok boli umiestnené v prvom rade. A štvrtý prvok zaberal 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 prekrývaní stĺpcov, ktoré zaberajú susedné prvky, každý nasledujúci prvok sa posunie o rad nižšie. Využime túto vlastnosť a urobme tak, aby sa prvý prvok umiestnil v prvom rade, druhý - v druhom, a tretí a štvrtý - v treťom rade:

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

Результат:

Príklad

A teraz zadajme vo vlastnosti grid-column-end 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;
  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: 1;
  grid-column-end: -3;
}
#elem3 {
  grid-column-start: 1;
  grid-column-end: -2;
}

Результат:

Pozri tiež