Pertama tama marilah kita panjatkan puji serta syukur kita atas kehadirat Allah SWT yang mana telah memberikan nikmat serta karunianya sehingga saya dapat menulis artikel tentang CSS Grid bagian special keyword dan function kali ini.
Sholawat beserta salam tak lupa kita curahkan kepada junjungan kita habibana wanabiana Muhammad SAW kepada para keluarganya, sahabatnya, dan tak lupa kepada kita semua yang selaku umatnya yang semoga patut dan taat atas ajarannya sampai yaumul akhir aamiin ya rabbal alamin.
Pada artikel sebelumnya kita telah membahas tentang column dan rows, diantaranya adalah:
grid-template-colums
grid-template-rows
grid-auto-colums
grid-auto-rows
grid-auto-flow
Sebelum kita ke property selanjutnya ada beberapa hal yang harus dipahami dulu yaitu mengenai special function dan keyword saat kita memberikan nilai pada properti yang kita bahas di artikel sebelumnya.
Apa saja yang termasuk special function dan keywordnya?
Repeat
Min-content dan max-content
Minmax
Auto-fill dan auto-fit
Nah pada artikel ini kita akan membahas tentang ke empat nya.
Repeat
Repeat ini sesuai namanya adalah untuk menentukan ukuran grid track secara berulang. Jadi fungsi dari css repeat ini adalah mewakili fragmen berulang dari list track, dapat memungkinkan untuk menulis sejumlah besar baris dan kolom yang menunjukan pola berulang dalam bentuk yang lebih ringkas.
Jadi kita tidak perlu lagi menulis semua ukuran baris atau kolomnya satu per satu. Misalnya saya ingin punya 9 kolom yang ukurannya sama sama 1 fr daripada kita menulis 9 kali 1 fr nya, maka cukup kita tulis saja repeat (9, 1fr); baik mari kita coba:
<body>
<divclass="container">
<divclass="item">1</div>
<divclass="item">2</div>
<divclass="item">3</div>
<divclass="item">4</div>
<divclass="item">5</div>
<divclass="item">6</div>
<divclass="item">7</div>
<divclass="item">8</div>
<divclass="item">9</div>
</div>
</body>
Catatan:
Diatas adalah item yang telah dibuat semuanya ada 9.
Untuk css nya yaitu:
.container{
width: 600px;
margin: 50pxauto;
display: grid;
grid-template-columns: repeat(9, 1fr);
}
Catatan:
grid-template-columns yang tadinya 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr, 1fr. maka kita singkat jadi repeat (9, 1fr)
dan hasilnya sama saja seperti ini:
Ini juga dapat berlaku pada row.
Min-content dan max-content
Min-content dan max-content ini adalah properti untuk menentukan lebar ukuran dari grid track berdasarkan content yang ada pada item.
.container{
width: 600px;
margin: 50pxauto;
display: grid;
grid-template-columns: min-content/max-content;
}
Max-content menentukan ukuran dengan asumsi bahwa ada ruang yang tersedia tak terbatas.
Sedangkan disisi lain, min-content mendefinisikan ukuran seminimal mungkin elemen yang tidak mengarah ke konten yang meluap.
Auto-fill dan auto-fit
Auto-fill dan auto-fit ini adalah properti untuk menentukan jumlah item untuk berada pada grid track, biasanya digunakan didalam nilai repeat, Ketika fungsi repeat() diatur ke auto-fit atau auto-fill, wadah kisi membuat trek kisi (kolom/baris) sebanyak mungkin tanpa memenuhi wadah.
Perhatikan bahwa saat wadah kisi sedang dirender, keberadaan item kisi tidak relevan. Wadah hanya meletakkan kolom dan baris seperti yang diinstruksikan, membuat sel kisi. Tidak peduli apakah sel-selnya terisi atau kosong.
Dengan penyesuaian otomatis, ketika item kisi tidak cukup untuk mengisi jumlah trek yang dibuat, trek kosong tersebut akan diciutkan.
Mengambil kode Anda sebagai contoh, ketika item kisi tidak cukup untuk mengisi semua kolom dalam baris, kolom kosong tersebut akan diciutkan. Ruang yang digunakan oleh kolom-kolom kosong menjadi ruang kosong, yang kemudian didistribusikan secara merata di antara item-item yang ada. Dengan menyerap ruang kosong, item tumbuh memenuhi seluruh baris.
Dengan pengisian otomatis, semuanya sama dengan pas otomatis, kecuali trek kosong tidak diciutkan. Mereka dilestarikan. Pada dasarnya, tata letak kotak tetap, dengan atau tanpa item.
Itulah satu-satunya perbedaan antara pengisian otomatis dan penyesuaian otomatis.
Minmax
Minmax ini adalah properti untuk menentukan ukuran atau lebar minimal dan juga maximal pada grid track.
.container{
width: 600px;
margin: 50pxauto;
display: grid;
grid-template-columns: minmax(200px300px);
}
Sebuah fungsi mengambil dua parameter, minimal dan maximal. Setiap parameter dapat berupa value, atau salah satu dari nilai kata kunci max-content, min-content, atau auto.
Jika maximal < minimal, maka maximal diabaikan dan minmax(min,max) diperlakukan sebagai minimal. Maksimum, nilai menetapkan faktor flex trek grid; minimal tidak valid.
Sekian artikel yang saya bahas untuk kali ini maafkan apabila banyak kekurangannya, dan terima kasih karena telah mengunjungi halaman blog saya, untuk lebih jelasnya silahkan tonton video di bawah ini.
