Cara bermain Sawah Grid
- Baca instruksi level. Properti CSS yang perlu kamu pakai disebut di sana.
- Tulis deklarasi CSS di dalam blok
#padi. Padi berpindah setiap kali kamu mengetik. - Cocokkan padi hijau dengan kotak putus-putus, lalu tekan Cek jawaban atau Ctrl + Enter.
- Kalau buntu, buka Petunjuk. Petunjuk pertama mengarahkan, petunjuk terakhir hampir menjawab.
- Level yang sudah selesai tetap tercentang saat kamu kembali dengan browser yang sama.
Yang kamu pelajari
- Level 1
grid-column-start, grid-row-start
Menentukan garis kolom atau garis baris tempat elemen mulai.
- Level 4
grid-column, grid-row
Singkatan garis awal dan garis akhir, ditulis
awal / akhir. - Level 5
Garis negatif (-1)
Menghitung garis dari ujung kanan atau bawah, jadi kamu tidak perlu tahu jumlah kolom.
- Level 6
span
Menyebut lebar elemen dalam jumlah petak, bukan nomor garis akhirnya.
- Level 8
grid-area
Empat garis sekaligus: baris awal, kolom awal, baris akhir, kolom akhir.
- Level 9
justify-self, align-self
Posisi elemen di dalam petaknya sendiri, horizontal dan vertikal.
Yang dihitung adalah garis, bukan kolom
Grid dengan 5 kolom punya 6 garis vertikal, bernomor 1 di paling kiri sampai 6 di paling kanan. Angka di grid-column menunjuk garis itu.
Jadi grid-column: 2 / 5 mengisi kolom 2, 3, dan 4, lalu berhenti di garis 5. Kalau kamu menulis 2 / 4, padi hanya mengisi kolom 2 dan 3.
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Apakah Sawah Grid cocok untuk pemula?
Cocok kalau kamu sudah bisa menulis deklarasi CSS sederhana seperti color: red;. Konsep grid dijelaskan dari nol mulai level 1.
Kenapa jawaban yang berbeda bisa sama-sama benar?
Jawaban dicek dari posisi padi di layar, bukan dari teks yang kamu tulis. grid-column: 2 / 5 dan grid-column: 2 / span 3 menghasilkan posisi yang sama, jadi keduanya diterima.
Kenapa position atau margin tidak berpengaruh?
Game ini hanya membaca properti penempatan grid dan perataan (justify-self, align-self, place-self). Properti lain diabaikan supaya latihannya tetap fokus ke CSS Grid.
Apa beda grid-column dan grid-area?
grid-column hanya mengatur garis kolom. grid-area mengatur garis baris dan kolom dalam satu deklarasi, dengan urutan baris awal, kolom awal, baris akhir, kolom akhir.