GRID LAYOUT

A. FERICO OCTAVIANSYAH PASARIBU

 PENDAHULUAN
• Selain Flexbox Layout, untuk mengatur layout website
dapat menggunakan Grid Layout.

• Grid Layout menggunakan konsep 2 dimensi (baris dan

kolom), sedangkan Flexbox Layout menggunakan konsep
1 dimensi (baris atau kolom)

• Grid Layout menyelesaikan permasalahan layout yang

tidak dapat diselesaikan dengan baik oleh solusi CSS
lainnya

A. FERICO OCTAVIANSYAH PASARIBU

PENDAHULUAN

A. FERICO OCTAVIANSYAH PASARIBU

CONTOH

A. FERICO OCTAVIANSYAH PASARIBU

 CONTOH
Komposisi desain layout pada contoh, sebagai berikut:
• Header (1 baris, 4 kolom)
• Menu (4 baris, 1 kolom)
• Article 1 (1 baris, 2 kolom)
• Article 2 (1 baris, 2 kolom)
• Article 3 (1 baris, 2 kolom)
• Side (3 baris, 1 kolom)
• Footer (1 baris, 3 kolom)

A. FERICO OCTAVIANSYAH PASARIBU

 CONTOH
Langkah pertama menentukan nama area grid

A. FERICO OCTAVIANSYAH PASARIBU

 CONTOH
Langkah kedua menentukan isi / template grid

A. FERICO OCTAVIANSYAH PASARIBU

 CONTOH
Langkah ketiga menentukan detail area grid

A. FERICO OCTAVIANSYAH PASARIBU

 CONTOH
Langkah keempat membuat kode HTML

A. FERICO OCTAVIANSYAH PASARIBU