CSS - Properti justify-items

Hai, para pengembang web yang sedang belajar! Hari ini, kita akan masuk ke dunia yang menakjubkan CSS dan menjelajahi properti yang bisa membuat tata letak Anda terlihat seperti yang diciptakan oleh seorang ahli berpengalaman. Saya bicara tentang properti justify-items. Percayalah, pada akhir panduan ini, Anda akan menjusikan item seperti seorang hakim tinggi! ?

Apa itu justify-items?

Sebelum kita masuk ke detilnya, mari pahami apa yang dilakukan justify-items. Bayangkan Anda memiliki wadah grid yang penuh dengan item grid yang lucu. Properti justify-items seperti tongkat ajaib yang memungkinkan Anda mengontrol bagaimana item ini diatur sepanjang sumbu inline ( biasanya horisontal ) di dalam area grid mereka.

Sintaks

Sintaks dasar untuk justify-items cukup mudah:

.container {
justify-items: value;
}

Di mana value bisa adalah salah satu dari banyak opsi yang akan kita jelajahi segera. 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 membuat 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 berperilaku seperti stretch
stretch	Mengeluarkan 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 di tengah secara aman (mencegah kehilangan data)
legacy right	Penyelarasan kanan (dukungan legacy)

Sekarang, mari kita rincikan ini dengan contoh!

CSS justify-items - nilai normal

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

Nilai normal adalah default. Dalam kebanyakan kasus, itu berperilaku seperti stretch. Itu seperti mengatakan kepada 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 kepada item Anda untuk "Ambil nafas dalam dan luangkan!"

CSS justify-items - nilai start

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

Nilai start mengatur item Anda ke awal area grid. Pahamiannya seperti mengatur item di garis awal sebuah lomba.

CSS justify-items - nilai end

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

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

CSS justify-items - nilai center

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

center melakukan apa yang Anda harapkan - mengatur item di tengah area grid. Itu sempurna untuk membuat tata letak yang seimbang dan tenang.

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 khusus untuk wadah flex. Itu seperti sepupu keren 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 di beberapa mode penulisan. Itu seperti membiarkan setiap item memutuskan sisi tempat tidurnya!

CSS justify-items - nilai left dan right

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

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

Nilai ini melakukan apa yang mereka katakan - mengatur item ke kiri atau ke kanan. Sederhana dan jelas, seperti一杯好咖啡 pagi-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 rapi berjejer.

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 untuk kompatibilitas mundur. Itu seperti menyimpan telepon genggam tua - Anda mungkin tidak akan menggunakannya, tetapi itu ada jika Anda membutuhkannya!

Dan begitu Anda mendapatkannya, teman-teman! Anda baru saja melakukan perjalanan singkat melalui properti justify-items. Ingat, kunci untuk menguasai CSS adalah praktik. Jadi, majulah, eksperimen dengan 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