Grid-column-start касиети

grid-column-start касиети элементтин грид же тордо колонкалар боюнча баштапкы ордун белгилейт. Касиеттин мааниси оң же терс сан болушу мүмкүн. Эгер оң сан белгилесек, элементтин баштапкы орду солдон оңго карай эсептелет. Терс сан көрсөтүлгөндө элемент тескери тартипте жайгашат, башкача айтканда оңдон солго карай.

Синтаксис

cssселектор {
  grid-column-start: оң же терс сан;
}

Мисал

Келгиле, гриддеги элементтерге баштапкы ордун белгилейли:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</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;
}
#elem2 {
  grid-column-start: 2;
}
#elem3 {
  grid-column-start: 3;
}

Результат:

Мисал

Эми grid-column-start касиетинде терс сандарды көрсөтөлү:

html<div id="parent">
  <div id="elem1">1</div>
  <div id="elem2">2</div>
  <div id="elem3">3</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;
}
#elem2 {
  grid-column-start: -2;
}
#elem3 {
  grid-column-start: -3;
}

Результат:

Мисал

Эми grid-column-end касиетинин жардамы менен биринчи, экинчи жана үчүнчү элементтер биринчи катарда жайгашсын. Төртүнчү элемент бүтүн экинчи катарды ээлесин:

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

Результат:

Ошондой эле караңыз