Pengenalan Apa Itu CSS Grid Layout

Pada artikel kali ini saya akan membahas tentang CSS tetapi bukan css yang biasa kita pakai melainkan Pengenalan Apa Itu CSS Grid Layout , dar judul artikelnya bagi yang belum pernah dengar saya akan menjelaskanya.

 Secara penjelasan sederhana CSS grid adalah CSS yang dapat melakukan pembagian kolom GRID untuk mengatur layoutnya, ini hampir mirip seperti bootstrap yang menggunakan sistem grid tetapi ada yang berbeda CSS GRID  unggul dalam membagi halaman menjadi wilayah utama, atau menentukan hubungan dalam hal ukuran, posisi, dan lapisan, di antara bagian-bagian kontrol yang dibangun dari HTML primitif . Seperti tabel, tata letak grid memungkinkan penulis untuk menyelaraskan elemen menjadi kolom dan baris. Namun, lebih banyak layout mungkin atau lebih mudah dengan grid CSS daripada tabel. Sebagai contoh, elemen anak-anak dari wadah grid dapat memposisikan diri mereka sehingga mereka benar-benar tumpang tindih dan berlapis, mirip dengan elemen yang diposisikan CSS.

Contoh di bawah ini menunjukkan grid kolom tiga kolom dengan baris baru yang dibuat minimal 100 piksel dan maksimal auto. Item telah ditempatkan ke grid menggunakan penempatan berbasis garis

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

* {box-sizing: border-box;}
.wrapper {
  max-width: 940px;
  margin: 0 auto;
}

.wrapper > div {
  border: 2px solid rgb(233,171,88);
  border-radius: 5px;
  background-color: rgba(233,171,88,.5);
  padding: 1em;
  color: #d9480f;
}.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two { 
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Oke baiklah itu tadi artikel tentang Pengenalan Apa Itu CSS Grid Layout , untuk selanjutnya saya akan membahas lebih dalam tentang CSS GRID