Ikhtisar Kotak CSS

Tata letak kisi adalah sistem tata letak 2 dimensi baru di CSS, ini bukan kerangka kerja atau pustaka seperti yang biasa Anda lihat. Ini merupakan tambahan pada bahasa CSS untuk menyelesaikan masalah tata letak 2 dimensi dengan cepat dan mudah. Menggunakan Grid akan membantu dengan cepat memecahkan masalah tata letak yang sulit seperti ukuran, perataan, dan arsitektur desain. Masalah ini seringkali sangat rumit untuk digunakan float atau flexbox. Artikel ini membuka seri untuk mempelajari lebih lanjut tentang CSS Grid. Konten artikel disusun dari Mozilla dan CSS-Trick.

Isi dari seri artikel CSS Grid:

• Ikhtisar Kotak CSS
• Kotak CSS: Wadah
• Kotak CSS: Item
• CSS Grid: beberapa fungsi dan contoh praktis

Memperkenalkan

Kami sering menggunakan CSS untuk mengatur tata letak situs web, tetapi sebelum munculnya grid, ini seringkali sangat rumit dan membingungkan. Orang sering menggunakan CSS table untuk mengatur tata letak, floatposisi tetap dengan tag position Dan inline-block,.. dan harus kompatibel dengan berbagai ukuran layar. Grid CSS adalah salah satu modul CSS paling berguna yang menyelesaikan semua masalah ini dengan sederhana dan mudah.

Apa itu jaringan CSS?

Tata letak kisi adalah sistem tata letak 2 dimensi (x,y) yang digunakan dalam desain UI. Menurut definisi dari Mozilla, grid (kisi) adalah kombinasi garis horizontal dan vertikal yang berpotongan – satu grup mendefinisikan kolom dan grup lainnya mendefinisikan baris. Elemen dapat ditempatkan di grid, berdasarkan garis baris dan kolom ini.

Browser yang Kompatibel

Sebagian besar browser modern saat ini memiliki dukungan Grid. Jadi penerapan grid saat mendesain akan segera menjadi tren umum.

Beberapa istilah penting

Sebelum kita mulai mempelajari grid lebih dalam, kita perlu membiasakan diri dan memahami beberapa istilah penting yang akan digunakan dalam artikel. Pastikan Anda memahami istilah-istilah di bawah ini, karena sering kali menyesatkan. Saya juga tidak akan menyalin istilah-istilah ini untuk menyampaikan arti aslinya.

Wadah Kotak

Ini adalah elemen induk dengan atribut yang diterapkan display: grid atau display: inline-grid. Elemen container adalah elemen yang akan berisi item-item yang akan di layout pada contoh di bawah ini.

<div class="container">
  <div class="item item-0"></div>
  <div class="item item-1"></div>
  <div class="item item-2"></div>
</div>

Item Kisi

Elemen ini adalah elemen anak di dalam wadah. Pada contoh di bawah ini, elemen kelas item adalah item grid itu sendiri, dan sub-item ini bukan.

<div class="container">
  <div class="item">
    <p class="sub-item"></p>
  </div>
  <div class="item"></div>
</div>

Garis Kisi

Garis horizontal dan vertikal yang membagi tata letak kita menjadi baris dan kolom disebut garis grid. Pada contoh di bawah ini adalah garis kuning yang disebut garis kisi kolom.

Jalur Kisi

Grid Track didefinisikan sebagai jarak antara dua garis grid. Anda dapat menganggapnya sebagai kolom atau baris.

Sel Kotak

Grid Cell didefinisikan sebagai area antara dua garis grid vertikal dan horizontal yang berurutan. Grid Cell adalah unit dasar dari sistem grid.

Area Kisi

Grid Area adalah area yang dikelilingi oleh 4 garis grid. Area Grid dapat berisi 1 atau lebih sel grid.

Setelah menguasai beberapa pengetahuan dan konsep dasar tentang tata letak grid, kami mengundang Anda untuk mempelajari lebih lanjut wadah Dan item di bagian berikutnya.