Proprietatea grid-column-end

Proprietatea grid-column-end definește poziția finală a elementului în grid sau grilă până la o anumită coloană. Valoarea proprietății poate fi un număr pozitiv sau negativ. Dacă setăm un număr pozitiv, atunci poziția finală a elementului se numără de la stânga la dreapta. Când se specifică un număr negativ, elementul va fi poziționat în ordine inversă, adică de la dreapta la stânga.

Nuanța importantă a proprietății grid-column-end constă în faptul că numărul coloanei specificate nu este inclus în poziția finală a elementului - dacă setăm numărul 3, elementul va ocupa doar prima și a doua coloană.

Sintaxă

cssselector {
  grid-column-end: număr pozitiv sau negativ;
}

Exemplu

Să setăm elementelor din grid poziții finale:

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

Результат:

Exemplu

Acum, folosind proprietatea grid-column-start să facem astfel încât primul, al doilea și al treilea element să se poziționeze pe primul rând. Iar al patrulea element să ocupe întregul al doilea rând:

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

Результат:

Exemplu

La suprapunerea coloanelor ocupate de elementele învecinate, fiecare element ulterior se deplasează pe un rând mai jos. Să folosim această particularitate pentru a face astfel încât primul element să se poziționeze pe primul rând, al doilea - pe al doilea, iar al treilea și al patrulea - pe al treilea rând:

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

Результат:

Exemplu

Acum să specificăm în proprietatea grid-column-end numere negative:

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

Результат:

Vedeți și