Cara menggunakan grid-column css

Modul Layout “CSS Grid” menawarkan sistem tata letak berbasis matriks dengan baris dan kolom, sehingga memudahkan untuk mengkonstruksi halaman web tanpa harus menggunakan cara konvensional, yaitu kombinasi “float”, “display”, “position”.

Table of Contents Show

Elemen-elemen Dari CSS Grid
CSS Property “grid-template”
CSS Property “grid-template-column”
CSS Property “grid-template-row”
CSS Property “grid-template-areas”
Apa itu grid template Column?
Apa itu grid pada CSS?
Apa itu grid dalam HTML?
Grid template areas untuk apa?

CSS properti dari grid ini sudah didukung oleh semua browser modern, termasuk Chrome, Opera, MS Edge dan Safari.

Elemen-elemen Dari CSS Grid

Suatu layout grid terdiri dari elemen induk dengan elemen-elemen anak di dalamnya.
Contohnya code HTML + CSS berikut ini, 1 element induk dengan 12 buah elemen anak di dalamnya:

<h1>Grid CSS bandung Web Agency Blog</h1>
<div class="grid-induk">
	<div class="grid-anak elemen-1">1</div>
	<div class="grid-anak elemen-2">2</div>
	<div class="grid-anak elemen-3">3</div>  
	<div class="grid-anak elemen-4">4</div>
	<div class="grid-anak elemen-5">5</div>
	<div class="grid-anak elemen-6">6</div> 
	<div class="grid-anak elemen-7">7</div>
	<div class="grid-anak elemen-8">8</div>
	<div class="grid-anak elemen-9">9</div>  
	<div class="grid-anak elemen-10">10</div>
	<div class="grid-anak elemen-11">11</div>
	<div class="grid-anak elemen-12">12</div> 
  </div>

Kode CSS grid berikut kita tambahkan, agar elemen induk menjadi kontainer grid dan elemen-elemen di dalamnya menjadi anak-anak grid:

.grid-induk {
  display: grid;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}
.elemen-1 {
  grid-column-start: 1;
  grid-column-end: 10;
  grid-row-start: 1;
  grid-row-end: 5;
}

Hasil layout yang dihasilkan dapat dilihat pada preview HTML web page ini.

CSS Property “grid-template”

CSS Property “grid-template-column”

Properti CSS “grid-template-column” menentukan jumlah kuantitas dari kolom di dalam suatu layout CSS grid, contoh:

