Cara menggunakan html layout 2 columns

Indonesian (Bahasa Indonesia) translation by Eklemis Santo Ndun (you can also view the original English article)

Pada tutorial kali ini saya akan menjelaskan secara detail bagaimana mendesain berbagai jenis form menggunakan teknik Grid dalam CSS. Dalam setiap contoh, saya akan tunjukkan terlebih dahulu bagaimana suatu form biasanya ditata menggunakan properti Float, setelah itu saya akan tunjukkan bagaimana caranya menghasilkan desain form yang sama menggunakan teknik Grid CSS.

Jika Anda belum paham tentang apa itu CSS Grid, anda bisa mempelajari modul berseri kami Memahami CSS Grid Layout. Mari kita mulai.

1. Form Sign Up Sederhana 

Dalam layout berikut kita akan membagi form ke dalam dua kolom sehingga nantinya kita biasa memposisikan label-label di sebelah kiri dan komponen-komponen input di sebelah kanan.

Menggunakan CSS "Tradisional"

Cara tradisional ini biasanya memanfaatkan properti Float untuk memisahkan komponen-komponen ke dalam kolom-kolom. Perhatikan bahwa di sini kita tidak menggunakan wraper/wadah penampung untuk komponen form sebelumnya, kita akan secara langsung menata label-label dan komponen-komponen input yang ada.

    First Name
    

    Last Name
    

    

form {
    overflow: hidden;
}

label {
    float: left;
    width: 200px;
    padding-right: 24px;
}

input {
    float: left;
    width: calc(100% - 200px);
}

button {
    float: right;
    width: calc(100% - 200px);
}

Pada kode program di atas saya menggunakan perintah calc(), tujuannya di sini agar komponen bersangkutan memiliki lebar yang penuh tetapi dengan terlebih dahulu menyisakan 200px di sisi kiri.

Berikut adalah hasil desainnya, dengan sedikit tambahan desain untuk memperindah tampilan.

Menggunakan Layout Grid CSS

Tujuan kita memakai "Grid" di sini adalah agar kita bisa membuat dua kolom, lalu menempatkan masing-masing komponen ke dalam kolom yang sesuai.

Sebagai langkah pertama, kita akan mendefinisikan grid di dalam elemen form

form {
    display: grid;
}

Lalu kita bagi grid tersebut menggunakan grid-template-columns

form {
    display: grid;
    grid-template-columns: 200px 1fr;
}

Berdasarkan kode CSS di atas, kolom pertama akan memiliki lebar tetap 200px sementara kolom kedua akan memiliki lebar 1fr (satu fraksi) atas tempat yang tersisa.

Berikutnya kita definisikan posisi komponen-komponen label dan input menggunakan properti grid-column yang didasarkan pada nomor urut garis pada grid seperti berikut:

Untuk memahami lebih lanjut tentang garis-garis pada grid, silahkan pelajari tip singkat berikut:

Berdasarkan indeks garis grid di atas, kita akan menerapkan aturan berikut ini terhadap komponen-komponen label, input dan button

label {
    grid-column: 1 / 2;
}

input,
button {
    grid-column: 2 / 3;
}

Komponen-komponen label akan menempati kolom antara garis 1 dan garis 2. Komponen-komponen input dan button akan menempati kolom di antara garis 2 dan garis 3.

Terakhir kita gunakan grid-gap untuk menambahkan pemisah selebar 16px di antara baris-baris dan kolom-kolom:

form {
    display: grid;
    grid-template-columns: 200px 1fr;
    grid-gap: 16px;
}

2. Form Kontak 

Dalam layout kali ini, yang akan kita lakukan adalah:

1. Tinggi kedua kolom harus sama, sehingga sidebar dan form  memiliki tinggi yang sama nantinya.
2. Selanjutnya kita akan membagi lagi form (kolom sebelah kanan) ke dalam dua kolom, dengan komponen button yang ada akan menempati kedua kolom sekaligus.

