Sifat grid-column-start

Sifat grid-column-start menetapkan kedudukan permulaan unsur dalam grid atau rangkaian mengikut lajur. Nilai sifat boleh menjadi nombor positif atau negatif. Jika kita menetapkan nombor positif, maka kedudukan permulaan unsur dikira dari kiri ke kanan. Apabila nombor negatif dinyatakan, unsur akan disusun dalam urutan terbalik, iaitu dari kanan ke kiri.

Sintaks

cssselector {
  grid-column-start: nombor positif atau negatif;
}

Contoh

Mari tetapkan kedudukan permulaan untuk unsur-unsur dalam grid:

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

Результат:

Contoh

Sekarang mari kita nyatakan nombor negatif dalam sifat grid-column-start:

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

Результат:

Contoh

Sekarang dengan menggunakan sifat grid-column-end, kita akan menjadikan unsur pertama, kedua dan ketiga terletak di baris pertama. Manakala unsur keempat akan menduduki seluruh baris kedua:

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

Результат:

Contoh

Apabila lajur yang diduduki oleh unsur bersebelahan bertindih, setiap unsur seterusnya akan beralih ke baris di bawah. Mari kita gunakan kemungkinan ini untuk menjadikan unsur pertama terletak di baris pertama, unsur kedua - di baris kedua, manakala unsur ketiga dan keempat - menduduki baris ketiga:

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

Результат:

Lihat juga