Generator Flexbox dan CSS Grid

Cara menggunakan playground flexbox dan grid

1. Pilih Tata letak: Flexbox atau Grid, atau mulai dari salah satu Preset (Di tengah, Bilah navigasi, Kartu yang membungkus, Sidebar, Grid kartu responsif, Holy grail, 12 kolom).
2. Atur properti Kontainer. Untuk flexbox: flex-direction dan flex-wrap. Untuk grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items, dan grid-template-areas. Keduanya berbagi justify-content, align-items, align-content, row-gap (px), dan column-gap (px).
3. Kelola Item dengan Tambah item, Buang item terpilih, dan Atur ulang item terpilih. Klik sebuah item di pratinjau (atau pindah ke item itu dengan Tab lalu tekan Enter) untuk memilihnya.
4. Edit item terpilih: order dan align-self di kedua mode, flex-grow, flex-shrink, dan flex-basis untuk flexbox, serta grid-area, grid-column, grid-row, dan justify-self untuk grid.
5. Salin Kode CSS dan Kode HTML yang sesuai dengan tombol Salin masing-masing.

Setiap kontrol adalah kolom formulir standar, sehingga seluruh playground bisa dipakai hanya dengan keyboard. CSS yang dihasilkan hanya berisi properti yang Anda ubah dari nilai bawaannya, sehingga tetap ringkas, dan item dengan pengaturan yang sama berbagi satu aturan (.item jika semuanya sama).

Flexbox secara singkat

Flexbox menata item di sepanjang satu sumbu. flex-direction menentukan sumbu utama (baris atau kolom); justify-content membagi item di sepanjang sumbu itu (center, space-between…), dan align-items memosisikannya pada sumbu silang. Dengan flex-wrap: wrap, item yang tidak muat pindah ke baris baru, lalu align-content mengatur jarak antarbaris tersebut.

Setiap item memiliki tiga properti ukuran, yang biasanya ditulis bersama sebagai flex:

• flex-basis: ukuran awal (auto memakai ukuran konten atau width);
• flex-grow: seberapa banyak ruang kosong yang diambil item (0 = tidak sama sekali, 1 = bagian yang sama rata);
• flex-shrink: seberapa banyak item mengalah saat ruang tidak cukup (0 = tidak pernah menyusut).

Preset Sidebar menunjukkan pola klasiknya: sidebar dengan flex-basis: 200px dan flex-shrink: 0, serta area utama dengan flex-grow: 1.

CSS Grid secara singkat

Grid menata item dalam dua dimensi. grid-template-columns: repeat(3, 1fr) membuat tiga kolom yang sama lebar; fr adalah bagian dari ruang kosong. repeat(auto-fill, minmax(120px, 1fr)) membuat kolom selebar minimal 120px sebanyak yang muat, sehingga Anda mendapatkan grid kartu responsif tanpa media query.

Item mengisi sel secara berurutan, kecuali Anda menempatkannya sendiri: grid-column: span 2 membuat item selebar dua kolom, dan grid-column: 1 / -1 merentangkannya ke seluruh baris.

grid-template-areas memungkinkan Anda menggambar tata letak dengan nama. Ketik satu baris grid per baris teks, misalnya header header lalu nav main, dan beri item grid-area: header atau grid-area: main. Titik menandai sel kosong. Setiap baris harus memiliki jumlah sel yang sama dan setiap nama harus membentuk persegi panjang; alat ini akan memperingatkan Anda jika tidak.