Apa itu CSS Display Grid dan cara penggunaannya.

CSS Display Grid atau grid,adalah sebuah layout dua dimensi berbasis grid,dengan rows dan columns.Grid adalah modul css pertama yang dibuat secara spesifik sebagai solusi untuk masalah layout.Grid mempermudah dalam membuat desain page web,tanpa harus menggunakan floats dan positioning.Ada beberapa hal penting yang harus dipahami.

<div class="container">
        <div class="item">
		<p></p>
</div>
        <div class="item"></div>
        <div class="item"></div>
</div>

• Grid Container:
  Sebuah element yang memiliki display: grid,dan membungkus dan menjadi parent dari semua grid item.Sebagai contoh container adalah sebuah grid container.
• Grid Item:
  Anak dari sebuah grid container.Dari markup di atas item merupakan grid item,namun element p tidak termasuk sebagai grid item,karena element yang berada di dalam grid item tidak termasuk sebagai grid item.
• Grid Line:
  Sebuah garis pemisah yang membuat struktur dari sebuah grid,garisnya bisa berupa garis vertikal(column grid lines) atau horizontal(row grid lines).
• Grid Cell:
  Sebuah jarak dua row(baris) yang berdekatan dan dua column(kolum) grid lines.
• Grid Track:
  Sebuah jarak dua garis grid.Kamu bisa memikirkan itu sebagai kolom atau baris dari sebuah grid.
• Grid Area:
  Total ruang yang dikelilingi oleh 4 garis grid.Sebuah grid area bisa tersusun dari semua nomor grid cells.
• Grid juga memiliki properti-properti,properti grid terdiri dari dua bagian besar,yaitu properti untuk parent(Grid Container) dan properti untuk Children(Grid Items).Selain itu grid juga memiliki Special Unit dan Functions.

Properti untuk parent(Grid Container) yaitu:

• Display: Mendefinisikan sebuah element menjadi grid container dan menetapkan konteks grid baru untuk isinya.Properti display untuk grid memiliki dua value yaitu:  
  • grid : menghasilkan sebuah block level grid
  • inline-grid: menghasilkan sebuah inline-level grid
    
    Copy Code Copied Use a different Browser

    
    .grid-container {
    	   display: grid | inline-grid;
    }
    
    

• grid-template-column dan grid-template-rows: Mendefinisikan kolom dan baris dari sebuah grid dengan dipisahkan oleh jarak yang bernilai.Nilai merepresentasikan track size,dan garis diantaranya merepresentasikan garis grid.
• grid-template-areas: Mendefinisikan grid template berdasarkan referensi nama dari sebuah grid area yang spesifik dengan grid-area property.
• grid-template: Cara singkat untuk mengatur grid-template-rows,grid-template-columns,dan grid-template-areas dalam satu deklarasi
  • Values: 
    • none: mengatur ketiga properti ke value awalnya.
    • grid-template-rows / grid-template-columns: mengatur grid-template-columns dan grid-template-rows ke nilai spesifik,masing-masing,dan mengatur grid-template-areas ke none.

• column-gap,row-gap,grid-column-gap,grid-row-gap: Ukuran spesifik sebuah garis grid.Bisa dianggap seperti mengatur lebar diantara kolom/baris.
• gap, grid-gap: Cara singkat untuk mengatur column-gap dan row-gap.Hanya saja langsung mengatur keduanya secara bersamaan.
• justify-items: Mensejajarkan grid item secara horizontal,nilai ini akan diterapkan ke seluruh grid item yang berada di dalam grid-container.
  • Values: 
    • start: mensejajarkan item agar rata dengan ujung awal dari sel mereka secara horizontal
    • end: mensejajarkan item agar rata dengan ujung akhir dari sel mereka secara horizontal
    • center: mensejajarkan item ditengah sel mereka secara horizontal
    • stretch: mengisi penuh width sel mereka(ini adalah settingan default)

• align-items: Mensejajarkan grid item secara vertikal,nilai ini akan diterapkan ke seluruh grid item yang berada di dalam grid-container.
  • Values: 
    • start: mensejajarkan item agar rata dengan ujung awal dari sel mereka secara vertikal
    • end: mensejajarkan item agar rata dengan ujung akhir dari sel mereka secara vertikal
    • center: mensejajarkan item ditengah sel mereka secara vertikal
    • stretch: mengisi penuh height sel mereka(ini adalah settingan default)
    • baseline: mensejajarkan item dengan garis dasar teks

• place-items: Mengatur align-items dan justify-items property hanya dengan sekali deklarasi.Value yang dimiliki pun sama dengan align-items dan justify-items.
  
