grid-column-start xususiyati

grid-column-start xususiyati grid yoki setkadagi elementning ustunlar bo‘yicha boshlang‘ich joylashuvini belgilaydi. Xususiyatning qiymati ijobiy yoki salbiy son bo‘lishi mumkin. Agar ijobiy son belgilasak, elementning boshlang‘ich joylashuvi chapdan o‘ngga hisoblanadi. Salbiy son ko‘rsatilganda element teskari tartibda joylashadi, ya'ni o‘ngdan chapga.

Sintaksis

cssselektor {
  grid-column-start: ijobiy yoki salbiy son;
}

Misol

Keling, griddagi elementlarga boshlang‘ich joylashuvlarni belgilaymiz:

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

Результат:

Misol

Endi grid-column-start xususiyatida salbiy sonlarni ko‘rsatamiz:

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

Результат:

Misol

Endi grid-column-end xususiyati yordamida birinchi, ikkinchi va uchinchi elementlar birinchi qatorda joylashishini ta'minlaymiz. To‘rtinchi element esa butun ikkinchi qatorni egallasin:

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

Результат:

Misol

Qo‘shni elementlar egallagan ustunlarning ustma-ust tushishi paytida, har bir keyingi element pastroq qatorda siljiydi. Keling, bu imkoniyatni hisobga olgan holda, birinchi element birinchi qatorda, ikkinchi - ikkinchida, uchinchi va to‘rtinchi esa uchinchi qatorda joylashsin:

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

Результат:

Shuningdek qarang