Właściwość grid-column-end

Właściwość grid-column-end ustawia końcową pozycję elementu w gridzie lub siatce do określonej kolumny. Wartością właściwości może być liczba dodatnia lub ujemna. Jeśli podamy liczbę dodatnią, to końcowa pozycja elementu jest liczona od lewej do prawej. Przy podaniu liczby ujemnej element będzie rozmieszczony w odwrotnej kolejności, czyli od prawej do lewej.

Wažny niuans właściwości grid-column-end polega na tym, że numer określonej kolumny nie jest wliczany do końcowej pozycji elementu - jeśli podamy liczbę 3, to element zajmie tylko pierwszą i drugą kolumnę.

Składnia

cssselektor {
  grid-column-end: liczba dodatnia lub ujemna;
}

Przykład

Ustawmy elementom w gridzie końcowe pozycje:

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

Результат:

Przykład

A teraz za pomocą właściwości grid-column-start sprawmy, aby pierwszy, drugi i trzeci element znajdowały się w pierwszym rzędzie. A czwarty element zajmował cały drugi rząd:

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

Результат:

Przykład

Przy nakładaniu się kolumn, zajmowanych przez sąsiednie elementy, każdy kolejny element przesuwa się o rząd niżej. Wykorzystajmy tę cechę aby sprawić, żeby pierwszy element znajdował się w pierwszym rzędzie, drugi - w drugim, a trzeci i czwarty - w trzecim rzędzie:

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

Результат:

Przykład

A teraz we właściwości grid-column-end podajmy liczby ujemne:

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

Результат:

Zobacz też