• justify-content: Mensejajarkan seluruh grid secara horizontal.
  • Values:
    • start: mensejajarkan grid agar rata dengan ujung awal grid container
    • end: mensejajarkan grid agar rata dengan ujung akhir grid container
    • center: mensejajarkan grid di tengah grid container
    • stretch: meresize grid item agar grid bisa mengisi penuh width grid container
    • space-around: menempatkan jumlah ruang yang merata disetiap grid item,dengan ukuran setangan ruang kosong di ujung jauh
    • space-between: menempatkan jumlah ruang yang merata disetiap grid item,dengan tanpa adanya ruang kosong di ujung jauh
    • space-evenly: menempatkan jumlah ruang yang merata disetiap grid item,termasuk di ujung yang jauh

• align-content: Mensejajarkan seluruh grid secara vertikal.
  • Values:
    • start: mensejajarkan grid agar rata dengan ujung awal grid container
    • end: mensejajarkan grid agar rata dengan ujung akhir grid container
    • center: mensejajarkan grid di tengah grid container
    • stretch: meresize grid item agar grid bisa mengisi penuh height grid container
    • space-around: menempatkan jumlah ruang yang merata disetiap grid item,dengan ukuran setangan ruang kosong di ujung jauh
    • space-between: menempatkan jumlah ruang yang merata disetiap grid item,dengan tanpa adanya ruang kosong di ujung jauh
    • space-evenly: menempatkan jumlah ruang yang merata disetiap grid item,termasuk di ujung yang jauh

• place-content:Mengatur align-content dan justify-content properti dengan sekali deklarasi.Nilai pertamanya mengatur align-content,dan nilai kedua mengatur justify-content.Jika nilai kedua tidak ada(tidak diisi),maka nilai pertama akan digunakan untuk mengatur keduanya 

• grid-auto-columns, grid-auto-rows: Menentukan ukuran grid tracks(implick grid tracks) yang dibuat secara otomatis.Implicit tracks dibuat ketika lebih banyak grid items daripada sel di dalam grid atau ketika grid-item ditempatkan diluar explicit grid.
  • Values: 
    • track-size: bisa berupa panjang,persentase,atau sebagian kecil dari ruang kosong di dalam grid(memakai unit fr).

• grid-auto-flow: Properti ini mengontrol bagaimana algoritma auto-placement bekerja.
  • Values:
    • row: membuat algoritma auto-placement untuk mengisi setiap baris secara bergantian,dan menambahkan baris baru seperlunya(default).
    • column: membuat algoritma auto-placement untuk mengisi setiap kolom secara bergantian,dan menambahkan kolom baru seperlunya(default). 
    • dense: membuat algoritma auto-placement untuk mengisi lubang lebih awal di grid jika item yang lebih kecil muncul kemudian.Dense juga hanya mengubah visual order dari item yang ada,dan bisa membuat item-item tampak rusak.

• grid: Cara singkat untuk mengatur semua properti dalam satu deklarasi.Properti yang diatur ialah:grid-template-rows,grid-template-columns,grid-template-areas,grid-auto-rows,grid-auto-columns, dan grid-auto-flow(Catatan: Hanya bisa menentukan explicit atau implicit grid dalam sekali deklarasi).
  • Values: 
    • none: mengatur semua sub-properties ke nilai awal masing masing sub-properties
    • grid-template: sama seperti cara singkat grid-template
    • grid-template-rows,grid-auto-flow(auto-flow / dense), grid-auto-columns: mengatur grid-template-rows ke nilai spesifik.Jika keyword auto-flow ada di kanan slash,maka grid-auto-flow akan diatur ke column.Jika dense ditambahkan secara spesifik,algoritma auto-placement akan memakai dense packing algorithm.Jika grid-auto-columns dikosongkan,maka akan diatur ke auto
    • grid-auto-rows, grid-template-column: mengatur grid-template-columns ke nilai spesifik.Jika auto-flow maka grid-auto-flow diatur menjadi row.Jika dense ditambahkan secara spesifik,algoritma auto-placement akan memakai dense packing algorithm.Jika grid-auto-row dikosongkan,maka akan diatur ke auto

Properti untuk Children(Grid Items):

• grid-column-start,grid-column-end,grid-row-start,grid-row-end: Menentukan lokasi grid item diantara grid berdasarkan garis grid spesifik.grid-column-start/grid-row-start adalah garis dimana item dimulai,dan grid-column-end/grid-row-end adalah garis dimana item berakhir
  • Value:
    • line: bisa angka yang merujuk pada nomor garis grid,atau nama yang merujuk pada nama garis grid
    • span(nomor): item akan menjangkau jumlah grid tracks yang disediakan
    • span(nama): item akan membentang hingga menyentuh baris berikutnya dengan nama yang diberikan
    • auto: menunjukkan penempatan otomatis, span otomatis, atau span default satu

