Flexbox
Tata letak batu yang dinamis tidak dimungkinkan dengan flexbox, setidaknya tidak dengan cara yang bersih dan efisien.
Flexbox adalah sistem tata letak satu dimensi. Ini berarti dapat menyelaraskan item di sepanjang garis horizontal atau vertikal. Item fleksibel terbatas pada baris atau kolomnya.
Sistem grid yang sebenarnya adalah dua dimensi, artinya dapat menyelaraskan item di sepanjang garis horizontal DAN vertikal. Item konten dapat menjangkau seluruh baris dan kolom secara bersamaan, yang item fleksibel tidak dapat lakukan.
Inilah sebabnya mengapa flexbox memiliki kapasitas terbatas untuk membangun kisi-kisi. Itu juga alasan mengapa W3C telah mengembangkan teknologi CSS3 lain, Grid Layout .
row wrap
Dalam wadah fleksibel dengan flex-flow: row wrap, item fleksibel harus dibungkus dengan baris baru .
Ini berarti bahwa item fleksibel tidak dapat dibungkus di bawah item lain di baris yang sama .
Perhatikan di atas bagaimana div # 3 membungkus di bawah div # 1 , membuat baris baru. Itu tidak dapat membungkus di bawah div # 2 .
Akibatnya, ketika item bukan yang tertinggi di baris, ruang putih tetap ada, menciptakan celah yang tidak sedap dipandang.
column wrap
Jika Anda beralih ke flex-flow: column wrap, tata letak seperti grid lebih dapat dicapai. Namun, wadah pengarah kolom memiliki empat masalah potensial segera:
- Item flex mengalir secara vertikal, bukan horizontal (seperti yang Anda butuhkan dalam hal ini).
- Wadah mengembang secara horizontal, bukan vertikal (seperti tata letak Pinterest).
- Ini membutuhkan wadah untuk memiliki ketinggian tetap, sehingga barang tahu di mana harus membungkus.
- Pada tulisan ini, ia memiliki kekurangan di semua browser utama di mana wadah tidak berkembang untuk mengakomodasi kolom tambahan .
Akibatnya, wadah arah kolom bukan merupakan pilihan dalam kasus ini, dan dalam banyak kasus lainnya.
Kotak CSS dengan dimensi item tidak ditentukan
Layout Kotak akan menjadi solusi sempurna untuk masalah Anda jika berbagai ketinggian item konten dapat ditentukan sebelumnya . Semua persyaratan lain berada dalam kapasitas Grid.
Lebar dan tinggi item kisi harus diketahui untuk menutup celah dengan item di sekitarnya.
Jadi Grid, yang merupakan CSS terbaik yang ditawarkan untuk membangun tata letak batu yang mengalir secara horizontal, gagal dalam hal ini.
Bahkan, sampai teknologi CSS tiba dengan kemampuan untuk secara otomatis menutup kesenjangan, CSS secara umum tidak memiliki solusi. Sesuatu seperti ini mungkin perlu merefleksikan dokumen, jadi saya tidak yakin seberapa berguna atau efisiennya dokumen itu.
Anda membutuhkan skrip.
Solusi JavaScript cenderung menggunakan penentuan posisi absolut, yang menghapus item konten dari aliran dokumen untuk mengaturnya kembali tanpa ada celah. Berikut ini dua contoh:
CSS Grid dengan dimensi item didefinisikan
Untuk tata letak tempat lebar dan tinggi item konten diketahui, berikut ini adalah tata letak pasangan bata yang mengalir secara horizontal di CSS murni:
grid-container {
display: grid; /* 1 */
grid-auto-rows: 50px; /* 2 */
grid-gap: 10px; /* 3 */
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)); /* 4 */
}
[short] {
grid-row: span 1; /* 5 */
background-color: green;
}
[tall] {
grid-row: span 2;
background-color: crimson;
}
[taller] {
grid-row: span 3;
background-color: blue;
}
[tallest] {
grid-row: span 4;
background-color: gray;
}
grid-item {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3em;
font-weight: bold;
color: white;
}
<grid-container>
<grid-item short>01</grid-item>
<grid-item short>02</grid-item>
<grid-item tall>03</grid-item>
<grid-item tall>04</grid-item>
<grid-item short>05</grid-item>
<grid-item taller>06</grid-item>
<grid-item short>07</grid-item>
<grid-item tallest>08</grid-item>
<grid-item tall>09</grid-item>
<grid-item short>10</grid-item>
<grid-item tallest>etc.</grid-item>
<grid-item tall></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item taller></grid-item>
<grid-item short></grid-item>
<grid-item tallest></grid-item>
<grid-item tall></grid-item>
<grid-item short></grid-item>
</grid-container>
Bagaimana itu bekerja
- Tetapkan wadah kotak level blok. (
inline-gridakan menjadi pilihan lain)
- The
grid-auto-rowsproperti menetapkan ketinggian baris secara otomatis. Di kotak ini setiap baris tingginya 50px.
- The
grid-gapproperti adalah singkatan untuk grid-column-gapdan grid-row-gap. Aturan ini menetapkan kesenjangan 10px antara item kisi. (Ini tidak berlaku untuk area antara item dan wadah.)
The grid-template-columnsproperti menetapkan lebar kolom didefinisikan secara eksplisit.
The repeatnotasi mendefinisikan pola berulang kolom (atau baris).
The auto-fillFungsi memberitahu grid untuk berbaris banyak kolom (atau baris) mungkin tanpa meluap wadah. (Ini dapat membuat perilaku yang mirip dengan tata letak fleksibel flex-wrap: wrap.)
The minmax()fungsi menetapkan minimum dan maksimum rentang ukuran untuk masing-masing kolom (atau baris). Dalam kode di atas, lebar setiap kolom akan menjadi minimum 30% dari wadah dan maksimum ruang kosong apa pun yang tersedia.
The frUnit mewakili sebagian kecil dari ruang bebas dalam wadah kotak. Ini sebanding dengan flex-growproperti flexbox .
Dengan grid-rowdan spankami memberi tahu item kisi berapa banyak baris yang harus mereka bentangkan.
Dukungan Browser untuk Grid CSS
- Chrome - dukungan penuh pada 8 Maret 2017 (versi 57)
- Firefox - dukungan penuh per 6 Maret 2017 (versi 52)
- Safari - dukungan penuh pada 26 Maret 2017 (versi 10.1)
- Edge - dukungan penuh pada 16 Oktober 2017 (versi 16)
- IE11 - tidak ada dukungan untuk spesifikasi saat ini; mendukung versi usang
Inilah gambaran lengkapnya: http://caniuse.com/#search=grid
Fitur overlay kisi keren di Firefox
Di alat pengembang Firefox, ketika Anda memeriksa wadah kotak, ada ikon kotak kecil di deklarasi CSS. Pada klik itu akan menampilkan garis besar grid Anda pada halaman.
Lebih detail di sini: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
