Īpašība grid-column-end

Īpašība grid-column-end nosaka elementa beigu pozīciju gridā vai režģī līdz noteiktai kolonnai. Īpašības vērtība var būt pozitīvs vai negatīvs skaitlis. Ja mēs norādām pozitīvu skaitli, tad elementa beigu pozīcija tiek skaitīta no kreisās puses uz labo. Norādot negatīvu skaitli, elements tiks novietots apgrieztā secībā, t.i., no labās puses uz kreiso.

Svarīga īpašības grid-column-end nianse ir tāda, ka norādītās kolonnas numurs netiek iekļauts elementa beigu pozīcijā - ja mēs norādām skaitli 3, tad elements aizņems tikai pirmo un otro kolonnu.

Sintakse

cssselektors {
  grid-column-end: pozitīvs vai negatīvs skaitlis;
}

Piemērs

Piešķirsim elementiem gridā beigu pozīcijas:

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

Результат:

Piemērs

Un tagad, izmantojot īpašību grid-column-start, panāksim, lai pirmais, otrais un trešais elements atrastos pirmajā rindā. Un ceturtais elements aizņemtu visu otro rindu:

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

Результат:

Piemērs

Kad blakus esošo elementu aizņemtās kolonnas pārklājas, katrs nākamais elements tiek pārvietots uz rindu zemāk. Izmantosim šo īpatnību, lai pirmais elements atrastos pirmajā rindā, otrais - otrajā, bet trešais un ceturtais - trešajā rindā:

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

Результат:

Piemērs

Un tagad īpašībā grid-column-end norādīsim negatīvus skaitļus:

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

Результат:

Skatiet arī