CSS - Properti justify-self: Menungkap Keterampilan Penjajaran Item Grid

Hai teman-teman, para ahli CSS masa depan! Hari ini, kita akan mendalam ke dunia magis properti justify-self. Sebagai guru komputer di lingkungan tetangga Anda, saya di sini untuk memandu Anda dalam perjalanan yang menarik ini. Jadi, ambil keyboard virtual Anda (majik), dan mari kita buat beberapa mantra CSS!

Apa itu justify-self?

Sebelum kita masuk ke detailnya, mari kita pahami apa sebenarnya justify-self lakukan. Bayangkan Anda memiliki sebuah wadah grid, dan didalamnya, Anda memiliki berbagai item grid. Properti justify-self memungkinkan Anda untuk menjajaran item grid individual ini sepanjang sumbu inline (horisontal). Itu seperti memberikan setiap item pengurus pribadinya untuk menentukan di mana item itu harus berdiri di sorotan!

Sintaks dan Nilai yang Mungkin

Sintaks dasar untuk justify-self adalah mudah:

.grid-item {
justify-self: value;
}

Sekarang, mari kita lihat semua nilai yang mungkin dapat digunakan:

Nilai	Deskripsi
auto	Browser menentukan penjajaran
normal	mirip dengan auto
stretch	Mengeluarkan item untuk mengisi sel
start	Menjajaran ke ujung awal sel
end	Menjajaran ke ujung akhir sel
center	Menengahkan item di sel
flex-start	Menjajaran ke ujung awal (untuk wadah flex)
flex-end	Menjajaran ke ujung akhir (untuk wadah flex)
self-start	Menjajaran ke ujung awal berdasarkan arah item
self-end	Menjajaran ke ujung akhir berdasarkan arah item
left	Menjajaran ke kiri sel
right	Menjajaran ke kanan sel
baseline	Menjajaran ke garis dasar sel
last baseline	Menjajaran ke garis dasar terakhir sel

Wow, itu daftar yang cukup panjang! Jangan khawatir jika tampak mengacu; kita akan membongkar ini dengan contoh.

Terapkan Pada

Sebelum kita masuk ke contoh, penting untukcatat bahwa justify-self diterapkan pada:

• Item grid
• Element yang ditempatkan secara mutlak dengan wadahnya adalah wadah grid

Sekarang, mari kita jelajahi nilai ini dengan beberapa contoh praktis!

CSS justify-self - Nilai auto

.grid-item {
justify-self: auto;
}

Dengan auto, browser mengambil kontrol. Itu seperti mengatakan ke item Anda, "Pergi ke tempat yang Anda pikir terbaik!" Biasanya, ini berperilaku mirip dengan stretch.

CSS justify-self - Nilai normal

.grid-item {
justify-self: normal;
}

normal adalah nilai default dan biasanya berperilaku seperti stretch untuk item grid. Itu seperti "Saya merasa beruntung" dari nilai justify-self!

CSS justify-self - Nilai stretch

.grid-container {
display: grid;
grid-template-columns: 100px 100px 100px;
}

.grid-item {
justify-self: stretch;
background-color: lightblue;
}

Nilai ini mengeluarkan item untuk mengisi keseluruhan lebar selnya. Itu seperti mengatakan ke item Anda, "Besar atau pulang!"

CSS justify-self - Nilai start

.grid-item {
justify-self: start;
}

Ini menjajaran item ke ujung awal selnya. Bayangkan item ini mencium dinding kiri kamarannya.

CSS justify-self - Nilai end

.grid-item {
justify-self: end;
}

Lawan dari start, ini mendorong item ke ujung akhir selnya. Itu seperti item ini bermain hide-and-seek di belakang dinding kanan.

CSS justify-self - Nilai center

.grid-item {
justify-self: center;
}

Ini menempatkan item di tengah sel. sempurna untuk item yang mencintai menjadi pusat perhatian!

CSS justify-self - Nilai flex-start dan flex-end

.grid-item {
justify-self: flex-start; /* atau flex-end */
}

Nilai ini mirip dengan start dan end tapi biasanya digunakan dalam konteks flex. Dalam tata letak grid, mereka biasanya berperilaku sama seperti start dan end.

CSS justify-self - Nilai self-start dan self-end

.grid-item {
justify-self: self-start; /* atau self-end */
}

Ini menjajaran item berdasarkan arahnya sendiri. Jika direction item adalah ltr (kiri-ke-kanan), self-start akan sama seperti start. Itu seperti item ini memiliki kompas yang selalu menunjuk ke utara pribadinya!

CSS justify-self - Nilai left dan right

.grid-item {
justify-self: left; /* atau right */
}

Nilai ini menjajaran item ke ujung kiri atau kanan sel, tanpa menghiraukan mode tulisan atau arah. Mereka seperti sepupu keras kepala dari start dan end yang selalu tahu di mana mereka ingin berada.

CSS justify-self - Nilai baseline dan last baseline

.grid-item {
justify-self: baseline; /* atau last baseline */
}

Ini menjajaran item ke garis dasar sel. Ini sangat berguna saat Anda memiliki konten teks dan ingin menjajarinya sempurna dengan teks di sel adjacent.

Menggabungkan Semua

Sekarang kita telah menjelajahi semua nilai ini, mari kita buat contoh menarik yang menampilkan beberapa nilai justify-self dalam aksi:

<div class="grid-container">
<div class="grid-item start">Start</div>
<div class="grid-item end">End</div>
<div class="grid-item center">Center</div>
<div class="grid-item stretch">Stretch</div>
</div>

.grid-container {
display: grid;
grid-template-columns: repeat(4, 100px);
gap: 10px;
background-color: #f0f0f0;
padding: 20px;
}

.grid-item {
background-color: #3498db;
color: white;
padding: 20px;
text-align: center;
}

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

Dalam contoh ini, kita memiliki wadah grid dengan empat item, masing-masing menunjukkan nilai justify-self yang berbeda. Itu seperti fashion show kecil CSS, dengan setiap item memperagakan gaya uniknya!

Dan itu dia, teman-teman saya! Kita telah berpergian melalui negeri justify-self, menjelajahi berbagai aspek dan kemungkinannya. Ingat, CSS tentang eksperimen dan kreativitas. Jangan takut untuk mencampur dan mencoba nilai ini untuk membuat tata letak yang unik bagi Anda.

Saat kita mengakhiri pelajaran ini, saya teringat kata bijak seorang ahli CSS tua yang pernah mengatakan, "Dengan kekuatan besar datang tanggung jawab besar... untuk menciptakan tata letak yang menakjubkan!" Jadi, pergilah, eksperimenkan, dan semoga grid Anda selalu rapi!

Credits: Image by storyset