Mengenal Display Grid Di HTML & CSS

GRID

CSS GRID adalah sebuah fitur CSS yang sangat kuat dan fleksibel untuk mengatur tata letak elemen-elemen dalam sebuah halaman website. Dengan CSS Grid, kita dapat dengan mudah membuat layout yang kompleks dan responsif.

Konsep Dasar Grid

  • Container: Elemen HTML yang dijadikan sebagai wadah utama untuk grid.
  • Item: Elemen-elemen anakan dari container yang akan ditempatkan di dalam grid.
  • Track: Garis-garis horizontal (row) atau vertikal (column) yang membagi grid menjadi area-area.
  • Area: Ruang yang dibatasi oleh dua track, tempat item ditempatkan.

Membuat Contoh Sederhana GRID

Di sini saya akan memberikan beberapa contoh sederhana dalam pembuatan grid di HTML & CSS. Di latihan ini saya menggunakan eksternal CSS atau membuat file CSS secara terpisah dengan file HTML. Namun teman-teman bisa menuliskan kode CSS secara internal, atau di gabungkan di dalam file HTML secara langsung dengan menggunakan tag <link>.

1. Grid Layout 1

Buatlah file dengan nama grid1.html (atau sesuai keinginan), kemudian masukkan kode HTML seperti di bawah ini:

Setelah itu buat file dengan nama grid1.css lalu masukkan kode seperti di bawah ini:

Berikut hasilnya:

2. Grid Elemen

Buatlah file dengan nama grid2.html (atau sesuai keinginan), kemudian masukkan kode HTML seperti di bawah ini:

Setelah itu buat file dengan nama grid2.css lalu masukkan kode seperti di bawah ini:

Berikut hasilnya:

3. Inline-grid

Buatlah file dengan nama inline-grid.html (atau sesuai keinginan), kemudian masukkan kode HTML seperti di bawah ini:

Setelah itu buat file dengan nama inline-grid.css lalu masukkan kode seperti di bawah ini:

Berikut hasilnya::

4. Columns-gap

Buatlah file dengan nama column-gap.html (atau sesuai keinginan), kemudian masukkan kode HTML seperti di bawah ini:

Setelah itu buat file dengan nama column-gap.css lalu masukkan kode seperti di bawah ini:

Berikut hasilnya:

5. Rows-gap

Buatlah file dengan nama row-gap.html (atau sesuai keinginan), kemudian masukkan kode HTML seperti di bawah ini:

Setelah itu buat file dengan nama row-gap.css lalu masukkan kode seperti di bawah ini:

Berikut hasilnya:

6. Gap

Buatlah file dengan nama gap.html (atau sesuai keinginan), kemudian masukkan kode HTML seperti di bawah ini:

Setelah itu buat file dengan nama gap.css lalu masukkan kode seperti di bawah ini:

Berikut hasilnya:
Kurang lebih seperti itulah beberapa dasar-dasar CSS mengenai CSS Grid yang bisa saya bagikan di blog kali ini. Untuk mengetahui berbagai hal seputar CSS lainnya, bisa kunjungi website www.w3schools.com atau bisa akun github saya elvanazlita untuk mendapatkan kode dari dasar-dasar HTML dan CSS yang sudah saya bagikan di blog ini. Selamat mencoba!

Komentar

Posting Komentar

Postingan populer dari blog ini

Belajar CSS Dasar

Gambar
APA ITU CSS? Cascading Style Sheets (CSS) adalah bahasa yang digunakan untuk mengatur tampilan dan gaya dari sebuah halaman web. Jika kita membandingkan pembuatan sebuah website dengan membangun rumah, maka HTML adalah kerangka dan struktur dasar rumah tersebut. Sedangkan CSS adalah cat, perabotan, dan dekorasi yang membuat rumah tersebut menjadi lebih tertata rapih dan indah. Fungsi CSS Berikut beberapa fungsi CSS: CSS memungkinkan kita untuk memisahkan konten (HTML) dari tampilan (CSS). Hal ini dapat membuat kode lebih teroganisir, mudah dipelihara, dan dapat digunakan kembali. CSS dapat membuat tampilan lebih konsisten dengan menerapkan gaya yang sama ke seluruh elemen pada halaman web. CSS dapat membuat halaman website lebih responsiif dimana dapat menyesuaikan tampilannya secara otomatis berdasarkan ukuran layar perangkat. CSS yang ditulis dengan baik dan benar dapat meningkatkan kecepatan dalam loading halaman website. Struktur CSS  Selektor: Menentukan elemen HTML mana yang ...
Baca selengkapnya

Konfigurasi 3 MikroTik di Virtual Box

Gambar
Konfigurasi 3 MikroTik di Virtual Box Berikut contoh langkah sederhana membuat konfigurasi 3 MikroTik di Virtual Box: 1. Buat 3 MikroTik di Virtual Box 2. Pilih MIKROTIK_R1 lalu setting Adapter 1 menjadi Bridged Adapter 3. Setting Adapter 2 di MIKROTIK_R1 menjadi Internal Network  dan beri nama Lan1 4. Setting Adapter 3 di MIKROTIK_R1 menjadi Internal Network dan beri nama Lan2 5. Pilih MIKROTIK_R2 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan1 6. Pilih MIKROTIK_R3 lalu setting Adapter 1 menjadi Internal Network dan beri nama Lan2 7. Jalankan  MIKROTIK_R1  kemudian masuk ke system identity dan setting nama menjadi router_1 8. Masuk ke interface lalu setting ether1 menjadi eth1_ISP 9. Setting ether2 menjadi eth2_R2 10. Setting ether3  menjadi eth3_R3 11. Masuk ke ip address dan tambahkan ip address ke eth1_ISP 12. Ping gateway 13. Masuk ke ip route lalu tambahkan dst-address 14. Ping 8.8.8.8 15. Ping detik.com      Belum tersa...
Baca selengkapnya

Belajar Link, Relative dan Absolute URL, Bookmark di HTML

Gambar
Pernakah anda memperhatikan bagaimana ketika anda mengklik sebuah kata atau gambar, anda langsung berpindah ke halaman lain? Di balik itu semua, ada yang namanya link. Artikel ini akan membahas tentang apa itu link dan juga jenis-jenis link dalam HTML; Relative URL, Absolute URL, dan Bookmark. APA ITU LINK DALAM HTML? Link atau hyperlink adalah elemen dasar dalam HTML yang berfungsi untuk menghubungkan satu halaman web ke halaman web yang lain, gambar, dokumen, atau bahkan ke bagian tertentu halaman yang sama. Ketika pengguna mengklik sebuah link, browser akan secara otomatis mengarahkan pengguna ke halaman tujuan yang telah di tentukan. ELEMEN LINK DALAM HTML Elemen link dalam HTML didefinisikan menggunakan tag <a> . Atribut utama dalam tag <a>  adalah: href : Menentukan alamat URL (Uniform Resource Locator) dari halaman tujuan. target : Menentukan dimana halaman tujuan akan dibuka (di tab baru atau frame). RELATIVE DAN ABSOLUTE URL DALAM HTML URL (Uniform Resource Loc...
Baca selengkapnya