Saat pertama kali mempelajari cara menggunakan tata letak kisi, Anda bisa mulai dengan menempatkan elemen pada kisi dengan nomor baris. Dalam hal ini, perlu untuk memantau kemana garis-garis tertentu berada di grid, dan ingat bahwa urutan angka-angka mereka dibalik jika situs ditampilkan untuk bahasa yang ditulis dari kanan ke kiri.
Berdasarkan sistem garis ini, teknik bekerja yang memungkinkan untuk memberi nama garis dan bahkan bidang kisi. Menggunakan teknik ini memungkinkan Anda untuk menempatkan item berdasarkan nama dan bukan dengan nomor. Pada artikel ini, saya akan melihat secara rinci
berbagai cara penamaan garis dan area dalam tata letak CSS Grid , serta beberapa fitur menarik yang mereka buat.
Dari penerjemah:
Sebuah artikel dua tahun lalu (2017), tetapi menyentuh mekanisme penting dari fungsi Grid CSS, dan karena itu tampaknya berguna dan relevan saat ini.
Penamaan garis
Mari kita mulai dengan memberi nama garis kisi. Dalam contoh di bawah ini, ada Kotak dengan enam trek kolom eksplisit dan satu trek garis eksplisit. Elemen ditempatkan di grid menggunakan nomor baris.
.grid { display: grid; grid-gap: 20px; grid-template-rows: 20vh ; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr; } .header { grid-row: 1; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: 1 / 3; } .content { grid-row: 2; grid-column: 3 / -1; }
Jika perlu, nama garis dapat ditentukan di dalam tanda kurung siku dalam daftar lagu. Penting untuk diingat di sini bahwa Anda memberi nama jalurnya, bukan trek yang mengikutinya. Setelah memberi nama garis, Anda dapat menggunakan namanya alih-alih angka ketika memposisikan elemen pada grid.
.grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [sidebar-start] 1fr 2fr [sidebar-end] 1fr 2fr 1fr 2fr; } .header { grid-row: header-start; grid-column: 1 / -1; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; }
Nama dapat berupa apa pun selain kata kunci
span . Untuk alasan yang akan Anda pelajari nanti dalam artikel ini, penamaan dengan akhiran
-start untuk garis mulai (tidak peduli apakah itu garis atau kolom baris) dan
-end untuk akhir adalah praktik yang baik. Hasilnya harus
main-start dan
main-end atau
sidebar-start dan
sidebar-end .
Cukup sering, garis akhir dari satu bagian dari kisi dan garis awal dari bagian yang lain bertepatan, tetapi ini bukan masalah, karena garis dapat memiliki beberapa nama. Anda dapat menentukan baris beberapa nama dengan menambahkannya melalui spasi di dalam tanda kurung siku.
.grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end] ; grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } .header { grid-row: header-start; grid-column: full-start / full-end; } .sidebar { grid-row: 2; grid-column: sidebar-start / sidebar-end; } .content { grid-row: 2; grid-column: main-start / main-end; }
Contoh ini menunjukkan bahwa Anda tidak harus memberi nama setiap garis kisi individual, dan bahwa nomor garis yang dapat digunakan selain nama selalu tersedia.
Codepen 1.
Penamaan BarisBaris dengan nama yang sama.
Kami melihat bagaimana garis dapat memiliki beberapa nama, tetapi ada juga situasi di mana beberapa garis memiliki nama yang sama. Ini terjadi jika Anda menggunakan fungsi
repeat() dan menyertakan garis bernama dalam daftar trek. Contoh berikut membuat enam baris bernama, bergantian bernama
col-a-start dan
col-b-start .
.grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, [col-a-start] 1fr [col-b-start] 2fr); }
Jika Anda menentukan
col-a-start ketika memposisikan elemen, itu akan ditempatkan pada baris pertama yang ditemui dengan nama
col-a-start (yang dalam contoh dianggap akan menjadi garis grid pertama). Dengan prinsip yang sama, jika Anda menentukan
col-b-start saat memposisikan elemen, elemen itu akan ditempatkan pada garis kisi kedua.
Jika Anda perlu memposisikan pada baris berikutnya, tambahkan nomor setelah nama untuk menunjukkan pada baris mana dari baris dengan nama yang sama item harus ditempatkan
.box3 { grid-row: 2; grid-column: col-a-start 2 / col-b-start 3; }
Codepen 2.
Baris dengan nama yang sama.Spesifikasi ini menjelaskan perilaku ini sebagai "membuat seperangkat garis grid bernama."
Menyimpan nama garis saat membangun kembali kisi adaptif
Gunakan nomor baris atau nama mereka, Anda yang memutuskan. Sebagai aturan, garis dapat berguna dalam situasi ketika Anda ingin mengubah struktur kisi sebagai bagian dari kueri media. Alih-alih melacak garis mana yang Anda tempatkan elemen pada titik kontrol yang berbeda, itu akan mungkin untuk beroperasi dengan garis bernama berurutan.
Dalam contoh sederhana berikut ini, saya mendefinisikan kolom kotak untuk layar sempit, dan kemudian mendefinisikannya kembali dengan lebar 550px.
.grid { display: grid; grid-gap: 20px; grid-template-rows: [header-start] 20vh [header-end]; grid-template-columns: [full-start ] 10px [sidebar-start main-start] 1fr [main-end sidebar-end] 10px [full-end]; } @media (min-width: 550px) { .grid { grid-template-columns: [full-start sidebar-start] 1fr 2fr [sidebar-end main-start] 1fr 2fr 1fr 2fr [main-end full-end]; } }
Codepen 3. Memberi
nama hal: mendefinisikan kembali posisi baris bernamaBernama Daerah
Sebelumnya, kami hanya mempertimbangkan nama baris, tetapi ada cara lain. Kami dapat memberi nama area kisi.
Wilayah kisi adalah wilayah persegi panjang yang terdiri dari satu atau lebih sel kisi. Area ini didefinisikan oleh empat garis kisi yang menunjukkan garis awal dan akhir untuk kolom dan baris.
Kami menamai area grid menggunakan properti
grid-template-areas . Properti ini menggambarkan tata letak dalam bentuk tabel ASCII dan merupakan serangkaian garis, yang masing-masing menggambarkan jalur garis terpisah dari kisi.
.grid { display: grid; grid-template-columns: repeat(3, 1fr 2fr) ; grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; }
Nama-nama yang kami gunakan di baris properti
grid-template-areas ditugaskan untuk anak-anak langsung dari grid menggunakan properti
grid-area . Nilai dari properti ini, ketika digunakan untuk penamaan, adalah apa yang disebut
pengidentifikasi pengguna , sehingga tidak perlu dilampirkan dalam tanda kutip
.header { grid-area: head; } .sidebar { grid-area: side; } .content { grid-area: main; } .footer { grid-area: foot; }
Untuk membuat area mencakup lebih dari satu sel saat menggambarkan struktur kisi menggunakan properti
grid-template-areas , Anda perlu merekam ulang pengenalnya beberapa kali di sepanjang baris atau kolom. Area yang dibuat harus berbentuk persegi panjang, area berbentuk L dan T tidak diperbolehkan. Anda juga dapat membuat hanya satu area persegi panjang untuk setiap nama - area yang terputus tidak diperbolehkan. Spesifikasi mencatat bahwa:
“Area yang tidak berbentuk segi empat atau terputus mungkin diperbolehkan dalam versi modul ini di masa depan”
- Properti grid-templat-area
Saat menggambarkan kisi, Anda harus menjaga presentasi lengkapnya, jika tidak seluruh iklan akan dibuang sebagai tidak valid. Ini berarti bahwa setiap sel kotak harus diisi.
grid-template-areas: "head head head head head head" "side side main main main main" "foot foot foot foot foot foot"; }
Karena Anda mungkin ingin membiarkan beberapa sel dalam markup kosong, spesifikasi mendefinisikan simbol titik
. atau urutan titik tanpa spasi di antara mereka
.... sebagai penanda sel kosong
grid-template-areas: "head head head head head head" "side side main main main main" "....... ....... foot foot foot foot"; }
Codepen 4.
Wilayah BernamaJika Anda belum mengunduh Firefox untuk memanfaatkan semua fitur terbaru Firefox DevTools Grid Inspector, saya sarankan melakukan ini ketika bekerja dengan bidang yang disebutkan
Demonstrasi area bernama di "Inspektur Kotak" pada browser Firefox ( Buka asli )Garis bernama membentuk area
Sekarang kita sampai pada bagian yang menarik dari seluruh penamaan liburan ini. Anda mungkin ingat bahwa ketika kami melihat baris bernama, saya menyarankan menggunakan perjanjian akhir baris yang menetapkan awal area menggunakan
-start , akhir area menggunakan
-end . Alasan untuk ini adalah bahwa jika Anda memberi nama garis dengan cara ini, Anda berakhir dengan area kisi dengan nama itu, dan Anda dapat memasukkan elemen ke dalamnya dengan menetapkan nama ini melalui properti
grid-area .
Dalam contoh berikut, untuk baris dan kolom, saya beri nama
panel-start dan
panel-end . Ini akan memberi saya area bernama panel. Jika saya menetapkannya sebagai nilai properti
grid-area untuk elemen pada halaman, ini akan menempatkan elemen di area yang ditentukan oleh baris ini
.grid { display: grid; grid-gap: 20px; grid-template-columns: 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr; grid-template-rows: 10vh [panel-start] minmax(200px, auto) 10vh [panel-end]; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-area: panel; }
Codepen 5. Area terbentuk
dari garis bernamaGaris terbentuk dari area yang disebutkan
Kita juga bisa melakukan kebalikan dari yang ditunjukkan di atas, menggunakan garis yang dibuat dari area yang disebutkan. Setiap area membuat empat baris bernama menggunakan konvensi akhiran yang sama dengan
-start dan
-end . Jika ada area bernama
main , garis awal dan akhir dan garis kolom akan disebut
main-start dan
main-end . Baris bernama ini dapat digunakan untuk memposisikan elemen.
Dalam contoh berikut, saya memposisikan panel menggunakan nama-nama garis yang dihasilkan secara otomatis ini:
.grid { display: grid; grid-template-areas: "head head head head head head" "side side main main main main" ".... .... foot foot foot foot"; } .panel { grid-column: main-start / main-end; grid-row: head-start / foot-end; }
Codepen 6.
Garis terbentuk dari area yang disebutkanNama baris setara dengan nama wilayah
Selain baris dengan
-end dan
-end , baris dibuat untuk wajah-wajah wilayah kisi apa pun dengan nama wilayah ini. Dengan demikian, jika ada area
main , Anda bisa menggunakan pengidentifikasi
main sebagai nilai untuk properti
grid-row-start atau
grid-column-start , dan konten akan terletak dari awal area ini. Jika Anda menggunakan nilai ini untuk properti
grid-row-end atau
grid-column-end , maka garis akhir area ini dipilih. Pada contoh di bawah ini, saya meregangkan elemen
.panel dari awal
main ke akhir
main untuk kolom, dan dari awal
main ke ujung
foot untuk garis
.panel { grid-column: main; grid-row: main / foot ; }
Codepen 7.
Nama baris setara dengan nama wilayahPenjelasan properti kotak-area
Sangat berguna untuk mengetahui sesuatu tentang properti
grid-area . Pada dasarnya, apa yang kita lakukan ketika menggunakan
grid-area dengan pengidentifikasi seperti
main adalah bagaimana kita menggambarkan keempat garis area tersebut. Nilai yang valid untuk properti
grid-area juga nomor baris.
.main { grid-area: 2 / 1 / 4 / 3; }
Ini memiliki efek yang sama dengan entri:
.main { grid-row-start: 2; grid-column-start: 1; grid-row-end: 4; grid-column-end: 3; }
Ketika anda bertanya
.main { grid-area: main; }
Ini sebenarnya berarti:
.main { grid-area: main / main / main / main ; }
Properti
grid-area berperilaku sedikit berbeda ketika pengidentifikasi pengguna digunakan, bukan nomor baris. Saat menggunakan nomor baris untuk nilai awal di properti
grid-area , setiap nomor baris akhir yang tidak Anda tentukan akan secara otomatis disetel ke
auto , oleh karena itu, penentuan posisi otomatis akan digunakan untuk menentukan di mana menempatkan elemen.
Namun, jika Anda menggunakan ID pengguna dan melewati beberapa baris, mereka ditetapkan sebagai berikut
Tiga nama baris ditentukan
.main { grid-area: main / main / main ; }
Jika Anda menentukan tiga nama garis, maka pada dasarnya Anda kehilangan
grid-column-end . Jika
grid-column-start adalah pengidentifikasi pengguna, maka pengidentifikasi yang sama juga ditetapkan untuk
grid-column-end . Seperti yang telah kita lihat, properti
-end akan menggunakan wajah akhir dari
main , jadi jika
grid-column-start dan
grid-column-end diberi nama yang sama, konten direntangkan ke semua kolom area ini.
Dua nama garis ditentukan
.main { grid-area: main / main ; }
Ketika hanya dua nama yang ditentukan, garis awal baris dan kolom ditetapkan. Jika
grid-column-start dan / atau
grid-row-start adalah pengidentifikasi pengguna, maka
grid-column-end dan
grid-row-end masing diatur ke nilai yang sama.
Satu nama baris ditentukan
.main { grid-area: main ; }
Menyetel nama garis tunggal adalah persis apa yang Anda lakukan ketika Anda mengatur area kisi ke nama utama area tersebut. Dalam hal ini, keempat baris diatur ke nilai ini.
Catatan :
Ini berfungsi untuk grid-column - grid-row dan grid-row .Metode ini sebenarnya berarti bahwa Anda dapat menetapkan satu set kolom atau baris dalam kotak untuk menempatkan elemen. Sama seperti nilai-akhir untuk properti
grid-area diatur ke nilai yang sama dengan nilai awal (ketika dihilangkan), nilai akhir untuk properti
grid-column dan
grid-row juga berperilaku. Ini berarti bahwa Anda dapat menempatkan elemen antara garis kolom awal dan akhir dari area
main menggunakan:
.main { grid-column: main ; }
Dalam
Breaking Out with CSS Grid dijelaskan, saya menunjukkan bagaimana fitur ini digunakan untuk membuat pola desain yang berguna untuk area berukuran penuh yang melampaui area konten terbatas.
Sebuah kisi dapat memiliki banyak garis bernama.
Semua hal di atas berarti grid sebagai hasilnya dapat berisi sejumlah besar garis bernama. Dalam kebanyakan kasus, Anda tidak perlu khawatir tentang ini. Bekerja dengan garis yang Anda butuhkan dan abaikan keberadaan orang lain.
Penamaan dan singkatan grid dan templat-templat properti
CSS Grid memiliki dua singkatan yang memungkinkan Anda untuk mengatur banyak properti grid dalam satu sintaks yang kompak. Secara pribadi, tampaknya cukup sulit untuk saya pahami. Ketika saya membahas hal ini dengan pengembang lain, pendapat terbagi: beberapa seperti mereka, yang lain lebih suka menggunakan properti terpisah. Seperti dalam kasus singkatan lainnya, harus diingat bahwa nilai properti yang tidak Anda gunakan akan diatur ulang ke aslinya
Singkatan grid-template: membuat kisi eksplisit
Anda dapat menggunakan pintasan
grid-template untuk mengatur semua properti kisi eksplisit di satu tempat sekaligus
grid-template-columns grid-template-rows grid-template-areas
Ini berarti bahwa Anda dapat mendefinisikan garis yang dinamai dan area yang dinamai secara bersamaan. Saat menggunakan properti yang menggabungkan area dan baris bernama, saya pertama-tama akan menentukan nilai properti
grid-template-areas , seperti yang dijelaskan pada bagian di atas.
Maka Anda mungkin ingin menambahkan nama baris. Mereka ditempatkan di awal dan di akhir setiap garis nilai - ingat bahwa setiap garis nilai mewakili jalur garis. Nama atau nama garis harus di dalam tanda kurung siku, sama seperti ketika memberi nama garis di properti
grid-template-rows , dan harus berada di luar tanda kutip yang mengelilingi garis nilai yang menentukan trek garis.
Pada contoh di bawah ini, saya beri nama dua garis garis:
panel-start muncul setelah baris header (baris kedua grid) dan
panel-end berjalan setelah baris footer terakhir (baris keempat grid dengan tiga trek garis). Saya juga menentukan ukuran trek baris untuk baris yang dinamai dan tidak disebutkan namanya dengan menambahkan parameter pada akhir baris nilai yang menggambarkan trek baris ini.
.grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end]; }
Jika perlu memberi nama kolom, kita tidak bisa melakukan ini di dalam baris, jadi kita perlu menambahkan pemisah
/ , dan kemudian menentukan daftar trek kolom. Baris diberi nama seolah-olah daftar ini adalah nilai dari properti
grid-template-columns .
.grid { display: grid; grid-gap: 20px; grid-template: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; }
Dalam contoh ini, yang dapat Anda lihat dalam codepen di bawah ini, saya membuat satu set garis tambahan untuk baris dan kolom, garis-garis ini menentukan area yang disebut
panel , karena saya menggunakan
panel-start dan
panel-end sintaks. Dengan cara ini saya dapat menempatkan elemen dengan mengatur nilai
panel properti
grid-area .
Sepintas, ini terlihat agak tidak bisa dipahami. Jadi, di sini kita membuat daftar kolom yang berbaris sesuai dengan tabel ASCII kita yang didefinisikan di atas. Secara opsional, tambahkan spasi di antara nilai untuk menyelaraskan definisi
template-areas -
template-columns dan
template-columns .
Codepen 8.
singkatan Grid
-templateSingkatan grid: mesh implisit dan eksplisit
Spesifikasi mengasumsikan bahwa jika Anda perlu mendefinisikan kisi implisit secara terpisah, Anda harus menggunakan properti
grid steno alih-alih
grid-template . Kotak singkatan me-reset semua nilai implisit yang belum Anda atur. Dengan demikian, ini memungkinkan Anda untuk mengatur dan mereset properti berikut
grid-template-columns grid-template-rows grid-template-areas grid-auto-columns grid-auto-rows grid-auto-flow
Untuk tujuan kami, menggunakan singkatan
grid akan identik dengan menggunakan
grid-template , karena kami mendefinisikan definisi grid implisit. Satu-satunya perbedaan adalah mengatur ulang properti
grid-auto–* . Singkatan
grid dapat digunakan untuk mengatur kisi eksplisit dan mengatur ulang properti implisit, atau untuk mengatur kisi implisit dan mengatur ulang properti eksplisit. Melakukan keduanya pada saat yang sama tidak masuk akal
.grid { display: grid; grid-gap: 20px; grid: " head head head head head head" 10vh [panel-start] "side side main main main main" minmax(200px, auto) ".... .... foot foot foot foot" 10vh [panel-end] / [full-start ] 1fr [panel-start] 2fr 1fr 2fr 1fr [panel-end] 2fr [full-end]; }
Catatan :
Dalam versi asli yang disarankan dari spesifikasi Grid CSS, pengurangan ini juga me-reset properti gap antara sel grid-row-gap sel grid-column-gap grid-row-gap dan sel grid-row-gap sel grid-row-gap kotak. Namun, perilaku ini akhirnya berubah. Browser memperbarui perilaku ini, tetapi pada saat penulisan (Oktober 2017), Anda masih bisa menghadapi situasi di mana nilai properti gap diatur ulang ke nol ketika pengurangan digunakan, jadi Anda mungkin perlu mendefinisikannya kembali nantiPendekatan mana yang digunakan?
Anda mungkin bertanya yang mana dari semua metode ini yang paling baik digunakan untuk tugas tertentu? Tidak ada aturan ketat. Secara pribadi, saya suka menggunakan
grid-template-areas untuk komponen saat saya bekerja di pustaka templat saya. Lebih mudah memiliki struktur komponen tepat di depan mata Anda secara langsung di CSS dan
grid-template-areas membuatnya mudah untuk mencoba opsi tata letak yang berbeda saat mengujinya. Saya menemukan bahwa karena pergerakan sel mesh yang begitu sederhana, penting untuk memastikan bahwa urutan visual dan logis dari sel-sel komponen tidak terganggu. Pengunjung yang berinteraksi dengan situs Anda menggunakan keyboard, beralih di antara elemen-elemen dengan tombol Tab, akan memilih elemen-elemen dalam urutan yang didefinisikan dalam markup. Pastikan untuk mengingat kembali tata letak segera setelah Anda memutuskan cara yang paling tepat untuk menampilkan konten Anda. Untuk mempelajari lebih lanjut tentang masalah ini, saya sarankan membaca artikel
Layout dan Aksesibilitas Grid CSS .
Konvensi penamaan dasar
Untuk meringkas artikel, saya akan merekapitulasi beberapa aturan dasar yang perlu diingat ketika memberi nama garis atau bidang CSS Grid:
Penamaan baris:- Anda dapat menggunakan hampir semua nama (kecuali untuk kata kunci rentang), tetapi Anda juga dapat menggunakan area yang dibuat dari baris ini jika nama mereka diakhiri dengan
-start dan -end - Garis dapat memiliki beberapa nama yang didefinisikan di dalam tanda kurung siku dan dipisahkan oleh spasi
- Beberapa baris mungkin memiliki nama yang sama; jika Anda membutuhkan yang spesifik, cukup tambahkan nomor baris yang diperlukan setelah nama dalam urutan
Area Penamaan:- Saat mendefinisikan suatu area menggunakan area
grid-template-areas , bentuk area tersebut harus persegi panjang - Saat menggunakan properti
grid-template-areas , setiap lintasan baris dari kotak tersebut direpresentasikan sebagai string nilai dan ditampilkan dalam tanda kutip - Setiap sel harus diisi. Jika dengan desain Anda ingin membiarkan beberapa sel kosong, gunakan titik untuk ini
. atau elipsis ... tanpa spasi - Wilayah yang diberi nama membuat garis dengan nama yang sama dengan wilayah, tetapi dengan
-end dan -end . Mereka dapat digunakan untuk memposisikan elemen.