[CSS] responsywny układ galerii

Question

Witajcie. Mam pytanie odnoście tworzenia takiego układu galerii. Interesuje mnie mniej więcej coś takiego (wiem, że grafika nie jest idealnie równa, ale mam nadzieję, że wiecie o co mi chodzi)

Ważne jest to, żeby układ był w pełni responsywny. Próbowałem to ugryźć na wiele sposobów - za pomocą flex-boxów, kolumn i nawet jako taki układ mi wychodził, ale sam efekt w ogóle mi się nie podobał. Albo leżała responsywność, albo szpara między dużym zdjęciem i małymi z boku była za duża. Chciałbym to zrobić w samym css, bez udziału Bootstrapa.

Comments

jak na moje najprostszy układ gridów dostosowanych do wymagań, ot co :P

Answer 1

Całość w display: flex ( container ). Następnie duży blok w osobny div a te dwa małe po prawej w osobny. W tym po prawej dajesz flex-flow: column nowrap. Dolny wiersz w nastepny blok i dajesz flex-flow: row wrap. Nastepnie zabawa z mediami :)

Oczywiście w dużym uproszczeniu.

Comments

Robiłem tak, ale efekt mi się nie podobał, np. szpary pomiędzy dużym zdjęciem i małymi była za duża, jeśli ustawiłem align-items na flex-end. Jeżeli ustawiłem to inaczej, to  górna część nie była odpowiednio wyrównana z dolnymi wierszami. Jutro jeszcze raz spróbuję to zrobić.

---

Na spokojnie sobie to rozrysuj. Jeśli Ci wyjdzie to wierz mi, ale efekt nauczania będzie piorunujący.

---

a na jakich jednostkach operować? vh, procenty, piksele?

---

Procenty + piksele, z przewagą procentów

---

Chodzi o to, że jeśli kontener zawierający duże zdjęcie i te małe po prawej jest wyrażony w procentach, podobnie jak dwa kontenery w nim to nie zadziała flex-wrap, tylko cały kontener będzie się proporcjonalnie zmniejszał, aż zadziała media dla niższych rozdzielczości. I tutaj pojawia się podobny. Jak zrobić, żeby odstępy od innych zdjęć były mniej więcej równe, a całość była responsywna.

---

użyj margin / max-width. Lub po prostu dla danej szerokości uzyj flex-direction: column :)

Możesz też pobawić się z orderem jesli chcesz uzyskać inny efekt na mobilce.