// Buat layout kontainer grid 4 kolom :
.grid-induk {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

CSS Property “grid-template-row”

Properti CSS “grid-template-row” menentukan jumlah kuantitas dari baris di dalam suatu layout CSS grid, contoh:

// Buat layout kontainer grid dengan spesifik menentukan tinggi baris:
.grid-induk {
  display: grid;
  grid-template-rows: 50px 200px 400px 100px;
}

CSS Property “grid-template-areas”

Properti CSS “grid-template-areas” luasan daerah dalam layout grid. Kita dapat menamakan tiap elemen dalam grid-induk dengan property grid-area (dengan menandai dengan tanda petik) dan lalu mereferensikan nama-nama tersebut dalam property template-areas. Gunakan tanda titik-titik “.” untuk mereferensikan elemen grid tanpa nama, contoh:

// Buat elemen bernama "area-1" melangkahi 4 kolom dalam 6 kolom layout grid
.elemen-1 {
  grid-area: area-1;
}
.grid-induk {
  display: grid;
  grid-template-areas: 'area-1 area-1 area-1 area-1 . .';
  grid-gap: 10px;
  background-color: yellowgreen;
  padding: 10px;
}
.grid-induk > div {
  background-color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

<div class="grid-induk">
  <div class="elemen-1">area-1</div>
  <div class="elemen-2">2</div>
  <div class="elemen-3">3</div>  
  <div class="elemen-4">4</div>
  <div class="elemen-5">5</div>
  <div class="elemen-6">6</div>
  <div class="elemen-7">7</div>
  <div class="elemen-8">8</div>
  <div class="elemen-9">9</div>
  <div class="elemen-10">10</div>
  <div class="elemen-11">11</div>
  <div class="elemen-12">12</div>
</div>

Hasil layout yang dihasilkan dapat dilihat pada preview HTML web page ini.

Sehingga sebagai contoh, untuk membentuk sebuah layout web page, kode CSS grid dan struktur HTML berikut dapat dipakai:

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 caniuse.com () 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.

Pada artikel ini saya akan menjelaskan dasar-dasar menggunakan CSS Grid.

Dasar

CSS Grid layout akan diaktifkan pada elemen kontainer (bisa berupa tag div atau tag lainnya) dengan menyeting properti display sebagai berikut display: grid.

Kamu bisa meletakkan properti-properti Grid sebagai properti pada kontainer dan di tiap item yang ada didalam grid. Properti yang paling dasar pada grid adalah grid-template-columns dan grid-template-rows.

grid-template-columns and grid-template-rows

Dua properti diatas menentukan jumlah kolom dan baris pada grid, keduanya juga mengatur lebar tiap kolom dan baris. Kode dibawah menjelaskan sebuah grid dengan 4 kolom dengan lebar masing-masing 200px dan 2 baris dengan tinggi basing-masing 300px.

.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}

Berikut adalah contoh lainnya dengan 2 kolom dan 2 baris

.container {
display: grid;
grid-template-columns: 200px 200px;
grid-template-rows: 100px 100px;
}

Satuan Ukuran Auto

Mungkin juga pada beberapa kasus kamu akan mengatur tinggi baris dengan ukuran yang tetap seperti pada header dan footer. Namun apabila kamu ingin mengatur tinggi konten sesuai dengan isi, kamu bisa menggunakan auto :

.container {
display: grid;
grid-template-rows: 100px auto 100px;
}

Ukuran kolom dan baris yang berbeda

Pada contoh-contoh sebelumnya kita membuat grid menggunakan ukuran yang sama untuk tiap baris dan kolomnya. Kamu bisa menentukan ukuran yang berbeda untuk tiap baris dan kolom, untuk membuat desain yang berbeda:

.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
}

Contoh lainnya :

.container {
display: grid;
grid-template-columns: 10px 100px;
grid-template-rows: 100px 10px;
}

Mengatur jarak antara elemen

Secara otomatis, tidak ada jarak antara elemen-elemen. Kamu dapat mengatur jarak pada tiap elemen dengan properti dibawah:

grid-column-gap

grid-row-gap

Atau sintaks pendeknya grid-gap

Contohnya:

.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
grid-column-gap: 25px;
grid-row-gap: 25px;
}

Atau juga bisa disingkat:

.container {
display: grid;
grid-template-columns: 100px 200px;
grid-template-rows: 100px 50px;
grid-gap: 25px;
}

Elemen yang mencakup beberapa kolom dan baris

Setiap elemen pada grid memiliki opsi untuk melebarkan atau menggabungkan beberapa kolom maupun baris (mirip atribut colspan dan rowspan pada tabel) menjadi satu dengan menggunakan kode berikut ini:

grid-column-start

grid-column-end

grid-row-start

grid-row-end

Contoh:

.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item2 {
grid-column-start: 2;
grid-column-end: 4;
}
.item6 {
grid-column-start: 3;
grid-column-end: 5;
}

Value pada property tersebut berepresentasi dengan garis vertikal yang memisahkan tiap kolom, dimulai dari 1 hingga 5.

Hal yang sama juga bisa diterapkan untuk baris pada tiap elemen <code>grid-row-start</code> and <code>grid-row-end</code>.

Sintaks ringkas

Properti-properti grid-column-start dan grid-column-end dapat diringkas dalam satu baris kode menggunakan sintaks berikut :

grid-template-columns2

grid-template-columns3

Contoh:

.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;
}
.item2 {
grid-column: 2 / 4;
}
.item6 {
grid-column: 3 / 5;
}

Atau bisa juga dengan menggunakan span :

