<< KEMBALI
// LAYOUT GENERATOR //
SYS_STATUS: ONLINE // GEOMETRIC_LAYOUT_STREAM
Konfigurasi
Mode Tata Letak
Flexbox
CSS Grid
Item Manipulator:
4
Kotak
[-] REMOVE BOX
[+] ADD BOX
Ukuran Jarak (Gap):
15
px
Simulasi Konten Data
Kode Dummy (BOX_01, BOX_02)
Teks Paragraf (Lorem Ipsum Text)
Flex Direction (Arah Alur)
row (Horizontal Kiri-Kanan)
row-reverse (Horizontal Terbalik)
column (Vertikal Atas-Bawah)
column-reverse (Vertikal Terbalik)
Flex Wrap (Pelipatan Baris)
wrap (Otomatis Lipat Baris Baru)
nowrap (Paksa Sebaris Lurus)
Justify Content (Sumbu Utama)
flex-start (Rata Kiri/Awal)
center (Rata Tengah)
flex-end (Rata Kanan/Akhir)
space-between (Rata Renggang Sisi)
space-around (Bagi Rata Sisa Ruang)
Jumlah Kolom (Grid Columns)
Auto Fit (Responsif Pintar)
2 Kolom Seimbang (1fr 1fr)
3 Kolom Seimbang (1fr 1fr 1fr)
4 Kolom Seimbang
Align Items (Sumbu Vertikal)
stretch (Paksa Penuhi Tinggi)
start (Menempel Atas)
center (Tepat di Tengah)
end (Menempel Bawah)
PROPERTI_KUSTOM //
BOX_01
Flex Grow (Skala Perluasan:
0
)
Grid Column Span
auto (Ukuran Normal)
span 2 (Makan 2 Kolom)
span 3 (Makan 3 Kolom)
🔄 RESET MATRIX
Visual Matrix & Code
🖥️
📱
📲
CSS & Tailwind Utility Class Matrix
Generating CSS properties...
STATUS: LAYOUT_CODE_COPIED // SUCCESS
Salin Kode Tata Letak
▲