Layouting merupakan salah satu hal penting dalam pengembangan website. Dengan melakukan layouting yang baik, website kita akan terlihat menarik mudah dipahami oleh pengguna. Teknik layouting pada website ada berbagai macam untuk kali ini yang akan dibahas diantaranya adalah Flexbox dan Grid.
Flexbox
Flexbox merupakan teknik layouting CSS yang memungkinkan kita untuk membuat tampilan yang responsif, fleksibel, dan mudah diatur. Flexbox digunakan untuk mengatur layout dari tulisan, gambar, content, ,conponent, dan elemen HTML lainnya.
Penggunaan Flexbox
Untuk dapat menggunakan Flexbox kita perlu memberikan comand CSS display: flex; pada elemen yang akan diberikan efek flexbox. Command ini merupakan parent atau container dari perintah-perintah flexbox lainnya.
.container {
display: flex;
}Untuk dapat mengatur arah, posisi, dan tata letak dari elemen-elemen yang menggunakan flexbox kita bisa menggunakan command-command seperti dibawah ini:
flex-direction
Mengatur arah dari elemen-elemen entah itu horizontal atau vertical. Nilai yang bisa digunakan adalah row, row-reverse, column, dan column-reverse.
flex-wrap
Mengatur elemen-elemen dipaksa untuk tetap berada dalam satu baris atau beberapa jika memungkinkan. Nilai yang bisa digunakan adalah nowrap, wrap, dan wrap-reverse.
Grid
Layouting menggunakan Grid bisa dibilang lebih kompleks dari Flexbox. Grid juga disebut dengan kisi dengan artian kita pada grid layput kita menggunkan konsep row dan column untuk mengatur taa letak elemen-elemen. Sama seperti Flexbox saat ingin menggunakan grid layout kita perlu memberikan command CSS display: grid; pada elemen yang akan diberikan efek grid.
Penggunaan Grid
.container {
display: grid;
}dalam mengatur grid layout kita bisa menggunakan command-command seperti dibawah ini:
grid-template-column dan grid-template-rows
Mengatur jumlah kolom atau baris yang akan digunakan dalam grid layout. penggunaannya bisa menggunakan nilai px, fr, atau %
penggunaan grid-template-columns:
# grid layout dengan 3 kolom
.container {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
}penggunaan grid-template-rows:
# grid layout dengan 3 baris
.container {
display: grid;
grid-template-rows: repeat(3, minmax(0, 1fr));
}grid-gap
Memberikan nilai jarak yang sama antar elemen-elemen dalam grid layout. Nilai yang bisa digunakan adalah px, fr, atau %
# memberikan jarak 10px antar elemen-elemen dalam grid layout
.container {
display: grid;
grid-gap: 10px;
}grid-column dan grid-row
Command ini digunakan untuk mengatur banyaknya nilai kolom atau baris pada suatu elemen.
# mengatur elemen pada kolom 1 hingga kolom 3
.item {
grid-column: 1 / 3;
}# mengatur elemen pada baris 1 hingga baris 3
.item {
grid-row: 1 / 3;
}grid-area
Command ini menentukan berapa banyak area kolom dan baris yang dicakup pada elemen yang dituju.
# mengatur elemen pada kolom 1 hingga kolom 3 dan baris 2 hingga baris 3
.item1 {
display: grid;
grid-area: 2 / 1 / 3 / 3;
}Perintah dari grid area memiliki susunan grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end.