Grid merupakan salah satu properti CSS yang digunakan untuk mengatur layout website. Layaknya Flexbox, Grid mampu membuat layout responsive dan fleksibel. Untuk membuat halaman web yang lebih powerful kita bisa mengkombinasikan kedua konsep ini. Grid digunakan untuk menangani layout yang harus dikontrol dari sisi kolom dan baris(multi-dimensi). Sedangkan didalam flexbox, hanya dapat mengatur satu dimensi antara kolom atau baris. Hal ini yang membuat grid cocok untuk mengatur layout dalam skala besar.
Terminologi atau istilah - istilah dalam CSS grid:
- Grid Container -> Merupakan element pembungkus grid, dapat didefinisikan dengan menuliskan: display: grid
- Grid Item -> Merupakan element child dari grid container, atau element -element yang berada 1 level di dalam grid container.
- Grid Line -> Merupakan garis vertical atau horizontal yang memisahkan grid menjadi beberapa bagian.
- Grid Cell -> Merupakan perpotongan antara baris dan kolom dalam grid.
- Grid Area -> Merupakan kumpulan dari beberapa cell yang membentuk kotak
- Grid Track -> Merupakan jarak antara 2 grid line, baik secara vertical maupun horizontal
- Grid Gap -> Merupakan jarak antara grid cell.
Properti - properti dalam CSS grid:
1. Container Properti
- grid-template-columns
- grid-template-rows
- grid-auto-columns
- grid-auto-rows
- grid-template-areas
- grid-template
- grid-column-gap
- grid-row-gap
- justify-items
- place-items
- align-items
- place-content
- align-content
- grid
2. Child Propertis
- grid-column
- grid-row
- grid-area
- grid-column-start
- grid-column-end
- grid-row-start
- grid-row-end
- justify-self
- align-self
- place-self
Contoh Penggunaan :
HTML
<body>
<main class="container">
<header>Header</header>
<aside>Side</aside>
<nav>Navbar</nav>
<section>Content</section>
<footer>footer</footer>
</main>
</body>
CSS
main{
width: 600px;
border: 2px solid #000;
margin: 50px auto;
padding: 5px;
box-sizing: border-box;
display: grid;
grid-template-areas: "header header"
"side content"
"nav content"
"footer footer";
grid-template-columns: 1fr 1.5fr;
grid-template-rows: 1fr 1fr 1.3fr;
}
header{
padding: 50px;
background-color: lightblue;
grid-area: header;
}
aside{
padding: 50px;
background-color: lightcoral;
grid-area: side;
}
nav{
padding: 50px;
background-color: lightcyan;
grid-area: nav;
}
section{
padding: 50px;
background-color: lightgreen;
grid-area: content;
}
footer{
padding: 10px;
background-color: lightslategray;
grid-area: footer;
}
Maka tampilannya akan seperti dibawa ini:
Sulfikardi
Web Design & Web Programming
Halo, saya seorang Web Developer yang terbiasa mengembangkan website
menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis
10 Jun 2021
Sulfikardi
2518
Web Design
