jonowa 3 automatyczna regulacja układu na siatce

Question

Zbudowałem deskę rozdzielczą za pomocą jonów i siatki i tylko jednego rzędu jonów. rząd jonowy zawiera 10-12 jonów coli. Zasadniczo, gdy tylko szerokość ekranu zostanie osiągnięta, kolumny zaczynają płynąć w dół.

To wszystko jest dobre i zgodnie z oczekiwaniami. Jednak problem zaczyna się, gdy kolumny mają różną szerokość i wysokość. Zdefiniowałem col z 3 typami szerokości: 200px, 400px i 600px. Wysokość wynosi również 3 warianty: 200px, 400px i 600px. Więc ogólnie każdy col może mieć rozmiar 1 * 1, 2 * 1, 1 * 2, 2 * 2, 3 * 1 i 3 * 2.

Używam dragula, aby przeciągać i upuszczać tytuły, aby dostosować układ według potrzeb. Jednak początkowy układ zawsze jest renderowany z pewnymi dziurami, chociaż można je wypełnić za pomocą ręcznego przeciągania.

Jaki powinien być właściwy sposób postępowania z nim w początkowej fazie, aby uniknąć dziur w układzie.

Answer 1

Prawdopodobnie możesz użyć narzędzia css flex grow. Użyj jednego elementu nadrzędnego dla każdego wiersza i ustaw wartość css jako wartość dla każdej kolumny, używając parametru flex grow, aby zdefiniować ich rozmiary.

np. flex-grow: 1 - dla normalnego, flex-grow: 2 dla większej szerokości.

tutaj dołączyłem to, co zrobiłem. W moim przypadku numery kolumn powinny być dynamiczne, ale z tymi samymi.