CSS - justify-items Sifat

Hai, para pemaju web yang sedang belajar! Hari ini, kita akan melihat dunia yang menarik CSS dan menjelajahi sifat yang bisa membuat tata letak anda terlihat seperti yang diciptakan oleh seorang ahli berpengalaman. Saya bicara tentang sifat justify-items. Percayalah, pada akhir panduan ini, Anda akan menjusikan item seperti seorang hakim Mahkamah Agung! ?

Apa itu justify-items?

Sebelum kita masuk ke detail, mari pahami apa yang justify-items lakukan. Bayangkan Anda memiliki wadah grid yang penuh dengan item grid yang lucu. Sifat justify-items adalah seperti tongkat ajaib yang memungkinkan Anda mengontrol bagaimana item ini diatur sepanjang sumbuinline (biasanya horizontal) dalam area grid mereka.

Sintaks

Sintaks dasar untuk justify-items cukup mudah:

.container {
justify-items: value;
}

Di mana value dapat menjadi salah satu dari banyak opsi yang akan kita jelajahi sebentar lagi. Tetapi pertama-tama, mari kita buat grid sederhana untuk main:

<div class="grid-container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>

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

.item {
background-color: #3498db;
color: white;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
}

Ini menciptakan grid 2x2 dengan empat item. Sekarang, mari kita jelajahi nilai yang berbeda yang bisa kita gunakan dengan justify-items!

Nilai yang Mungkin

Berikut adalah tabel dari semua nilai yang mungkin untuk justify-items:

Nilai	Deskripsi
normal	Nilai default, biasanya bertindak seperti stretch
stretch	Menyempurnakan item untuk mengisi area grid
start	Mengatur item ke awal area grid
end	Mengatur item ke akhir area grid
center	Mengatur item di tengah area grid
flex-start	Mengatur item ke awal (untuk wadah flex)
flex-end	Mengatur item ke akhir (untuk wadah flex)
self-start	Mengatur item ke sisi awal mereka sendiri
self-end	Mengatur item ke sisi akhir mereka sendiri
left	Mengatur item ke kiri
right	Mengatur item ke kanan
baseline	Mengatur item sepanjang garis dasar mereka
last baseline	Mengatur item sepanjang garis dasar terakhir mereka
safe center	Mengatur item secara aman (mencegah kehilangan data)
legacy right	Penyusunan ke kanan (dukungan legacy)

Sekarang, mari kita rinci ini dengan contoh!

CSS justify-items - nilai normal

.grid-container {
justify-items: normal;
}

Nilai normal adalah default. Dalam kebanyakan kasus, ia berperilaku seperti stretch. Itu seperti mengatakan ke item grid anda, "Jadilah dirimu sendiri!"

CSS justify-items - nilai stretch

.grid-container {
justify-items: stretch;
}

Dengan stretch, item anda akan tersebar untuk mengisi keseluruhan lebar area grid mereka. Itu seperti mengatakan ke item anda untuk "ambil nafas dalam dan perluas!"

CSS justify-items - nilai start

.grid-container {
justify-items: start;
}

Nilai start mengatur item ke awal area grid. Pahami ini seperti mengatur item di garis awal sebuah lomba.

CSS justify-items - nilai end

.grid-container {
justify-items: end;
}

Sebaliknya, end mendorong item ke akhir area grid. Itu seperti item anda mencoba menyentuh garis finish!

CSS justify-items - nilai center

.grid-container {
justify-items: center;
}

center melakukan hal yang Anda harapkan - mengatur item di tengah area grid. Itu sempurna untuk membuat tata letak yang seimbang, seperti tata letak zazen.

CSS justify-items - nilai flex-start dan flex-end

.grid-container {
justify-items: flex-start;
}

.grid-container {
justify-items: flex-end;
}

Nilai ini mirip dengan start dan end, tetapi mereka khusus untuk wadah flex. Mereka seperti sepupu yang keren dari start dan end yang hanya muncul di pesta flex.

CSS justify-items - nilai self-start dan self-end

.grid-container {
justify-items: self-start;
}

.grid-container {
justify-items: self-end;
}

Nilai ini mengatur item ke sisi awal atau akhir mereka sendiri, yang bisa berbeda dari awal atau akhir wadah dalam beberapa mode penulisan. Itu seperti membiarkan setiap item memutuskan sisi kasurnya sendiri!

CSS justify-items - nilai left dan right

.grid-container {
justify-items: left;
}

.grid-container {
justify-items: right;
}

Nilai ini melakukan apa yang mereka katakan di bungkusan - mengatur item ke kiri atau ke kanan. Sederhana dan jelas, seperti一杯baik kopi pagi!

CSS justify-items - nilai baseline dan last baseline

.grid-container {
justify-items: baseline;
}

.grid-container {
justify-items: last baseline;
}

Nilai ini mengatur item sepanjang garis dasar mereka atau garis dasar terakhir mereka. Itu sangat berguna ketika Anda memiliki teks berukuran berbeda dan ingin mereka berbaris dengan rapi.

CSS justify-items - nilai safe center

.grid-container {
justify-items: safe center;
}

Nilai ini mengatur item di tengah, tetapi memastikan bahwa tidak ada kehilangan data. Itu seperti memiliki jaring keselamatan untuk item yang diperpusat Anda!

CSS justify-items - nilai legacy right

.grid-container {
justify-items: legacy right;
}

Nilai ini digunakan untuk kompatibilitas belakang. Itu seperti menjaga telepon genggam lama - Anda mungkin tidak akan menggunakannya, tetapi itu ada jika Anda membutuhkannya!

Dan itu adalah keseluruhan, teman-teman! Anda baru saja mengambil sebuah perjalanan singkat melalui sifat justify-items. Ingat, kunci untuk menguasai CSS adalah praktik. Jadi, maju aja, coba nilai ini, dan buat beberapa tata letak yang diatur dengan baik. Sebelum Anda tahu, Anda akan menjusikan item dalam mimpian Anda!

Happy coding, dan semoga grid Anda selalu diatur dengan sempurna! ??‍??‍?

Credits: Image by storyset