CSS - place-content: Panduan Menyenangkan untuk Pemula

Hai sana, super bintang desain web masa depan! ? Siap untuk melompat ke dunia yang menakjubkan CSS? Hari ini, kita akan mengexplore sebuah properti kecil yang menarik yang disebut place-content. Percayakan kepada saya, ini akan membuat hidup Anda jauh lebih mudah saat Anda mencoba untuk mengatur hal-hal di dalam tata letak web Anda. Jadi, ambil secangkir kopi (atau teh, jika itu yang Anda suka), dan mari kita mulai!

Apa itu place-content?

Bayangkan Anda menata furniture di dalam sebuah kamar. Anda ingin semua hal terlihat sempurna, tapi memindahkan setiap item secara individual adalah sangat menyakitkan. Itu adalah tempat place-content berada - itu seperti memiliki tongkat ajaib yang membantu Anda menata elemen di halaman web Anda dengan mudah!

Properti place-content adalah singkatan untuk mengatur align-content dan justify-content dalam satu langkah. Itu seperti membunuh dua burung dengan satu batu (tetapi jangan khawatir, tidak ada burung yang terluka dalam membuat properti CSS ini ?).

Nilai yang Mungkin

Wah, kita memiliki banyak pilihan di sini! Mari kita rinci mereka dalam tabel yang mudah dibaca:

Nilai	Deskripsi
center	Menengahkan konten secara vertikal dan horizontal
start	Menyelaraskan konten ke awal wadah
end	Menyelaraskan konten ke akhir wadah
flex-start	Menyerupai start, tapi untuk kontainer flex
flex-end	Menyerupai end, tapi untuk kontainer flex
baseline	Menyelaraskan konten sepanjang garis dasar
space-between	Mengatur item secara merata dengan ruang antaranya
space-around	Mengatur item secara merata dengan ruang disekelilingnya
space-evenly	Mengatur item dengan ruang yang sama antara dan disekelilingnya

Jangan khawatir jika ini terlihat menakutkan - kita akan melalui setiap satu dengan contoh!

Terapkan Pada

Sebelum kita masuk ke detil, penting untuk mengetahui di mana kita bisa menggunakan place-content. Properti ini diterapkan pada:

• Kontainer Grid
• Kontainer Flex

Jadi, jika Anda sedang bekerja dengan grid atau flexbox (yang, percayalah, Anda akan), place-content adalah teman baru Anda!

Sintaks

Sintaks dasar untuk place-content sangat sederhana:

.container {
place-content: <align-content> <justify-content>;
}

Anda dapat menggunakan satu atau dua nilai. Jika Anda menggunakan satu, itu diterapkan ke kedua arah perataan. Jika Anda menggunakan dua, yang pertama untuk align-content (perataan vertikal) dan yang kedua untuk justify-content (perataan horizontal).

Sekarang, mari kita lihat beberapa contoh khusus!

CSS place-content - center start Nilai

.container {
display: grid;
place-content: center start;
height: 200px;
border: 2px solid #333;
}

Dalam contoh ini, konten akan ditempatkan di tengah secara vertikal tapi diperatakan ke awal (sisi kiri dalam bahasa kiri-ke-kanan) secara horizontal. Itu seperti mendorong semua furniture Anda ke satu sisi kamar tapi menjaga mereka di tengah secara vertikal.

CSS place-content - start center Nilai

.container {
display: flex;
place-content: start center;
height: 200px;
border: 2px solid #333;
}

Di sini, kita melakukan hal yang sebaliknya - menyelaraskan konten ke atas tapi menengahkan secara horizontal. Bayangkan menata semua furniture Anda di sepanjang dinding atas tapi menyebar mereka secara merata dari kiri ke kanan.

CSS place-content - end right Nilai

.container {
display: grid;
place-content: end right;
height: 200px;
border: 2px solid #333;
}

Ini akan mendorong semua konten ke sudut bawah-kanan wadah. Itu seperti mendorong semua furniture Anda ke satu sudut kamar (tidak direkomendasikan untuk kehidupan nyata ?).

CSS place-content - flex-start center Nilai

.container {
display: flex;
place-content: flex-start center;
height: 200px;
border: 2px solid #333;
}

Menyerupai start center, tapi khusus untuk kontainer flex. Konten Anda akan berada di atas (atau kiri dalam arah kolom) dan ditempatkan di tengah secara horizontal.

CSS place-content - flex-end center Nilai

.container {
display: flex;
place-content: flex-end center;
height: 200px;
border: 2px solid #333;
}

Ini seperti flex-start center, tapi menyelaraskan ke akhir kontainer flex saja.

CSS place-content - last baseline Nilai

.container {
display: grid;
place-content: last baseline;
height: 200px;
border: 2px solid #333;
}

Ini agak sulit. Itu menyelaraskan konten sepanjang garis dasar baris terakhir teks. Itu seperti memastikan semua teks Anda berada rapi di atas garis takhta yang tak terlihat.

CSS place-content - space-between Nilai

.container {
display: flex;
place-content: space-between;
height: 200px;
border: 2px solid #333;
}

Ini mengatur item secara merata, dengan item pertama di awal dan item terakhir di akhir. Bayangkan menempatkan furniture di dalam kamar dengan ruang yang sama antaranya, tapi ditekan ke pinggir.

CSS place-content - space-around Nilai

.container {
display: grid;
place-content: space-around;
height: 200px;
border: 2px solid #333;
}

Menyerupai space-between, tapi juga menambahkan ruang sebelum item pertama dan setelah item terakhir. Itu seperti memberikan setiap furniture Anda sendiri ruang kecil di kamar.

CSS place-content - space-evenly Nilai

.container {
display: flex;
place-content: space-evenly;
height: 200px;
border: 2px solid #333;
}

Ini mengatur item dengan ruang yang sama antara dan disekelilingnya. Itu adalah pendekatan yang paling seimbang, seperti menempatkan furniture Anda secara sempurna di kamar.

Dan itu adalah dia! Anda telah belajar tentang properti place-content dan nilai-nilainya. Ingat, latihan membuat sempurna, jadi jangan khawatir untuk mencoba ini dalam proyek Anda sendiri. Sebelum Anda tahu, Anda akan menata konten seperti seorang pro!

Terus coding, terus belajar, dan yang paling penting, bersenang-senanglah dengan itu! ??‍??‍?

Credits: Image by storyset