Tata Letak Grid CSS: Sebuah Panduan Ringkas

Bagaimana kita mendapatkan tata letak di web telah berubah, dan di garis depan perubahan adalah Tata Letak Grid CSS. Panduan ringkas ini akan melewatkan detail dan perbedaan kecil, bukannya membuat Anda terjebak dalamnya, sekarang.

Browser Anda

tata Letak Grid CSS (dikenal teman-temannya sebagai "Grid") adalah karya dalam proses, dan dengan demikian Anda akan menemukan dukungan browser untuknya cukup lemah saat ini. Untuk mulai menggunakannya sekarang, Anda sebaiknya menggunakan IE11 (meskipun ini menggunakan versi yang lebih tua dari spec), Microsoft Edge, Chrome Canary atau Firefox Nightly.

Mungkin pendekatan yang paling mudah adalah menyalakan fitur Experimental Web Platform di Chrome: chrome://flags/#enable-experimental-web-platformfeatures.

Menyiapkan Grid

Grid memungkinkan kita untuk menyelaraskan elemen pada halaman, berdasarkan area yang dibuat oleh pemandu.

Terminologi

Pada yang paling sederhana panduan ini, atau garis grid, membingkai trek grid horisontal dan vertikal. Trek grid berfungsi sebagai baris dan kolom, dengan gutter antara mereka. Dimana trek grid horisontal dan vertikal berpotongan, kami mendapatka sel, seperti yang kita gunakan dengan tabel. Ini adalah syarat-syarat penting untuk dipahami.

Dalam gambar di bawah ini Anda akan melihat grid demo, menampilkan:

1. garis grid
2. kolom
3. baris
4. sel

Untuk tata letak grafis, mungkin terlihat lebih akrab jika kita menggunakan grid yang sama persis, tapi memampatkan beberapa trek untuk memberi kita gutter antara isi area.

1. gutter

Ada satu istilah terakhir yang perlu kita jelaskan sebelum berpindah:

1. area grid

Area grid adalah bagian dari grid kami yang dipagari oleh garis empat grid; hal ini dapat terdiri dari sejumlah sel grid.

Waktunya membangun grid ini di browser! Mari kita mulai dengan beberapa markup.

Markup Grid

Untuk menciptakan grid di atas, kita membutuhkan sebuah elemen kontainer; apapun yang Anda suka:

1

<section class="grid-1">

2

3

</section>

Di dalamnya kita akan menempatkan sembilan elemen anak.

1

<section class="grid-1">

2

  <div class="item-1">1</div>

3

  <div class="item-2">2</div>

4

  <div class="item-3">3</div>

5

  <div class="item-4">4</div>

6

  <div class="item-5">5</div>

7

  <div class="item-6">6</div>

8

  <div class="item-7">7</div>

9

  <div class="item-8">8</div>

10

  <div class="item-9">9</div>

11

</section>

Fork pena starter ini jika Anda ingin mengikutinya bersama. Saya telah menambahkan beberapa style dasar untuk membedakan visual setiap item grid.

Aturan Grid

Pertama kita perlu menyatakan bahwa elemen kontainer kita adalah grid menggunakan nilai baru untuk properti display:

1

.grid-1 {

2

  display: grid;

3

}

Benar, itu mudah sekali. Selanjutnya kita perlu mendefinisikan grid kita, dengan menyatakan berapa banyak trek grid yang akan dimiliki, baik secara horizontal maupun vertikal. Kita melakukannya dengan properti grid-template-columns dan grid-template-rows:

1

.grid-1 {

2

  display: grid;

3

  grid-template-columns: 150px 20px 150px 20px 150px;

4

  grid-template-rows: auto 20px auto 20px auto;

5

}

Anda akan melihat lima nilai untuk masing-masing. Nilai grid-template-columns menyatakan "kolom pertama harus lebar 150px, yang kedua 20px, yang ketiga 150px", dan sebagainya di lima kolom, lebih atau kurang sesuai dengan gambar dari bendera Finlandia itu. Nilai lima grid-template-rows menyatakan sesuatu yang serupa. Masing-masing akan auto secara default, mengambil tinggi dari konten, tapi kami ingin menjadi lebih tepat dengan gutter kami, memberi mereka tinggi 20px, jadi kita perlu mendaftar semua lima baris.

Masing-masing item kami telah secara otomatis ditetapkan area grid dalam urutan kronologis. Hal ini tidak buruk, tapi apa yang telah terjadi untuk item 2, 4 dan 7? Mereka terjatuh ke dalam gutter vertikal, karena gutter kami adalah trek grid sah dan itulah dimana layout grid akan menganggap mereka miliknya jika kita tidak lebih spesifik. Saatnya untuk menambahkan beberapa aturan untuk item-item kami.

Aturan Item

Sintaks yang tersedia bagi kita saat ini bisa sangat rumit, tetapi kita akan membuat hal-hal semudah mungkin dengan menggunakan apa sebenarnya properti singkatan. Kita akan mulai dengan item pertama, menyatakan bahwa kita ingin untuk mulai di grid-column 1 dan grid-row 1:

1

.item-1 {

2

  grid-column: 1;

3

  grid-row: 1;

4

}

Item kami akan secara otomatis mengisi ruang minimum yang tersedia antara garis grid. Item kedua kami sedikit kurang jelas. Kami juga ingin ini dimulai pada grid-row 1, tapi kami ingin melewatkan grid-column 2 dan bukannya mulai pada grid-column 3. Kolom 2 akan dibiarkan kosong untuk membentuk gutter.

1

.item-2 {

2

  grid-column: 3;

3

  grid-row: 1;

4

}

Kami terus seperti ini, melompat-lompati kolom dan baris gutter, akhirnya menyelesaikan dengan item kesembilan kami:

1

.item-9 {

2

  grid-column: 5;

3

  grid-row: 5;

4

}

Kesimpulan

Itu saja, Anda sudah siap dan berjalan dengan Grid! Mari kita rekap empat langkah esensial:

1. Buat sebuah elemen kontainer, dan deklarasi display: grid;.
2. Menggunakan kontainer yang sama untuk menentukan trek grid menggunakan properti grid-template-columns dan grid-template-rows.
3. Tempatkan elemen anak dalam kontainer.
4. Tentukan mana setiap anak berada di grid dengan menyatakan grid-column and grid-row.

Di bagian selanjutnya dari seri ini kita akan melihat lebih dalam sintaks Grid, memperbaiki cara kita mendefinisikan gutter kami, mengeksplorasi tata letak fleksibel, unit fr, fungsi repeat(), dan membawa grid sederhana kami lebih jauh. Sampai jumpa di sana!

Sumber Daya Berguna Grid

• @rachelandrew Anda cukup mengikuti Rachel Andrew.