Home HomeCSS Grid CSS Grid #Perkenalan

CSS Grid #Perkenalan

Assalammualaikum warahmatullahi wabarakkhatu

Pertama tama marilah kita panjatkan puji serta syukur kita atas kehadirat Allah SWT yang mana telah memberikan nikmat serta karunianya sehingga saya dapat menulis artikel tentang CSS Grid bagian perkenalan kali ini.

Sholawat beserta salam tak lupa kita curahkan kepada junjungan kita habibana wanabiana Muhammad SAW kepada para keluarganya, sahabatnya, dan tak lupa kepada kita semua yang selaku umatnya yang semoga patut dan taat atas ajarannya sampai yaumul akhir aamiin ya rabbal alamin.

Mungkin bagi kalian yang suka dan bisa dengan membuat website sudah tidak asing dengan yang namanya CSS, salah satunya adalah CSS Grid. Tapi bagi kalian yang masih belajar atau belum tau sama sekali pasti belum mengerti apa itu CSS Grid, nah dengan adanya artikel ini saya akan memperkenalkan CSS Grid ini.

Baca juga: CSS Grid #terminologi/istilah

Apa itu CSS Grid?

CSS grid adalah modul css baru untuk mendefinisikan sistem layout berbentuk grid dalam 2 dimensi yaitu baris dan kolom. Kelebihan css grid ini dibandingkan dengan flexbox adalah bisa mengatur kolom dan baris nya berbeda dengan flexbox hanya dapat mengatur kolom atau baris nya saja.

Untuk menjalankan CSS grid kita membutuhkan sebuah properti css yaitu (display: grid;). Alasan menggunakan css grid ini yaitu agar memudahkan si pembuat membuat layout website sesuai desain yang dia inginkan. Si pembuat dapat membagi kolom menjadi beberapa bagian pada website sesuai keinginannya.

Bagaimana cara menggunakan CSS Grid ini?

Sebelumnya bagi kalian yang ingin belajar tentang CSS Grid ini kalian harus memahami dulu atau mempelajari dulu mengenai flexbox, karena syarat untuk belajar CSS Grid ini kalian harus mengerti dulu mengenai flexbox karena sangat erat kaitannya. Baiklah saya akan membuatnya:

HTML nya:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Grid</title>
    </head>
    <body>
        <div class="container">
            <header>Header</header>
            <aside>Aside</aside>
            <nav>Nav</nav>
            <main>Main</main>
            <footer>Footer</footer>
        </div>
    </body>
</html>

Catatan:

  1. <html lang="en"> adalah untuk memberitahukan bahwa semua konten pada halaman tersebut adalah berbahasa inggris pada browser
  2. <meta name="viewport" content="width=device-width, initial-scale=1.0"> adalah untuk membuat tampilan web agar responsive
  3. <div class="container"> adalah untuk mengelompokkan dalam suatu class "container"
Untuk CSS nya yaitu:

        <style>
            body,
            html{
                margin: 0;
                padding: 0;
                font-size: 20px;
                font-family: arial;
                color: white;
                text-transform: uppercase;
                text-align: center;
            }
            .container{
                width: 600px;
                margin: 50px auto;
                border: 5px solid #333;
                box-sizing: border-box;
                padding: 5px;
                display: grid;
                grid-template-areas: "header header"
                                        "aside main"
                                        "nav main"
                                        "footer footer";
                grid-template-columns: 1fr 1.5fr;
                grid-template-rows: 1fr 1fr 1.3fr;
            }
            header{
                grid-area: header;
                background-color: blueviolet;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            aside{
                grid-area: aside;
                background-color: #2f93ff;
                padding: 60px 0;
            }

            nav{
                grid-area: nav;
                background-color: red;
                padding: 100px 0;
            }

            main{
                grid-area: main;
                background-color: burlywood;
                box-sizing: border-box;
                flex: 1.5;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            footer{
                grid-area: footer;
                background-color: #333;
                padding: 20px 0;
            }
        </style>

Catatan:

  1. Margin adalah attribut penggaris untuk mengatur jarak ke atas antara elemen pada html.
  2. Padding adalah yang mengatur jarak pada elemen atau tag html.
  3. font-size adalah untuk ukuran font.
  4. font-family adalah untuk jenis font.
  5. color adalah warna.
  6. text-transform: uppercase adalah untuk memperbesar ukuran font.
  7. text-align: center adalah untuk mengubah posisi text agar pindah ke tengah.
  8. width adalah untuk mengatur lebarnya.
  9. border adalah untuk membuat garis kotak.
  10. box-sizing adalah untuk mengubah kalkulasi dalam mengukur lebar element.
  11. display: grid adalah untuk mengatur tampilan dengan elemen grid.
  12. grid-template-areas digunakan untuk membuat template kolom dan baris pada area yang dipilih.
  13. background-color adalah untuk mengatur warna pada backgroundnya.
  14. display: flex adalah untuk mengatur tampilan dengan elemen flex.
  15. justify content center adalah untuk merapihkan item diantara flexbox agar bisa mengisi ruang kosong yang tersisa.
  16. align-item adalah untuk mengatur posisi elemen yang dipilih.

Hasilnya:


Sekian artikel yang dapat saya sampaikan tentang CSS grid bagian perkenalan, terima kasih karena telah mengunjungi halaman blog saya, maafkan jika kurang dapat dipahami karena saya juga masih belajar. Untuk lebih jelasnya anda dapat melihat video dibawah ini:



Hadi Supriadi Kamis, 28 April 2022 Tags: CSS Grid

LihatTutupKomentar