Grid System based on Flexbox

Beberapa waktu yang lalu saya membahas flexbox dalam learn flexbox. Kali ini saya akan membahas tentang grid system yang dibuat dengan css flexbox. Nama grid system ini adalah Flexboxgrid.

Dalam dokumentasinya sudah dijelaskan dengan baik, jadi saya tulis disini lebih karena ingin mencoba-coba.

Grab the file and Link the CSS

Pertama, download file css flexboxgrid-5.0.0 disini.

Kemudian hubungkan file HTML nya dengan file CSS flexboxgrid.

Atau, kalau mau pake cdn:

<link rel="stylesheet" href="//cdn.jsdelivr.net/flexboxgrid/5.0.0/flexboxgrid.min.css" type="text/css" />

Use the Classes

Kemudian kita tinggal pakai kelas-kelas yang ada. Jika pernah pakai bootstrap pasti langsung paham dengan kelas-kelas CSS yang ada disini.

<div class="row">
    <div class="col-xs-12
                col-sm-8
                col-md-6
                col-lg-4">
        <div class="box">Responsive</div>
    </div>
</div>

Pertawa pakai kelas "row" sebagai wadah. Kemudian untuk gridnya pakai kelas "col-...- ..", 

"xs"  = extra small screen

"sm"  = small screen

"md"  = medium screen

"lg"  = large screen

Class tersebut akan berfungsi sesuai resolusi layar.

Contoh disini.

Offset

bersambung

Auto Width

bersambung

Nested Grid

bersambung

Conclusion

Menggunakan Flexbox Grid yang dibuat berdasarkan css flexbox merupakan opsi yang patut diperhitungkan sekarang.
Namun, saya rasa Flexbox Grid belum memanfaatkan kelebihan flexbox dalam vertical axis, mengingat flexbox juga bisa dipakai secara vertikal.