Flexbox
Dynamiczny układ muru nie jest możliwy w przypadku flexbox, przynajmniej nie w czysty i wydajny sposób.
Flexbox to jednowymiarowy system układu. Oznacza to, że może wyrównywać elementy wzdłuż linii poziomych LUB pionowych. Element flex jest ograniczony do swojego wiersza lub kolumny.
Prawdziwy system siatki jest dwuwymiarowy, co oznacza, że może wyrównywać elementy wzdłuż linii poziomych ORAZ pionowych. Elementy treści mogą jednocześnie obejmować wiersze i kolumny, czego nie mogą robić elementy flex.
Dlatego flexbox ma ograniczoną zdolność do budowania kratek. Jest to również powód, dla którego W3C opracowało inną technologię CSS3, Grid Layout .
row wrap
W kontenerze elastycznym z flex-flow: row wrapelementami elastycznymi należy zawijać do nowych rzędów .
Oznacza to, że element flex nie może być zawijany pod innym elementem w tym samym wierszu .
Zauważ powyżej, jak div # 3 zawija się poniżej div # 1 , tworząc nowy wiersz. Nie może zawijać się pod div # 2 .
W rezultacie, gdy przedmioty nie są najwyższe w rzędzie, pozostaje biała przestrzeń, tworząc brzydkie luki.
column wrap
Jeśli przełączysz się na flex-flow: column wrap, bardziej osiągalny jest układ przypominający siatkę. Jednak kontener w kierunku kolumn ma od razu cztery potencjalne problemy:
- Elementy Flex przepływają pionowo, a nie poziomo (tak jak potrzebujesz w tym przypadku).
- Kontener rozwija się w poziomie, a nie w pionie (jak układ Pinterest).
- Wymaga, aby pojemnik miał stałą wysokość, aby przedmioty wiedziały, gdzie owinąć.
- W chwili pisania tego tekstu ma on wady we wszystkich głównych przeglądarkach, w których kontener nie rozszerza się, aby pomieścić dodatkowe kolumny .
W rezultacie kontener w kierunku kolumn nie jest opcją w tym przypadku, a także w wielu innych przypadkach.
Siatka CSS z wymiarami pozycji undefined
Układ siatki byłby idealnym rozwiązaniem problemu, gdyby można było z góry określić różne wysokości elementów treści . Wszystkie inne wymagania mieszczą się w granicach możliwości Gridu.
Szerokość i wysokość elementów siatki musi być znana, aby zamknąć luki między otaczającymi elementami.
Tak więc Grid, który jest najlepszym CSS, jaki ma do zaoferowania do tworzenia poziomego układu murów, nie spełnia w tym przypadku problemów.
W rzeczywistości, dopóki nie pojawi się technologia CSS z możliwością automatycznego zamykania luk, CSS ogólnie nie ma rozwiązania. Coś takiego prawdopodobnie wymagałoby ponownego załadowania dokumentu, więc nie jestem pewien, czy byłoby to użyteczne lub wydajne.
Będziesz potrzebował scenariusza.
Rozwiązania JavaScript mają tendencję do stosowania pozycjonowania bezwzględnego, które usuwa elementy treści z przepływu dokumentu w celu ponownego uporządkowania ich bez przerw. Oto dwa przykłady:
Siatka CSS ze zdefiniowanymi wymiarami pozycji
W przypadku układów, w których znana jest szerokość i wysokość elementów treści, oto poziomy układ masonry w czystym CSS:
grid-container {
display: grid;
grid-auto-rows: 50px;
grid-gap: 10px;
grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
}
[short] {
grid-row: span 1;
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>
Jak to działa
- Utwórz kontener siatki na poziomie bloku. (
inline-gridbyłaby inna opcja)
grid-auto-rowsWłaściwość ustala wysokość automatycznie generowanych wierszy. W tej siatce każdy wiersz ma 50 pikseli wysokości.grid-gapNieruchomość jest skrótem grid-column-gapi grid-row-gap. Ta reguła ustawia odstęp 10 pikseli między elementami siatki. (Nie dotyczy obszaru między przedmiotami a pojemnikiem).grid-template-columnsWłaściwość określa szerokość wyraźnie zdefiniowanych kolumnach.
repeatOznaczenie określa wzór powtarzających kolumn lub rzędów ().
auto-fillFunkcja opowiada siatki wyrównać taką liczbę kolumn (lub wierszy), jak to możliwe bez przepełnienia pojemnika. (Może to spowodować podobne zachowanie do układu flex flex-wrap: wrap).
minmax()Funkcji wyznacza zakres maksymalnej i minimalnej wielkości dla każdej kolumny (lub wiersza). W powyższym kodzie szerokość każdej kolumny będzie wynosić minimum 30% kontenera i maksimum wolnego miejsca.
frUrządzenie stanowi część wolnej przestrzeni w zbiorniku siatki. Jest to porównywalne z flex-growwłaściwością flexboxa .
Za pomocą grid-rowi spanmówimy elementom siatki, ile wierszy powinny obejmować.
Wsparcie przeglądarek dla siatki CSS
- Chrome - pełne wsparcie od 8 marca 2017 r. (Wersja 57)
- Firefox - pełne wsparcie od 6 marca 2017 r. (Wersja 52)
- Safari - pełne wsparcie od 26 marca 2017 r. (Wersja 10.1)
- Edge - pełne wsparcie od 16 października 2017 r. (Wersja 16)
- IE11 - brak wsparcia dla aktualnej specyfikacji; obsługuje przestarzałą wersję
Oto pełny obraz: http://caniuse.com/#search=grid
Fajna funkcja nakładki siatki w przeglądarce Firefox
W narzędziach programistycznych Firefox dla deweloperów podczas sprawdzania kontenera siatki w deklaracji CSS znajduje się mała ikona siatki. Po kliknięciu wyświetla zarys twojej siatki na stronie.
Więcej szczegółów tutaj: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts
