Cara menggunakan css grid responsive

Indonesian (Bahasa Indonesia) translation by Muhammad Hakim Almadani (you can also view the original English article)

Satu hal yang kita sebutkan, tapi belum untuk menutupi dengan benar dalam seri ini adalah daerah grid. Sejauh item grid kami memiliki masing-masing telah terkandung dalam sel tunggal grid, tetapi kita dapat mencapai lebih berguna layout dengan melanggar melampaui batas-batas. Mari kita lihat!

Mendefinisikan Grid daerah

Dalam contoh kita, kita akan menambahkan .item-5, .item-6 dan .item-7 kembali ke markup, bersarang mereka dalam .item-2.

Saat ini barang-barang kami hanya memiliki warna gaya, tetapi mari kita kembali ke apa yang kita pelajari dalam tutorial pertama dan menambahkan beberapa aturan grid-colomn dan grid-row, kali ini dengan sesuatu yang ekstra:

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1;
}

Dalam pernyataan ini grid-coloumn singkatan kami secara efektif menggunakan grid-coloumn-start dan grid-coloumn-end, mengatakan item untuk memulai pada grid baris 1 dan berakhir pada grid jalur 3.

Berikut adalah apa yang memberi kita; pertama item sekarang menyebar di seluruh dua sel, mendorong item lain tepat dan turun sesuai dengan Grid auto-penempatan algoritma.

Yang sama dapat dilakukan dengan baris, yang akan memberi kita lebih besar daerah di bagian atas kiri grid kami.

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}

cakupan sel

Menggunakan apa yang mungkin sintaks yang lebih mudah kita dapat beralih grid-coloumn-end untuk kata kunci span. Dengan span yang kita tidak terikat untuk menentukan mana daerah berakhir, bukannya menentukan berapa banyak trek item harus tersebar di:

.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

Ini memberikan hasil akhir yang sama, tetapi jika kita ingin mengubah mana kita inginkan item untuk memulai kami tidak lagi akan berkewajiban untuk mengubah akhir.

Dalam demo berikut Anda dapat melihat kami telah mengosongkan tata letak dengan menghapus empat item. Kami telah menyatakan posisi pada dua item: yang pertama mencakup dua kolom dan dua baris, sementara keempat dimulai pada kolom 3, baris 2, dan rentang ke bawah di dua lagu:

Sisa barang mengisi ruang yang tersedia secara otomatis. Ini menyoroti sempurna bagaimana tata letak kotak tidak harus mencerminkan urutan sumber elemen.

Catatan: ada banyak situasi di mana urutan sumber benar-benar harus mencerminkan presentasi-jangan lupa tentang aksesibilitas.

memberi nama Area

Menggunakan metode penomoran kami telah dijelaskan sejauh ini bekerja dengan baik, tetapi daerah Grid Template dapat membuat mendefinisikan layout bahkan lebih intuitif.

Secara khusus, mereka memungkinkan kita untuk nama daerah pada grid. Dengan bidang-bidang yang bernama, kita bisa referensi mereka (bukan nomor baris) untuk posisi barang-barang kami. Mari kita tetap berpegang pada demo kami saat ini untuk saat ini dan menggunakannya untuk membuat diri kasar halaman tata letak terdiri dari:

• header
• konten utama
• Sidebar
• footer

Kita mendefinisikan daerah pada grid container, hampir seolah-olah kita menggambar mereka:

.grid-1 {
    /* ..existing styles */
    
    grid-template-areas:    "header header header"
                            "main main sidebar"
                            "footer footer footer";
}

Posisi item

Sekarang kita mengalihkan perhatian kita ke item, membolos grid-coloumn dan grid-row aturan mendukung grid-area:

.item-1 {
  background: #b03532;
  grid-area: header;
}
.item-2 {
  background: #33a8a5;
  grid-area: main;
}
.item-3 {
  background: #30997a;
  grid-area: sidebar;
}
.item-4 {
  background: #6a478f;
  grid-area: footer;
}

Item pertama kami ditempatkan ke bagian header, membentang di seluruh semua tiga header kolom. Item kedua kami diberikan kawasan konten utama, ketiga menjadi sidebar kami, dan keempat kami footer. Dan ini tidak perlu mengikuti sumber Orde baik-.item-4 bisa dengan mudah diposisikan di daerah header.

Seperti yang Anda lihat, hal ini membuat meletakkan halaman jauh lebih mudah. Bahkan, sementara kita dalam mood untuk visual mewakili grid kami, mengapa tidak pergi lebih jauh dan menggunakan emojis?!

Bersarang Grid daerah

Suatu halaman web akan berisi semua jenis komponen bersarang, jadi mari kita lihat bagaimana yang bekerja dengan Grid.

Ketika kami menyatakan container grid display: grid; hanya keturunan yang langsung menjadi grid item. Kami menambahkan unsur-unsur anak konten akan sama sekali tidak terpengaruh oleh Grid kecuali kita secara khusus mengatakan sebaliknya.

Dalam contoh kita, kita akan menambahkan .item-5, .item-6 dan .item-7 kembali ke markup, bersarang mereka dalam .item-2.

<section class="grid-1">
  <div class="item-1">1</div>
  
  <div class="item-2">
    <div class="item-5">5</div>
    <div class="item-6">6</div>
    <div class="item-7">7</div>
  </div>
  
  <div class="item-3">3</div>
  <div class="item-4">4</div>
</section>

Jadi sekarang kita perlu menyatakan kami .item-2 juga wadah grid, menyiapkan para grid dengan dua kolom dan dua baris.

  display: grid;
  
  grid-template-columns: 1fr 30%;
  grid-template-rows: auto auto;
  grid-gap: 20px;
  
  grid-template-areas: "header header"
                       "article sidebar";

Kami dapat menggunakan nama "header", "artikel", dan "sidebar" lagi di sini; ada tidak ada kebingungan, karena segala sesuatu tetap dalam konteks. Daerah grid ini hanya berlaku untuk grid dalam .item-2.

Kesimpulan

Untuk meringkas apa yang kita telah berbicara tentang:

1. grid-coloumn menawarkan kita cara singkatan yang mendefinisikan mana item dimulai dan berakhir.
   
2. Kami juga dapat menggunakan kata kunci span untuk membuat aturan kita lebih fleksibel.
3. grid-template-areas memberi kita kekuatan untuk nama bidang grid kami (bahkan menggunakan emojis jika mood membawa kita).
   
4. Kami juga dapat sarang grid dengan menyatakan grid item sebagai display: grid; dan mengikuti proses yang sama.

Sekali lagi kami telah belajar beberapa aspek yang berguna dari CSS Grid Layout spec, dan kita sudah lebih dekat dan lebih dekat ke dunia nyata penggunaan kasus-kasus! Selanjutnya tutorial kita akan melihat beberapa layout yang lebih kompleks dan melihat bagaimana responsif desain cocok ke dalam persamaan.

Sumber-sumber yang berguna

• Apakah saya menyebutkan ini sudah? ikuti @rachelandrew

Apa itu FR pada CSS?

Apa itu grid dalam HTML?

Apa itu grid template Columns?