Sebelumnya kita pernah berkutat dengan table, float, inline-block, dan Flexbox untuk membuat sebuah grid layout di web. But now, let’s give the CSS Grid a shot!

What’s CSS Grid?

CSS Grid adalah CSS layout module yang akan memudahkan kita dalam membuat layout dua dimensi di web dengan mendefinisikan baris dan kolom.

What’s the difference with Flexbox?

If you only need to define a layout as a row or a column, and you would like the flexibility to respond to the content of that row then you probably want flexbox. If you want to define a grid and fit content into it in two dimensions — you need grid.

Rachel Andrew

Intinya, ketika ingin lebih efisien dalam membuat layout dua dimensi (baris dan kolom), maka disarankan untuk menggunakan CSS Grid. Namun, jika hanya untuk membuat layout satu dimensi (baris atau kolom), maka gunakan Flexbox.

So which is better?

Relatif, karena baik CSS Grid maupun Flexbox dapat menjadi silver bullet dalam suatu studi kasus yang berbeda. Atau bisa juga mengkombinasikan keduanya, CSS Grid untuk mendefinisikan layout, dan Flexbox untuk mengatur alignment konten di dalamnya. And for the sake of cross-browser compatibility, Flexbox dapat dimanfaatkan sebagai fallback untuk CSS Grid.

Sehingga, yang lebih baik itu adalah mengkombinasikan keduanya untuk menghasilkan layout yang magical dan powerful 😉

Terminology

Grid Container & Grid Item

Dalam membuat sebuah grid, dibutuhkan grid container (parent element) yang nantinya akan menampung atau berisikan seluruh grid item (child element) di dalamnya.

grid itemgrid itemgrid itemgrid itemgrid itemgrid itemgrid container

Untuk mendeklarasikan grid container di CSS, cukup dengan set properti display dengan nilai grid.

.grid-container {
  display: grid | inline-grid | subgrid;
}
  • grid — menghasilkan block-level grid container
  • inline-grid — menghasilkan inline-level grid container
  • subgrid — menghasilkan grid container yang juga merupakan grid item (di grid bersarang)

Grid Line

Grid line adalah garis vertikal dan horizontal yang membagi grid container menjadi beberapa bagian. Grid line terdiri dari dua set garis yang mendefinisikan kolom dan baris.

1231234row linescolumn lines

Secara default, setiap grid line diwakili sebuah nomor yang digunakan untuk menentukan posisi dan luas suatu grid item di dalam grid container.

1231234acbedfrow linescolumn lines 
.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px;
}

.a {
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}
.b {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}
.c {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}
.d {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}
.e {
  grid-column: 3 / 4;
  grid-row: 1 / 2;
}
.f {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

Selain menggunakan nomor, grid line juga dapat diwakili oleh sebuah inisialisasi nama. Contohnya seperti column line 1 dideklarasikan dengan cl1, column line 2 dengan cl2, column line 3 dengan cl3, dan column line 4 dengan cl4.

.grid-container {
  display: grid;
  grid-template-columns: [cl1] 100px [cl2] 100px [cl3] 100px [cl4];
  grid-template-rows: 100px 100px;
}
.a {
  grid-column-start: cl1;  /* artinya, posisi dan luas grid item ini adalah dari */
  grid-column-end: cl3;    /* column line 1 [cl1] s.d. column line 3 [cl3] */
  grid-row-start: 1;
  grid-row-end: 2;
}

.b {
  grid-column-start: cl1; 
  /* grid-column-end tidak dideklarasikan */
  grid-row-start: 2;
  grid-row-end: 3;
}

Jika properti grid-column-end atau grid-row-end tidak dideklarasikan di dalam suatu grid item, maka otomatis luas grid item tersebut hanya satu jangkauan column line atau row line berdasarkan grid-column-start atau grid-row-start yang telah dideklarasikan. Berlaku juga sebaliknya.

1231234abcolumn linesrow lines

Lalu bagaimana jika baik properti grid-column-start dan grid-column-end atau grid-row-start dan grid-row-end tidak dideklarasikan? 😉

Grid Track

Grid track adalah ruang yang diapit oleh dua grid line yang berdampingan. Suatu grid track disebut grid column jika diapit oleh dua grid line kolom (vertikal), sedangkan yang diapit oleh dua grid line baris (horizontal) disebut grid row.

Di bawah ini merupakan contoh grid track (grid column) di antara grid line kolom 2 dan 3.

1231234

Grid Column & Grid Row

Untuk menentukan jumlah grid column dan grid row berikut masing-masing ukurannya di dalam suatu grid container, gunakan properti grid-template-columns dan grid-template-rows.

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px; /* artinya 3 kolom dengan ukuran 100px */
  grid-template-rows: 100px 100px;          /* artinya 2 baris dengan ukuran 100px */
}

Grid Cell

Grid cell adalah ruang yang dikelilingi oleh empat grid line (dua grid line kolom dan baris) yang saling terhubung. Di bawah ini merupakan contoh grid cell yang terletak di antara grid line kolom 3 dan 4 dengan grid line baris 2 dan 3.

1231234

Grid Area

Konsep grid area ini sebenarnya mirip seperti grid cell, bedanya adalah bahwa grid area ini dapat terdiri lebih dari satu ruang yang dikelilingi oleh empat grid line (dua grid line kolom dan baris) yang saling terhubung.

1231234

Selain menentukan posisi dan luas suatu grid item dengan memanfaatkan nomor ataupun nama yang mewakili setiap grid line, grid area pun dapat dimanfaatkan untuk hal serupa.

<div class="grid-container">
  <div class="grid-item a">header</div>
  <div class="grid-item b">content</div>
  <div class="grid-item c">sidebar</div>
  <div class="grid-item d">footer</div>
</div>

Kita dapat menggunakan properti grid-area dengan inisialisasi nama untuk mendeklarasikan nama grid area di setiap grid item.

.a {
  grid-area: header;
}
.b {
  grid-area: content;
}
.c {
  grid-area: sidebar;
}
.d {
  grid-area: footer;
}

Setelah seluruh grid item telah memiliki nama grid area, maka gunakan properti grid-template-areas untuk menentukan posisi dan luas dari setiap grid area tersebut.

.grid-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: "header header header"     /* | header  | header  | header  | */
                       "content content sidebar"  /* | content | content | sidebar | */
                       "footer footer footer";    /* | footer  | footer  | footer  | */
}
headercontentsidebarfooter

Resources

Karena tulisan ini hanya membahas terminologi dari CSS Grid saja, sehingga masih banyak konsep, aturan, properti, dan lainnya dari CSS Grid yang tidak dibahas di sini. Berikut beberapa resources bagi yang tertarik untuk mendalami CSS Grid.