grid-column-start Özelliği

grid-column-start özelliği, bir elemanın grid veya ızgara içindeki sütunlardaki başlangıç konumunu belirler. Özelliğin değeri pozitif veya negatif bir sayı olabilir. Pozitif bir sayı belirlersek, elemanın başlangıç konumu soldan sağa doğru sayılır. Negatif bir sayı belirtildiğinde eleman ters sırada konumlanır, yani sağdan sola doğru.

Sözdizimi

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

Örnek

Grid içindeki elemanlara başlangıç konumları belirleyelim:

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

Результат:

Örnek

Şimdi grid-column-start özelliğine negatif sayılar girelim:

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

Результат:

Örnek

Şimdi grid-column-end özelliğini kullanarak birinci, ikinci ve üçüncü elemanların ilk satırda konumlanmasını sağlayalım. Dördüncü eleman ise tüm ikinci satırı kaplasın:

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 elemanların kapladığı sütunların üst üste gelmesi durumunda, sonraki her eleman bir satır aşağı kayar. Bu özelliği dikkate alarak, birinci elemanın ilk satırda, ikinci elemanın - ikinci satırda, üçüncü ve dördüncü elemanların ise - üçüncü 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: 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;
}

Результат:

Ayrıca Bakınız