Grid-column-end xassəsi

grid-column-end xassəsi grid və ya şəbəkədə elementin müəyyən bir sütuna qədər bitmə mövqeyini təyin edir. Xassənin qiyməti müsbət və ya mənfi ədəd ola bilər. Əgər müsbət ədəd təyin etsək, onda elementin bitmə mövqeyi soldan sağa sayılır. Mənfi ədəd göstərildikdə element əks qaydada yerləşəcək, yəni sağdan sola.

grid-column-end xassəsinin mühüm nüansı ondadır ki, göstərilən sütunun nömrəsi bitmə mövqeyinə daxil edilmir - əgər biz 3 ədədini təyin etsək, onda element yalnız birinci və ikinci sütunları tutacaq.

Sintaksis

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

Nümunə

Gəlin grid daxilindəki elementlərə bitmə mövqelə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;
  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;
}

Результат:

Nümunə

İndi isə grid-column-start 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ər tərəfindən tutulan sütunların üst-üstə düşməsi zamanı hər bir sonrakı element bir sıra aşağı sürüşür. Gəlin bu xüsusiyyətdən istifadə edərək birinci elementin birinci sırada, ikinci - ikincidə, üçüncü və dördüncünün isə üçüncü sırada yerləşməsini 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;
}

Результат:

Nümunə

İndi gəlin grid-column-end 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;
  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;
}

Результат:

Həmçinin bax