CSS - justify-self Sifat: Menjayakan Penjajaran Item Grid

Hai sana, para ahli CSS masa depan! Hari ini, kita akan melihat dunia yang magical sifat justify-self. Sebagai guru komputer tetangga yang ramah, saya di sini untuk memandu anda dalam perjalanan yang menarik ini. Jadi, pegang keyboard anda (tongkat maya), dan mari kita buat some CSS spells!

Apa itu justify-self?

Sebelum kita masuk ke hal yang mendalam, mari kita memahami apa yang sebenarnya justify-self lakukan. Bayangkan anda memiliki wadah grid, dan di dalamnya, anda memiliki berbagai item grid. Sifat justify-self membolehkan anda menyusun item grid individual ini sepanjang axis inline (mengufuk). Itu seperti memberikan setiap item pengurus pribadi untuk menentukan di mana dia harus berdiri di bawah lampu sorot!

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 kita gunakan:

Nilai	Keterangan
auto	Pelayar menentukan perjajaran
normal	Serupa dengan auto
stretch	Memanjangkan item untuk mengisi sel
start	Menyusun ke permulaan sel
end	Menyusun ke akhir sel
center	Menyusun item di tengah sel
flex-start	Menyusun ke permulaan ( untuk wadah flex )
flex-end	Menyusun ke akhir ( untuk wadah flex )
self-start	Menyusun ke permulaan berdasarkan arah item
self-end	Menyusun ke akhir berdasarkan arah item
left	Menyusun ke kiri sel
right	Menyusun ke kanan sel
baseline	Menyusun ke garis dasar sel
last baseline	Menyusun ke garis dasar terakhir sel

Wah, itu adalah daftar yang cukup panjang! Jangan khawatir jika itu terlihat menakutkan; kita akan merobahnya dengan contoh.

Terpakai Pada

Sebelum kita masuk ke contoh, itu penting untukcatat bahwa justify-self terpakai kepada:

• Item grid
• Elemen yang ditempatkan secara mutlak yang wadahnya adalah grid

Sekarang, mari kita jelajahi nilai setiap nilai dengan beberapa contoh praktik!

CSS justify-self - auto Nilai

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

Dengan auto, pelayar mengambil kendali. Itu seperti mengatakan kepada item anda, "Pergi ke mana yang anda pikir terbaik!" Biasanya, perilakunya mirip dengan stretch.

CSS justify-self - normal Nilai

.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 - stretch Nilai

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

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

Nilai ini memanjangkan item untuk mengisi keseluruhan lebar selnya. Itu seperti mengatakan kepada item anda, "Besar atau pulang!"

CSS justify-self - start Nilai

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

Ini menyusun item ke permulaan tepi selnya. Picturing itu seperti item mengepalkan dinding kiri kamarannya.

CSS justify-self - end Nilai

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

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

CSS justify-self - center Nilai

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

Ini menempatkan item di tengah selnya. Sempurna untuk item yang menyukai menjadi pusat perhatian!

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

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

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

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

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

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

CSS justify-self - left dan right Nilai

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

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

CSS justify-self - baseline dan last baseline Nilai

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

Ini menyusun item dengan garis dasar sel. Itu sangat berguna ketika anda memiliki konten teks dan ingin menyusunnya secara sempurna dengan teks di sel bersebelahan.

Menyusun Semua Bekerja bersama

Sekarang kita telah menjelajahi semua nilai ini, mari kita buat contoh yang menyenangkan yang menunjukkan beberapa justify-self nilai 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, setiap item menunjukkan nilai justify-self yang berbeda. Itu seperti fashion show kecil CSS, dengan setiap item memperagakan gayanya sendiri!

Dan itu adalah, murid-murid tercinta! Kita telah menjelajahi 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.

Seperti yang kitaakhiri pelajaran ini, saya teringat kata bijak seorang ahli CSS tua yang pernah mengatakan, "Dengan kekuatan yang besar datang tanggung jawab... untuk menciptakan tata letak yang menakjubkan!" Jadi, pergilah, eksperimen, dan may your grids always be perfectly aligned!

Credits: Image by storyset