Item Kotak CSS

Melanjutkan rangkaian artikel tentang belajar grid CSS, pada artikel ke-3 ini kita akan belajar tentang elemen turunan dari Container grid – Item grid.

Isi dari seri artikel CSS Grid:

• Ikhtisar Kotak CSS
• Kotak CSS: Wadah
• Kotak CSS: Item
• CSS Grid: beberapa fungsi dan contoh praktis

Sebelum masuk ke detail grid item, kita akan mengulas secara singkat pengertian grid item.

Apa itu item Grid?

Elemen ini adalah elemen anak di dalam wadah. Pada contoh di bawah ini, elemen kelas item adalah item grid itu sendiri, dan sub-item ini bukan.

<div class="container">
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Properti item kisi

grid-column-start / grid-column-end / grid-row-start / grid-row-end

Properti ini menentukan koordinat item kisi berdasarkan posisi kolom dan baris garis kisi.

Nilai:

• : nomor urut atau nama garis grid.
• rentang : jumlah trek petak yang dikandung item ini.
• rentang : item berisi trek kisi masuk yang berdekatan dengan garis kisi .
• mobil: Mengurutkan secara otomatis.

.item {
  grid-column-start: <number> | <name> | span <number> | span <name> | auto;
  grid-column-end: <number> | <name> | span <number> | span <name> | auto;
  grid-row-start: <number> | <name> | span <number> | span <name> | auto;
  grid-row-end: <number> | <name> | span <number> | span <name> | auto;
}

Contoh di bawah ini, item-a akan dimulai dari kolom ke-2, dilanjutkan ke kolom bernama “lima”. Mulai dari baris bernama “row1-start”, berakhir di baris nomor 3.

.item-a {
  grid-column-start: 2;
  grid-column-end: five;
  grid-row-start: row1-start;
  grid-row-end: 3;
}

Melanjutkan contoh berikut, item-b akan dimulai dari kolom pertama, diperpanjang hingga kolom nama “col4-start“; diperpanjang dari baris ke-2 menjadi 2 baris lagi.

.item-b {
  grid-column-start: 1;
  grid-column-end: span col4-start;
  grid-row-start: 2;
  grid-row-end: span 2;
}

Catatan: jika Anda tidak mendeklarasikan atribut grid-column-end Dangrid-row-end maka panjang setiap sel default ke 1 trek kisi.

kolom-kisi / baris-kisi

Ini adalah atribut singkat dari grid-column-start / grid-column-end Dan grid-row-start / grid-row-end.

Nilai:

• / : sintaks setara dengan grid-(column/row)-(start/end). Menggunakan / membagi awal dan akhir.

.item {
  grid-column: <start-line> / <end-line> | <start-line> / span <value>;
  grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Misalnya , item-c akan dimulai pada kolom ke-3, menempati 2 sel trek kisi; mulai dari baris “baris ketiga”, berakhir di baris ke-4:

.item-c {
  grid-column: 3 / span 2;
  grid-row: third-line / 4;
}

Demikian pula, jika Anda tidak mendeklarasikan nilai akhir, item default akan memiliki panjang 1 jalur petak.

area grid

Digunakan untuk mengidentifikasi item dengan nama yang dinyatakan dalam atribut grid-template-areas. Selain itu, jika kita tidak menggunakan nama, kita juga dapat mendeklarasikan lokasi pada atribut ini.

Nilai:

• : Nama yang Anda gunakan.
• / / / : Nilai posisi yang sesuai.

.item {
  grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>;
}

Pada contoh di bawah, item-e menggunakan area bernama “tajuk“, item-d menyatakan posisi dari nomor baris 1, kolom”col4-start“ke baris”baris terakhir” dan kolom nomor 6.

.item-e {
  grid-area: header;
}
.item-d {
  grid-area: 1 / col4-start / last-line / 6;
}

membenarkan diri

Mirip dengan properti justify-items dari container, scope at item.

.item {
  justify-self: start | end | center | stretch;
}

Contoh ilustrasi di bawah ini:

.item {
  justify-self: start | end | center | stretch;
}

menyelaraskan diri

Atribut ini serupa justify-self tetapi diterapkan secara vertikal. Untuk informasi lebih lanjut, lihat properti container: align-items.

menempatkan diri

Kombinasi Atribut justify-self Dan align-self. Mirip dengan properti place-content, tetapi cakupannya berlaku untuk item.

---

Setelah menyelesaikan bagian ini, pada dasarnya kita memiliki pengetahuan penuh tentang CSS Grid. Silakan lihat beberapa fungsi dan contoh praktis saat mendesain di bagian selanjutnya.