Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Cara Menggunakan Implicit Track Sizing pada Grid CSS Anda

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
Quick Tip: Name Your CSS Grid Lines, Just in Case
The Quirks of CSS Grid and Absolute Positioning

Indonesian (Bahasa Indonesia) translation by Sela Sinta (you can also view the original English article)

Hingga saat ini, tutorial grid CSS kami sebagian besar terfokus pada nilai-nilai eksplisit (explicit) - ukuran trek (track size) yang telah kami definisikan secara eksplisit. Kami telah menggunakan row dengan tinggi 200 piksel, atau mungkin column dengan lebar 1fr, dan kami telah secara eksplisit menyatakan berapa banyak dari yang kami inginkan. Tetapi bagaimana jika kita tidak tahu (atau tidak ingin berkomitmen) berapa banyak track yang kita inginkan? Di situlah letak nilai implisit (implicit) - mari kita membahasnya.

Starter Grid

Berikut adalah grid dasar yang dapat Anda ikuti. Contoh ini memberi kita grid container, dengan 9 item grid. Tidak ada lebar (width) atau jumlah kolom (column) yang telah ditentukan, jadi setiap item mengisi width maksimum yang tersedia:

Mendefinisikan Hanya Satu Column

Mari kita bayangkan bahwa kita menginginkan satu column di sebelah kiri, dan kita tahu persis bahwa seberapa lebar yang kita inginkan: 300px. Kita dapat mendefinisikan itu dengan menambahkan grid-template-columns: 300px; ke grid container kita. Tetapi kita tidak akan diberi column lain kecuali kita secara eksplisit mendefinisikannya:

Seperti itu jadinya, kecuali kita mengatakan kita ingin salah satu item grid dimasukkan ke dalam (misalnya) column 3 pada row 1:

Cara ini kemudian memberi kita column tambahan di luar grid kita karena Grid CSS akan menggunakan space yang tersedia dan algoritma penempatan otomatis untuk mencari tahu di mana posisi yang lainnya.

Ini bagus, dan Grid akan membuat asumsi bahkan jika kita ingin memiliki lebih banyak kolom, tanpa kita harus mendefinisikan masing-masingnya. Tetapi bagaimana jika kita menginginkan track tersirat ini (implicit track), seperti beberapanya untuk memiliki width tertentu? Di situlah grid-auto-columns ikut bermain.

Ucapkan "Halo" ke grid-auto-columns

Jika kita ingin semua column selain yang pertama memiliki wide 100px, kita dapat secara implisit menyatakan bahwa:

Dipasangkan dengan nilai eksplisit kita, kita mendapatkan yang terbaik dari kedua dunia. Di sini kita mengatakan bahwa kita ingin column pertama menjadi 1fr (yang mengambil satu fraction dari space yang tersisa - auto akan memiliki efek yang sama di sini) dan setiap column lain setelah itu harus tepat 100px:

Hal ini memberi kita yang hasil berikut:

Dan jika kita menyatakan bahwa item 3 harus benar-benar ditempatkan di column 5, pada row 1, Grid tahu seberapa luas untuk membuat kolom tambahan karena sudah tersirat.

Kita juga tidak terbatas pada nilai pixel di sini; kita bisa menggunakan unit fraction, seperti em, bahkan notasi minmax() yang telah kita diskusikan di tutorial sebelumnya.

Jangan Lupakan grid-auto-rows

Hampir tidak perlu dikatakan bahwa grid-auto-rows akan melakukan hal yang sama untuk row sebagai grid-auto-columns untuk column. Berikut contohnya, di mana semua row kecuali dua yang pertama ditetapkan pada height 200px.

Kesimpulan

Banyak properties Grid memiliki nilai-nilai default yang akan menjaga Anda jika Anda tidak menentukan sesuatu yang berbeda, tetapi pada beberapa kesempatan kita perlu setidaknya menyiratkan apa yang kita inginkan. Dengan ukuran implicit track, kita dapat mengimplikasikan ukuran apa saja row atau column ekstra, jika diperlukan.

Baca Lebih Banyak

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.