CSS GRID

CSS Grid merupakan salah satu fitur baru di CSS 3 yang fungsi utamanya adalah mengatur layout pada website. Meskipun penggunaannya belum sepenuhnya kompatibel di semua browser, namun CSS Grid diprediksi akan menjadi salah satu fitur penting di masa depan untuk mengatur layout halaman pada HTML responsif.

CSS Grid merupakan cara baru dalam menyusun layout menggunakan CSS, sebelumnya orang banyak menggunakan float. Lihat informasi CSS Grid pada w3schools untuk mengecek kompatibilitas dengan browser yang kamu gunakan. Saat ini, hampir semua browser kompatibel kecuali IE, ini mencakup 92% pengguna di seluruh dunia.

Selain CSS Grid, untuk mengatur layout website, juga bisa menggunakan Flexbox. CSS Grid bukanlah kompetitor CSS Flexbox. Keduanya saling beroperasi dan berkolaborasi untuk menyusun layout kompleks, hal ini karena sistem CSS Grid bekerja secara 2 dimensi (Rows dan Columns) sedangkan Flexbox hanya berkerja secara 1 dimensi (Rows atau Columns).

Dulu jauh sebelum ada Grid dan Flexbox, menyusun layout dalam sebuah website adalah pekerjaan yang kompleks karena kita harus repot mengatur (table layout, float, clearfix, display: table). Sekarang, dengan Grid dan Flexbox, menyusun layout pada website responsif dapat dilakukan dengan mudah.

Berikut contonya:

Container
Header
Aside
Content-1
Content-2
Content-3
Footer
Item
Body

.container {
display: grid;
width: 750px;
height: 600px;
grid-template-columns: 200px 1fr 1fr;
grid-template-rows: 100px 1fr 1fr 100px;
grid-gap: 1rem;
grid-template-areas:
"header header header"
"aside content-1 content-1"
"aside content-2 content-3"
"footer footer footer";
}

---

.header {
background-color: #1EAAFC;
background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

---

.aside {
background-image: linear-gradient(203deg, #3EDFD7 0%, #29A49D 90%);
}

---

.content-1,
.content-2,
.content-3 {
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
}

---

.footer {
background-color: #6C52D9;
background-image: linear-gradient(160deg, #6C52D9 0%, #9B8AE6 127%);
}

---

.item {
background-color: #1EAAFC;
background-image: linear-gradient(130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
color: #ffffff;
border-radius: 4px;
border: 6px solid #171717;
align-items: center;
font-size: 18px;
font-weight: bold;
}

---

body {
background-color: #3b404e;
display: flex;
justify-content: center;
padding: 10px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}