Pengenalan Apa Itu CSS Grid Layout

Di artikel kali ini saya akan membahas mengenai CSS tetapi bukan css yang lazimnya kita gunakan melainkan Pengenalan Apa Itu CSS Grid Layout , dar judul artikelnya untuk yang belum pernah dengar saya akan menjelaskanya.

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

Contoh di bawah ini menunjukkan grid kolom tiga kolom dengan baris baru yang dibangun minimal 100 piksel dan maksimal auto. Item telah ditempatkan ke grid menggunakan penempatan dengan 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 mengenai Pengenalan Apa Itu CSS Grid Layout , bagi berikutnya saya akan membahas lebih pada mengenai CSS GRID

Sumber https://kursuswebsite.org