💅🏾 🍮 👨🏽‍🤝‍👨🏼 CSS Grid jelas untuk semua orang 📿 🍙 ◀️

Apa itu Grid?

Grid adalah kumpulan garis horizontal dan vertikal yang tumpang tindih - satu kumpulan mendefinisikan kolom dan yang lainnya mendefinisikan baris. Item dapat ditempatkan di grid, menurut baris dan kolom.

Dukungan browser

Dukungan browser mencapai 94% pada tahun 2020

Wadah kotak

Kami membuat wadah grid dengan mendeklarasikan display: grid atau display: inline-grid pada elemen. Setelah kita melakukan ini, semua turunan langsung dari elemen ini menjadi item petak .

<body>
 <div class="row">
  <div class="row__item header">
   <h1>Header</h1>
  </div>
  <div class="row__item nav">
   <h1>Navbar</h1>
  </div>
  <div class="row__item article">
   <h1>Article</h1>
  </div>
  <div class="row__item ads">
   <h1>Ads</h1>
  </div>
 </div>
</body>

.row {
 display: grid;
 margin: auto;
 grid-template-rows: 60px 1fr ;
 grid-template-columns: 20% 1fr 15%;
 grid-gap: 10px;
 width: 1000px;
 height: 1000px;
 justify-items: center;
 justify-content: space-between;
 grid-template-areas:
 "header header header"
 "nav article ads"; 
}

grid-template-row adalah properti CSS yang mendefinisikan nama garis dan jalur ukuran dari fungsi baris grid.

Properti CSS grid-rowmenentukan baris mana dalam tata letak kisi tempat elemen akan mulai, berapa banyak baris yang akan ditempati elemen, atau pada baris mana elemen akan diakhiri dalam tata letak kisi. Ini adalah properti singkatan untuk properti grid-row-start dan grid-row-end .

Properti CSS grid-gapadalah properti singkatan untuk grid-row-gapdan grid-column-gapyang mendefinisikan selokan antara baris dan kolom kisi.

Properti grid-template-areasmendefinisikan templat kisi dengan merujuk ke nama area, yang disetel menggunakan properti area kisi .

Mengulangi nama area menyebabkan konten menjangkau sel tersebut. Titik berarti sel kosong. Sintaksnya sendiri memberikan visualisasi dari struktur grid.

Dengan properti, grid-areakita dapat menetapkan masing-masing area ini namanya sendiri. Area penamaan belum membuat tata letak apa pun, namun kami sekarang telah menamai area yang dapat kami gunakan di dalamnya.

.header{
grid-area: header;
}
.nav{
grid-area: nav;
}
.article{
grid-area: article;
}
.ads{
grid-area: ads;
}

Buat template situs dengan CSS Grid:

Mengganti template

Anda dapat mengubah template hanya dengan mengalokasikan kembali area grid di grid-template-areas.

Jadi jika kita berubah menjadi ini:

grid-template-areas:
 "nav header header"
 "nav article ads"; 
}

Kemudian, sebagai hasilnya, kita mendapatkan template berikut:

Kisi dengan kueri media

Salah satu kekuatan grid adalah Anda dapat membuat template yang sangat berbeda dalam hitungan detik.

Ini membuat CSS Grid ideal untuk kueri media. Kita cukup menetapkan ulang nilai dalam grafik ASCII dan membungkus hasilnya dalam kueri media akhir.

@media all and (max-width: 575px) {
.row {
grid-template-areas:
"header"
"article"
"ads"
"nav";
grid-template-rows: 80px 1fr 70px 1fr ;
grid-template-columns: 1fr;
}
}

Akibatnya, kita mendapatkan:

Jadi, intinya adalah untuk menetapkan kembali nilai-nilai di properti grid-template-areas.

Kesimpulan

Pada artikel ini, kita telah membahas bagian puncak gunung es CSS Grid Layout. Terkadang sulit untuk mempercayai hal-hal yang dapat dilakukan CSS Grid. Ini adalah pemutusan semua pola. Dan saya menyukainya.

Saya menyarankan Anda untuk memperhatikan spesifikasi ini dan meluangkan waktu Anda untuk mempelajarinya. Percayalah, di masa depan ini pasti akan berguna dan tidak masalah jika Anda menulis di React, Angular, Vue (masukkan milik Anda sendiri). Grid ada di sini untuk waktu yang lama.

CSS Grid jelas untuk semua orang