Pelajari CSS Grid dalam 5 minit - Tutorial untuk pemula

Susun atur grid adalah asas untuk reka bentuk laman web, dan modul CSS Grid adalah alat yang paling kuat dan paling mudah untuk membuatnya. Saya secara peribadi berpendapat ia jauh lebih baik daripada misalnya Bootstrap (baca mengapa di sini).

Modul ini juga mendapat sokongan asli oleh penyemak imbas utama (Safari, Chrome, Firefox, Edge), jadi saya percaya bahawa semua pembangun front-end harus mempelajari teknologi ini di masa depan yang tidak terlalu jauh .

Dalam artikel ini, saya akan membahas asas CSS Grid secepat mungkin. Saya akan meninggalkan semua perkara yang tidak perlu anda pedulikan sehingga anda memahami asasnya.

Saya juga telah membuat kursus CSS Grid percuma. Klik di sini untuk mendapatkan akses penuh ke

ia.

Sebagai alternatif, lihat artikel ini, yang menerangkan apa yang akan anda pelajari sepanjang kursus:

Sekarang mari kita masuk ke dalamnya!

Susun atur grid pertama anda

Dua bahan teras CSS Grid adalah pembungkus (induk) dan

barang (kanak-kanak). Pembungkus adalah grid sebenarnya dan item adalah kandungan di dalam grid.

Inilah tanda untuk pembungkus dengan enam item di dalamnya:

 1 2 3 4 5 6 

Untuk mengubah pembungkus kami divmenjadi grid , kami hanya memberikan paparan

grid:

Tetapi, ini belum membuat apa-apa, kerana kami belum menentukan bagaimana kami mahu penampilan grid kami. Ia hanya akan menumpuk 6 div'sdi atas satu sama lain.

Saya telah menambah sedikit gaya, tetapi itu tidak ada kaitan dengan grid CSS.

Lajur dan baris

Untuk menjadikannya dua dimensi, kita perlu menentukan lajur dan baris. Mari buat tiga lajur dan dua baris. Kami akan menggunakan grid-template-rowdan grid-template-columnsifat.

Oleh kerana kita telah menulis tiga nilai grid-template-columns, kita akan mendapat tiga lajur. Kami akan mendapat dua baris, kerana kami telah menentukan dua nilai untuk grid-template-rows.

Nilai menentukan seberapa luas lajur kita (100 piksel) dan seberapa tinggi kita mahu baris kita menjadi (50 piksel). Inilah hasilnya:

Untuk memastikan anda memahami dengan betul hubungan antara nilai dan bagaimana grid kelihatan, lihat juga contoh ini.

.wrapper { display: grid; grid-template-columns: 200px 50px 100px; grid-template-rows: 50px 50px; } 

Cuba memahami hubungan antara kod dan susun atur.

Beginilah kaedahnya:

Meletakkan barang

Perkara seterusnya yang perlu anda pelajari ialah cara meletakkan item di grid. Di sinilah anda mendapat kuasa besar, kerana menjadikannya mudah untuk membuat susun atur.

Mari buat grid 3x3, menggunakan markup yang sama seperti sebelumnya.

.wrapper { display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 100px 100px 100px; } 

Ini akan menghasilkan susun atur berikut:

Perhatikan, kita hanya melihat grid 3x2 di halaman, sementara kita mendefinisikannya sebagai grid 3x3. Ini kerana kami hanya mempunyai enam item untuk mengisi grid. Sekiranya kita mempunyai tiga lagi, barisan terendah juga akan diisi.

Untuk meletakkan dan mengubah saiz item, kami akan menargetkannya dan menggunakan grid-columndan grid-rowsifat:

.item1 { grid-column-start: 1; grid-column-end: 4; } 

Apa yang kami katakan di sini adalah bahawa kami mahu item1 bermula pada baris grid pertama dan berakhir pada baris lajur keempat. Dengan kata lain, ia akan merangkumi keseluruhan baris.

Begini cara pemutarannya di skrin:

Adakah anda keliru mengapa kita mempunyai 4 baris lajur sedangkan kita hanya mempunyai 3 lajur? Lihat gambar ini, di mana saya telah melukis garis lajur dengan warna hitam:

Perhatikan bahawa kita sekarang menggunakan semua baris di grid. Ketika kami membuat item pertama merangkumi keseluruhan baris pertama, item tersebut menolak item yang lain.

Akhirnya, saya ingin menunjukkan cara yang lebih ringkas untuk menulis sintaks di atas:

Untuk memastikan anda memahami konsep ini dengan betul, mari susun semula item sedikit.

.item1 { grid-column-start: 1; grid-column-end: 3; } .item3 { grid-row-start: 2; grid-row-end: 4; } .item4 { grid-column-start: 2; grid-column-end: 4; } 

Begini rupa di halaman. Cuba bungkus kepala mengapa ia kelihatan seperti itu. Tidak semestinya terlalu sukar.

Dan itu sahaja!

Terima kasih untuk membaca! Nama saya Per Borgen, saya adalah pengasas bersama Scrimba - kaedah termudah untuk belajar membuat kod. Anda harus melihat bootcamp reka bentuk web responsif kami jika ingin belajar membina laman web moden pada tahap profesional.