Apa itu Layouting CSS?

Hai, setelah belajar HTML dan CSS dasar, selanjutnya kita akan belajar mengenai CSS layouting. Secara garis besar CSS layouting hampir sama dengan CSS dasar.

Kenapa kita harus belajar CSS layouting?

Dengan menggunakan CSS layouting kita dapat membuat sebuah website yang bukan hanya informatif tapi juga menarik, karena dengan CSS layouting kita dapat mengatur posisi, ukuran, dan perilaku dari elemen-elemen html yang telah kita buat.

 

Bagaimana Cara Mengatur Layout Dengan CSS Flex?

Siapkan file html dan css

Nah, untuk merubah tampilan itu cukup tambahkan kelas kontainer. Maka lihat perbedaan ini

Sekarang kita akan belajar property flex yang sering digunakan

1. Flex direction

Secara default arah dari flexbox adalah row atau kolom. Kalian bisa mencobanya dengan menambahkan value ini

2. Justify content

Jika kita ingin membuat item-item yang kita miliki sejajar di antara flexbox agar kontainernya dapat terdistribusi pada ruang kosong yang tersisa dari item flex dalam satu baris tersebut tidak fleksibel atau meskipun fleksibel tapi sudah mencapai batas ukuran maksimum.

3. Align item

Pada dasarnya, align item hampir sama dengan justify content, hanya saja peletakan item pada container flex di sepanjang garis tegak lurus.

4. Align content

Align content sama dengan justify content yang berguna untuk mensejajarkan garis flex container saat ada ruang kosong yang tegak lurus dengan sumbu utama. Namun, properti tidak dapat diaplikasikan jika hanya ada satu flek item.

Mengatur Layout Dengan CSS Grid

ilustrasi di atas, CSS membagi website menjadi beberapa area, di mana kita bisa bebas mengatur posisi dari kolom-kolom diatas. Sebelum menggunakan Grid CSS kalian harus mengetahui istilah berikut ini:

●         Grid Container -> Merupakan element pembungkus grid, dapat didefinisikan dengan menuliskan: display: grid

●         Grid Item -> Merupakan element child dari grid container, atau element -element yang berada 1 level di dalam grid container.

●         Grid Line -> Merupakan garis vertikal atau horizontal yang memisahkan grid menjadi beberapa bagian.

●         Grid Cell -> Merupakan perpotongan antara baris dan kolom dalam grid.

●         Grid Area -> Merupakan kumpulan dari beberapa cell yang membentuk kotak

●         Grid Track -> Merupakan jarak antara 2 grid line, baik secara vertikal maupun horizontal

●         Grid Gap -> Merupakan jarak antara grid cell.

Grid CSS memiliki dua jenis properti

1. Container Property

●        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 Property

●        grid-column

●        grid-row

●        grid-area

●        grid-column-start

●        grid-column-end

●        grid-row-start

●        grid-row-end

●        justify-self

●        align-self

●        place-self

Lets try this! Siapkan file html dan css kamu

Tugas

Buatlah website yang telah kalian buat sebelumnya menjadi lebih informatif dan cantik dengan menggunakan layouting CSS

 

 

Referensi

1. https://www.matawebsite.com/blog/belajar-layouting-menggunakan-flexbox-css
2. https://www.matawebsite.com/blog/membuat-layouting-dengan-grid-css