Layout seperti ini tentu saja bisa dibuat menggunakan properti floats. Tetapi kita perlu mengisi properti min-height untuk kolom sebelah kiri sehingga memungkinkan untuk membuat kolom bersangkutan memiliki tinggi sepenuhnya. Ada cara-cara tradisional lain untuk kebutuhan ini, tapi tidak ada yang memang cukup baik.

Menggunakan CSS "Tradisional"

Secara ringkas, kita menggunakan floats sebagai berikut:

1. Atur min-height untuk kolom sebelah kiri.
2. Atur contact dan wrapper form sehingga displaynya Float. 
3. Tambahkan overflow: hidden; untuk memastikan wrapper memiliki tinggi.
4. Atur elemen-elemen dalam form agar memiliki display float dan memiliki margin antar elemen.
5. Atur ulang floating untuk textarea dan tombol send, kemudian buat agar keduanya memiliki lebar penuh.

Cukup banyak yang harus dikerjakan bukan?

Cara yang lebih baik adalah dengan menggunakan entah teknik Flexbox atau Grid. Kusus untuk kasus ini, saya memilih menggunakan teknik Grid karena disini kita perlu mengatur susunan elemen-elemen baik secara horisontal maupun secara vertikal. 

Layout dengan Grid CSS

Kita mulai dengan mendeklarasikan grid di dalam wrapper dan membaginya dalam dua kolom.

.wrapper {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

Elemen form juga perlu dideklarasikan sebagai grid:

form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}

Setelah mengaplikasikan css di atas, hasilnya akan seperti berikut.

Kita perlu mengatur agar dua elemen terakhir memiliki lebar yang penuh dengan memposisikan keduanya mulai dari garis grid 1 sampai garis 3.

.full-width {
    grid-column: 1 / 3;   
}

3. Form Profil

Akhirnya kita sampai di layout form yang terakhir. Di sini kita menyertakan satu inputan khusus agar pengguna bisa mengunggah foto profil mereka. Tempatnya harus di bagian kanan atas.

Dengan CSS "Tradisional"

Kita gunakan markup berikut:

    

        Your name
        
    
    

        Email
        
    
    

        Upload your photo
        
    
    

        Save
    

Secara ringkas dengan cara tradisional, langkah-langkah berikut yang akan dikerjakan:

1. Tambahkan position: relative; untuk elemen-elemen form.
2. Posisikan file input absolut di sebelah kanan atas
3. Tambahkan padding untuk form dengan lebar sama dengan lebar file input.
4. Tentukan lebar tetap untuk file input.

Layout Dengan Grid CSS

Kita tidak perlu membahas cara tradisional lebih detail. Dengan Grid, kita akan membagi form dalam dua kolom seperti berikut:

Kolom pertama akan memiliki lebar dua kali kolom pertama, yang akan kita realisasikan dengan menggunakan fr.

form {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-gap: 20px;
}

Grid sudah dibuat, selanjutnya kita tempatkan elemen-elemen dalam form di antara garis grid 1 dan 2: 

form p {
  grid-column: 1 / 2;
}

Langkah berikut adalah menempatkan file input di kolom kedua. Untuk melakukan itu, kita tempatkan file input tersebut di antara garis grid 2 dan 3. Secara vertikal juga, kita tempatkan di antara garid grid 1 dan 2.

.input-file-wrapper {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

Kesimpulan

Selesai! Kita sudah membahas beberapa contoh penggunaan Grid CSS untuk membuat form web. Seperti yang ada lihat, kita mempersingkat waktu dan usaha dengan menulis lebih sedikit kode ketimbang bila kita menggunakan cara tradisional. Anda bisa menggunakan semua contoh diatas, berkat CSS @support yang membantu kami menggunakan fitur tertentu perbaikan.

Anda punya saran untuk meningkatkan layout-layout diatas? Perkenankan kami mengetahuinya lewat kolom komentar dibawah ini!