grid-column-end Özelliği

grid-column-end özelliği, bir grid öğesinin belirli bir sütuna kadar olan bitiş konumunu belirler. Özelliğin değeri pozitif veya negatif bir sayı olabilir. Pozitif bir sayı belirlerseniz, öğenin bitiş konumu soldan sağa doğru sayılır. Negatif bir sayı belirtildiğinde, öğe ters sırada konumlanır, yani sağdan sola doğru.

grid-column-end özelliğinin önemli bir nüansı, belirtilen sütun numarasının öğenin bitiş konumuna dahil edilmemesidir - 3 sayısını belirlersek, öğe yalnızca birinci ve ikinci sütunları kaplayacaktır.

Sözdizimi

cssseçici {
  grid-column-end: pozitif veya negatif sayı;
}

Örnek

Grid içindeki öğelere bitiş konumları verelim:

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

Результат:

Örnek

Şimdi de grid-column-start özelliğini kullanarak birinci, ikinci ve üçüncü öğelerin ilk satırda yer almasını sağlayalım. Dördüncü öğenin ise tüm ikinci satırı kaplamasını sağlayalım:

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

Результат:

Örnek

Komşu öğelerin kapladığı sütunların üst üste gelmesi durumunda, sonraki her öğe bir satır aşağı kayar. Bu özelliği kullanarak birinci öğenin ilk satırda, ikinci öğenin ikinci satırda, üçüncü ve dördüncü öğelerin ise üçüncü satırda yer almasını sağlayalım:

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

Результат:

Örnek

Şimdi de grid-column-end özelliğinde negatif sayılar belirtelim:

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

Результат:

Ayrıca Bakınız