Vlastnost grid-column-end

Vlastnost grid-column-end nastavuje koncovou pozici prvku v gridu nebo mřížce až po určený sloupec. Hodnotou vlastnosti může být kladné nebo záporné číslo. Pokud zadáme kladné číslo, potom se koncová pozice prvku počítá zleva doprava. Při zadání záporného čísla se prvek umístí v opačném pořadí, tj. zprava doleva.

Důležitá nuance vlastnosti grid-column-end spočívá v tom, že číslo zadaného sloupce není zahrnuto do konečné pozice prvku - pokud zadáme číslo 3, prvek zabere pouze první a druhý sloupec.

Syntaxe

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

Příklad

Nastavme prvkům v gridu koncové pozice:

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

Результат:

Příklad

A nyní pomocí vlastnosti grid-column-start udělejme to, aby první, druhý a třetí prvek byly umístěny v první řadě. A čtvrtý prvek zabral celou druhou řadu:

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

Результат:

Příklad

Při překrytí sloupců, které zabírají sousední prvky, se každý následující prvek posune o řadu níže. Využijme této vlastnosti a udělejme to, aby se první prvek umístil v první řadě, druhý - ve druhé, a třetí a čtvrtý - ve třetí řadě:

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

Результат:

Příklad

A nyní zadejme ve 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;
}

Результат:

Viz také