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

Свойство grid-column-end гридда ёки сеткадаги элементнинг маълум бир устунгача бўлган якуний позициясини белгилайди. Свойствонинг қиймати mусбат ёки манфий сон бўлиши мумкин. Агар мусбат сон белгиласак, элементнинг якуний позицияси чапдан ўнгга караб ҳисобланади. Манфий сон кўрсатилганда элемент тескари тартибда жойлашади, яъни ўнгдан чапга караб.

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

Результат:

Мисол

Энди esa 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;
}

Результат:

Ҳам қаранг