Matawebsite Promo Lebaran 2022

Membuat Layouting dengan Grid CSS

date 10 Jun 2021
date Sulfikardi
date 2518
date Web Design
Membuat Layouting dengan Grid CSS

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 digunakan untuk menangani layout yang harus dikontrol dari sisi kolom dan baris(multi-dimensi). Sedangkan didalam flexbox, hanya dapat mengatur satu dimensi antara kolom atau baris. Hal ini yang membuat grid cocok untuk mengatur layout dalam skala besar.

Terminologi atau istilah - istilah dalam CSS grid:

  1. Grid Container -> Merupakan element pembungkus grid, dapat didefinisikan dengan menuliskan: display: grid
  2. Grid Item  -> Merupakan element child dari grid container, atau element -element yang berada 1 level di dalam grid container.
  3. Grid Line  -> Merupakan garis vertical atau horizontal yang memisahkan grid menjadi beberapa bagian.
  4. Grid Cell  -> Merupakan perpotongan antara baris dan kolom dalam grid.
  5. Grid Area  -> Merupakan kumpulan dari beberapa cell yang membentuk kotak
  6. Grid Track  -> Merupakan jarak antara 2 grid line, baik secara vertical maupun horizontal
  7. Grid Gap  -> Merupakan jarak antara grid cell. 
     

Properti - properti dalam CSS grid: 

1. Container Properti

  • grid-template-columns
  • grid-template-rows
  • grid-auto-columns
  • grid-auto-rows
  • grid-template-areas
  • grid-template
  • grid-column-gap
  • grid-row-gap
  • justify-items
  • place-items
  • align-items
  • place-content
  • align-content
  • grid

2. Child Propertis 

  • grid-column
  • grid-row
  • grid-area
  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end
  • justify-self
  • align-self
  • place-self

Contoh Penggunaan : 

HTML

<body>

    <main class="container">

        <header>Header</header>

        <aside>Side</aside>

        <nav>Navbar</nav>

        <section>Content</section>

        <footer>footer</footer>

    </main>

</body>

CSS

main{

            width: 600px;

            border: 2px solid #000;

            margin: 50px auto;

            padding: 5px;

            box-sizing: border-box;

            display: grid;

            grid-template-areas: "header header"

                                 "side content"

                                  "nav content"

                                  "footer footer";

            grid-template-columns: 1fr 1.5fr;

            grid-template-rows: 1fr 1fr 1.3fr;

        }

        header{

            padding: 50px;

            background-color: lightblue;

            grid-area: header;

        }

        aside{

            padding: 50px;

            background-color: lightcoral;

            grid-area: side;

        }

        nav{

            padding: 50px;

            background-color: lightcyan;

            grid-area: nav;

        }

        section{

            padding: 50px;

            background-color: lightgreen;

            grid-area: content;

        }

        footer{

            padding: 10px;

            background-color: lightslategray;

            grid-area: footer;

        }

 

Maka tampilannya akan seperti dibawa ini:

 

 

Matawebsite Promo Lebaran 2022
sul.png

Sulfikardi

Web Design & Web Programming

Halo, saya seorang Web Developer yang terbiasa mengembangkan website menggunakan HTML, CSS, Javascript, PHP, MYSQL, dan Laravel. Disini saya akan membagikan pengalaman saya dalam membangun dan mengembangan website yang responsif dan dinamis

Artikel Terkait

Halo, ada yang bisa kami bantu?
Daftar Sekarang