Својство grid-column-end

Својство grid-column-end задаје крајњу позицију елемента у гриду или мрежи до одређеног ступца. Вредност својства може бити позитиван или негативан број. Ако задамо позитиван број, онда се крајња позиција елемента рачуна слева надесно. При навођењу негативног броја елемент ће се позиционирати обрнутим редоследом, тј. с десна на лево.

Важан детаљ својства grid-column-end јесте да се број наведеног ступца не укључује у крајњу позицију елемента - ако задамо број 3, елемент ће заузимати само први и други ступац.

Синтакса

cssселектор {
  grid-column-end: позитиван или негативан број;
}

Пример

Задајмо елементима у гриду крајње позиције:

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

Результат:

Пример

А сада помоћу својства grid-column-start направимо да се први, други и трећи елемент позиционирају у првом реду. А четврти елемент нека заузима цео други ред:

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

Результат:

Пример

При преклапању ступова, које заузимају суседни елементи, сваки следећи елемент се помера за ред ниже. Искористимо ову карактеристику да направимо да се први елемент позиционира у првом реду, други - у другом, а трећи и четврти - у трећем реду:

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

Результат:

Пример

А сада у својству grid-column-end наведемо негативне бројеве:

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

Результат:

Погледајте такође