Grid-column-start xassəsi

grid-column-start xassəsi griddə və ya şəbəkədə elementin sutunlar uzrə baslangic movqeyini təyin edir. Xassənin qiyməti müsbət və ya mənfi ədəd ola bilər. Müsbət ədəd təyin etdikdə, elementin baslangic movqeyi soldan sağa hesablanır. Mənfi ədəd göstərildikdə element əks qaydada yerləşəcək, yəni sağdan sola.

Sintaksis

cssselektor {
  grid-column-start: müsbət və ya mənfi ədəd;
}

Nümunə

Gəlin griddəki elementlərə baslangic movqeləri təyin edək:

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

Результат:

Nümunə

İndi gəlin grid-column-start xassəsində mənfi ədədlər göstərək:

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

Результат:

Nümunə

İndi isə grid-column-end xassəsindən istifadə edərək birinci, ikinci və üçüncü elementlərin birinci sırada yerləşməsini təmin edək. Dördüncü element isə bütün ikinci sıranı tutsun:

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

Результат:

Nümunə

Qonşu elementlərin tutduğu sutunların üst-üstə düşməsi zamanı hər bir sonrakı element bir sıra aşağı sürüşür. Gəlin bu imkandan istifadə edərək birinci elementin birinci sırada, ikinci - ikinci sırada, üçüncü və dördüncünün isə üçüncü sıranı tutmasını təmin edək:

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

Результат:

Həmçinin bax