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

Menghemat Waktu dengan CSS Shorthand Property "grid"

by
Difficulty:BeginnerLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
The Quirks of CSS Grid and Absolute Positioning

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

Dalam tutorial sebelumnya, kita telah mempelajari cara menyiapkan grid, menentukan property explicit-nya (seperti grid-template-columns dan grid-template-areas) dan bahkan beberapa property implicit (seperti grid-auto-columns). Dalam tutorial ini kita akan membahas shorthand property grid yang dengan cepat menangani semua hal di atas dalam satu statement.

Grid Anda, dalam Dua Baris yang Mudah

Seperti biasa, mulailah dengan mendeklarasikan display: grid; di container Anda. Selanjutnya, gunakan property grid tersebut untuk meletakkan rows, lalu columns Anda:

Statement di atas mengatakan kita ingin tiga explicit rows 100px, auto, dan 300px. Dan (menggunakan function repeat()) dua kolom dengan 1fr, lalu satu dengan 100px. Ini persis sama dengan versi yang lebih panjang ini:

Kedua statement tersebut memberi kita ini:

Menambahkan Nilai Implicit ke dalam Percampurannya

Nilai implicit adalah apa yang kita minta agar Grid gunakan di luar dari nilai explicit yang kita tetapkan. Di shorthand grid, kita tidak dapat menggabungkan keduanya sehingga kita harus membuat pilihan. Lihatlah ini, misalnya:

Dalam hal ini kami terjebak dengan kolom explicit (salah satu dengan 1fr, yang lain dengan 100px) tetapi rows kita menggunakan bentuk ringkas dari grid-auto-flow dan grid-auto-rows. Dikatakan "ketika Anda perlu menambahkan lebih banyak trek ke grid, tambahkan mereka sebagai row. Dan buat masing-masing 100px high. " Ini sama dengan ini:

Ini merupakan behaviour yang cukup standar, tetapi kita melihat perubahan yang lebih besar jika kita meminta grid implisit kita untuk menggunakan columns tambahan:

Ini memberi kita dua row 100px dan 300px, kemudian secara efektif menetapkan grid-auto-flow: column;. Hal tersebut sama dengan:

Sekarang, algoritma auto-placement menempatkan item-item dari atas ke bawah, menambahkan column ke kanan ketika kehabisan ruang:

Catatan: kita tidak dapat mendeklarasikan auto-flow pada row dan column, hal tersebut tidak akan berfungsi.

Packing Keyword

Jika Anda mengingat kembali tutorial kami Memahami Grid CSS "Algoritma Auto-Placement", Anda akan ingat kami membahas sparse dan dense; kata kunci yang menjelaskan cara item-item dikemas ke dalam sebuah grid. Ini juga dapat digunakan bersama auto-flow, seperti ini:

Grid Template Area

Area template adalah cara penamaan area grid kita, dengan cara yang hampir representatif secara visual. Dalam bentuk yang paling sederhana, kami hanya akan menggunakan grid untuk menggambarkan area template kita dan tidak ada yang lain:

Kemudian kita akan menyatakan area mana yang diisi setiap item grid, seperti ini:

Jika Anda mengingat tutorial template area original kami, kami memiliki beberapa detail lainnya untuk memberi kita dimensi column dan row:

Kita juga bisa melakukannya, sebagai berikut:

Kami menambahkan column width setelah forward slash (function repeat() tidak akan berfungsi dalam kasus ini, tetapi saya tidak tahu mengapa). Dan kami menambahkan row height inline setelah deklarasi area. Inilah yang akhirnya kita dapatkan:

Kesimpulan

Tutorial ini seharusnya memberi Anda pemahaman tentang cara kerja property shorthand grid. Main-main lah dengannya, lihat aspek apa saja dari module CSS Grid yang dapat Anda gunakan dengannya, dan beri tahu kami berapa banyak waktu yang dapat dihemat!

Tutorial dan Link yang Relevan

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.