• grid-column, grid-row: cara singkat untuk grid-column-start + grid-column-end dan grid-row-start + grid-row-end
  • Value: 
    • start-line / end-line: keduanya menerima value yang sama angka maupun span
      contoh:
      
      Copy Code Copied Use a different Browser

      
      .item {
      	   grid-column: 3 / span 2;
      	   grid-row: second-line / 3;
      	}
      

• grid-area: memberi item nama sehingga bisa direferensikan oleh template yang dibuat oleh properti grid-template-areas.Properti ini bisa digunakan sebagai singkatan yang lebih pendek untuk grid-row-start+grid-column-start+grid-row-end+grid-column-end.
  • Values:
    • name: nama yang anda tentukan
    • row-start/column-start/row-end/column-end: bisa sebuah angka atau nama garis
      
      Copy Code Copied Use a different Browser

      
      .item {
      	   grid-area: (name | row-start) / column-start / row-end / column-end ;
      	}
      

• justify-self: mensejajarkan grid item di dalam cell secara horizontal.Nilai dari properti ini hanya diterapkan pada grid item di dalam satu cell
  • Values: 
    • start: mensejajarkan grid item agar rata dengan ujung awal cell
    • end: mensejajarkan grid item agar rata dengan ujung akhir cell
    • center: mensejajarkan grid item di tengah cell
    • stretch: mengisi semua width dari cell(default)
      
      Copy Code Copied Use a different Browser

      
      .item {
      	   justify-self: start | end | center | stretch
      	}
      

      
      Untuk melakukan hal yang sama,dan diterapkan ke semua item dalam sebuah grid,bisa di atur di grid container dengan properti justify-items.

• align-self: mensejajarkan grid item di dalam cell secara vertikal.Nilai dari properti ini hanya diterapkan pada konten di dalam grid item
  • Values: 
    • start: mensejajarkan grid item agar rata dengan ujung awal cell
    • end: mensejajarkan grid item agar rata dengan ujung akhir cell
    • center: mensejajarkan grid item di tengah cell
    • stretch: mengisi semua height dari cell(default)
      
      Copy Code Copied Use a different Browser

      
      .item {
      	   align-self: start | end | center | stretch
      	}
      

      
      Untuk melakukan hal yang sama,dan diterapkan ke semua item dalam sebuah grid,bisa di atur di grid container dengan properti align-items.

• place-self: mengatur properti align-self dan justify-self dalam sekali deklarasi
  • Values:
    • auto: penjajaran default untuk layout mode
    • align-self / justify-self: nilai pertama mengatur align-self,nilai kedua mengatur justify-self.Jika nilai kedua tidak ditentukan maka,nilai pertama akan mengatur keduanya
      
      Copy Code Copied Use a different Browser

      
      .item {
      	   place-self: center start;
      	}
      

Unit spesial dan fungsi:

• fr units: pada dasarnya berarti “bagian dari ruang yang tersisa”.Jadi deklarasinya seperti: “grid-template-columns: 1fr 3fr;”

• Sizing Keywords: Ketika ukuran baris dan kolom,bisa menggunakan semua satuan seperti px,rem,% dll,tapi ada juga keywords:
  • min-content: ukuran minimum sebuah konten
  • max-content: ukuran maksimum sebuah konten
  • auto: keyword ini sama seperti fr,namun akan kalah dengan fr ketika mengalokasikan ruang sisa
  • fit-content: menggunakan ruang yang tersedia,namun tidak kurang dari min-content dan tidak akan lebih dari max-content

• Sizing functions: fungsi minmax() mengatur nilai minimum dan nilai maksimum untuk ukuran panjang.Ini juga berguna dalam kombinasi dengan unit relative grid-template-columns: minmax(200px, 1fr) 3fr;

• repeat functions dan keywords: fungsi ini bisa menghemat waktu dalam mengetik: tanpa repeat() “grid-template-columns: 1fr 1fr 1fr 1fr;” dengan repeat() “grid-template-columns: repeat(4, 1fr);“.repeat() juga mempunyai keywords:
  • auto-fill: menampung sebanyak mungkin kolom pada sebuah baris,meskipun kosong
  • Auto-fit: menampung kolom apapun yang ada ke dalam space

• Subgrid: merupakan sebuah fitur yang sangat berguna,yang mengizinkan grid items memiliki grid yang mewarisi garis grid dari parent grid: “grid-template-columns: subgrid;.Untuk sekarang fitur ini hanya disupport oleh FireFox,tapi fitur ini sangat dibutuhkan di browser manapun