Pendekatan responsive yang popular adalah grid system. Sudah banyak css framework yang bisa digunakan agar website menjadi responsive. Contoh: Bootstrap, Materialize dan lainnya.
Pada saat tutorial ini dibuat, framework tersebut contoh Bootstrap 3, masih menggunakan sistem grid, sementara Bootstrap 4 sudah mensupport flexbox.
TIPS Jika website yang akan dibangun cukup kompleks dan waktu development sangat penting, penggunaan css framework dapat membantu. Namun bila website yang dibangun sederhana, penggunaan css framework menjadi overkill, terlalu banyak fitur yang dibuat, yang kemungkinan besar tidak digunakan.
Flexbox
Keunggulan flexbox adalah sangat memudahkan membuat responsive layout tanpa menggunakan metode float atau positioning.
Kemudahan lainnya adalah sisi otomatis dimana flexbox akan otomatis mengisi space kosong atau otomatis mengecilkan konten bila space terlalu kecil.
Selain itu adalah sistem order, dimana dengan mudah kita bisa memindahkan flexbox dari kiri ke kanan, tanpa mengubah kode css dan kode html.
Cara menggunakan flexbox adalah dengan menset property display ke flex. Dan agar element didalam flexbox otomatis reflow kebawah, perlu diset flex-wrap: wrap;
.container{
dispaly: flex;
flex-wrap: wrap;
}