Property Grid Pada CSS Grid Layout

Setelah sebelumnya saya telah membahas mengenai apa itu css grid nah bagi lanjutanya saya akan membahas mengenai berbagi maca property yang di gunakan di css grid yaitu salah satunya Property Grid Di CSS Grid Layout.

Properti CSS grid ialah properti singkat yang menentukan segala properti grid eksplisit (grid-template-rows, grid-template-columns, dan grid-template-areas), segala properti grid implisit (grid-auto-rows, grid -auto-columns, dan grid-auto-flow), dan gutter (grid-column-gap dan grid-row-gap) pada satu deklarasi

/* <'grid-template'> values */
grid: none;
grid: a 100px b 1fr;
grid: [linename1] a 100px [linename2];
grid: a 200px b min-content;
grid: a minmax(100px, max-content) b 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <'grid-template-rows'> /
   [ auto-flow  dense? ] <'grid-auto-columns'>? values */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow  dense? ] <'grid-auto-rows'>? /
   <'grid-template-columns'> values */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* Global values */
grid: inherit;
grid: initial;
grid: unset;

Saya akan memberikan contoh penggunaanya secara sederhana:

HTML Content

<div id=container>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS Grid :

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

Kalau di jalankan karenanya akan mempunyai hasil selaku berikut:

Sumber https://kursuswebsite.org