.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px;

}
.item2 {
grid-column: 2 / span 2;
}
.item6 {
grid-column: 3 / span 2;
}

Property Grid lainnya

Fraction

Menentukan lebar-tinggi pada baris maupun kolom dengan satuan ukuran yang tetap tidaklah ideal pada pembuatan layout website, terlebih pada website yang responsif.

Selain menggunakan satuan ukuran yang tetap, kita juga bisa menggunakan satuan fr, yaitu fraction. Contoh berikut adalah menggambarkan penggunaan fraction pada grid, memisahkan 3 grid dengan ukuran lebar yang sama, yaitu 1/3 dari keseluruhan total lebar grid.

.container {
grid-template-columns: 1fr 1fr 1fr;
}

Menggunakan persentase and rem

Kamu juga bisa menggunakan persentase, fractions, pixels, rem secara bersamaan:

.container {
grid-template-columns: 3rem 15% 1fr 2fr
}

Menggunakan repeat()

repeat() adalah fungsi spesial yang digunakan untuk menyingkat penulisan untuk nilai properti yang sama. Membutuhkan nilai properti dan berapa kali properti tersebut diulang.

.container {
grid-template-columns: repeat(4, 100px);
}

Kode diatas akan membuat 4 kolom dengan ukuran lebar yang sama, yaitu 100px.

Atau bisa juga menggunakan fraction:

.container {
grid-template-columns: repeat(4, 1fr);
}

Menentukan minimal lebar baris dan

Penggunaan umum: Pada lebar sidebar yang tidak menyusut lebih dari ukuran tertentu ketika kamu mengecilkan windows.

Berikut ini adalah contoh dimana kolom selalu memiliki ukuran ¼ dari total lebar grid dan ukurannya tidak akan lebih kecil dari 200px apabila windows dikecilkan.

.container {
grid-template-columns: minmax(200px, 3fr) 9fr;
}

Kamu juga bisa mengatur lebar minimal dengan auto:

.container {
grid-template-columns: minmax(auto, 50%) 9fr;
}

Atau lebar maksimal dengan auto:

.container {
grid-template-columns: minmax(100px, auto) 9fr;
}

Menyusun posisi elements menggunakan grid-template-areas

Secara default, elemen disusun sesuai dengan urutan pada struktur HTML. Dengan menggunakan grid-template-areas kamu bisa mengatur ulang posisinya dalam grid, tanpa perlu mengubah struktur HTML. Kamu juga menggabungkan beberapa kolom maupun baris tanpa perlu menggunakan grid-template-columns2 ataupun grid-template-columns3.

Seperti contoh dibawah ini:

<div class=”container”>
<main>
…
</main>
<aside>
…
</aside>
<header>
…
</header>
<footer>
…
</footer>
</div>
.container {
display: grid;
grid-template-columns: 200px 200px 200px 200px;
grid-template-rows: 300px 300px 300px;
grid-template-areas:
“header header header header”
“sidebar main main main”
“footer footer footer footer”;
}
main {
grid-area: main;
}
aside {
grid-area: sidebar;
}
header {
grid-area: header;
}
footer {
grid-area: footer;
}

Meski pada struktur HTML urutannya berbeda, elemen akan disusun sesuai dengan properti grid-template-areas.

Apa itu grid template Column?

Properti grid-template-columns mengatur jumlah kolom yang akan dibuat dengan mendefinisikan sebuah nilai yang dipisahkan oleh spasi. Artinya di sini kita akan memberikan kolom pertama jatah lebar 66% dan kolom setelahnya sisa lebar yang ada.

Apa itu grid pada CSS?

Penjelasan CSS Grid Secara sederhana CSS Grid adalah CSS yang dapat membagi kolom pada website menjadi beberapa bagian sesuai yang diinginkan, baik secara horizontal maupun vertikal.

Apa itu grid dalam HTML?

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 template areas untuk apa?

grid-template-areas digunakan untuk membuat template row & column, menggunakan nilai yang didefinisikan pada property grid-area dalam elemen grid item.