Correct 'verspringen' van verschillende DIV's

[Amarog]

Mijn vraag

Ik ben bezig een nieuwe site in elkaar aan het boksen en wil wat nieuwe layout technieken gebruiken (voor mij dan toch). Ik werk met allerlei DIV's van verschillende hoogte, deze worden gevuld door server input en kunnen dus geen vaste hoogte hebben, ze hebben wel een vaste breedte.

Nu wil ik dat deze DIV's indien het scherm kleiner wordt gewoon onder elkaar gaan springen.

Wat ik al gevonden of geprobeerd heb
Bovenstaande vraag lukt met de float left. Of de DIV's in een container plaatsen en flexbox gebruiken.
Echter knelt daar ook het schoentje, daar de DIV's van verschillende hoogte zijn worden ze nooit netjes onder elkaar geplaatst. Er blijft altijd wat ruimte tussen. Nu kan ik dat wel gaan aanpassen met margin-top en dergelijk en wat spelen daarmee. Maar dat is niet de oplossing. Daar de DIV's altijd een variabele hoogte hebben gaat dat dus al vlug mis...

Ik heb me al zot gezocht op google, maar daar krijg ik ook altijd de flexbox optie of de float optie en dergelijk. Nergens vind ik ergens een oplossing.

Grafische uitleg
Mijn site ziet er op normale grootte uit zoals het bovenste kadertje.
Na het verkleinen van het scherm springen de DIV's onder elkaar maar zie je mooi in het cirkeltje dat er toch wat whitespace zit tussen de DIV's.
Het resultaat zou moeten zijn zoals het kadertje rechts onder.



Alle hulp is welkom.

Groeten,
Luke

[Alm4riC]

Het heet colum-count. Hiermee kun je de kolommen netjes naast elkaar rangschikken. Hieronder even een kleine JSFiddle:
http://jsfiddle.net/9qh52ncm/

Succes

[Amarog]

Jup, dat is het blijkbaar. Ik moet wel even wat code aanpassen in de site maar kom. Ik zal eens zien wat hier de mogelijkheden zijn.

Bedankt, na al dat googlen heb ik dit niet 1x tegen gekomen

[Harrie_]

Maak je gebruik van Bootstrap @Amarog ?

[Amarog]

Neen, ik probeer zo weinig mogelijk voorgeschreven hulpmiddelen te gebruiken. Ik weet het, soms kan dat zo eenvoudig zijn... Maar de site's die ik maak zijn meestal voor persoonlijk gebruik of voor héél kleine doelgroepen.

In al de jaren dat ik nu al website's programmeer heb ik een eigen basis opgebouwd waar ik altijd vanuit begin. En af en toe moet de code wat bijgewerkt worden voor nieuwe mogelijkheden.

Tabellen - > Divs -> Floating Divs -> Flexbox is zo maar eventjes een voorbeeld

Iedereen zal wel zijn eigen systeem hebben.

Wat wel niet wil zeggen dat ik ze nooit gebruik. Ik probeer er alleen zoveel mogelijk uit te leren en het dan zelf te schrijven.

[Verwijderd]

Amarog schreef op zondag 31 december 2017 @ 12:42:

Tabellen - > Divs -> Floating Divs -> Flexbox is zo maar eventjes een voorbeeld

Prepare for CSS Grid is weer zoiets als tabellen maar dan in modern jasje. Waarin je eigenlijk weer de flexbox toepast.
Flexbox is 1 dimensionaal en CSS Grid 2 dimensionaal.
Je blijft leren met de steeds veranderende browsers hoor!

[Amarog]

Howlymoly!! CSS Grid is awesome!! Ammai, De site die je opgaf leerde me ook werken met Flexbox. Héél raar dat CSS Grid me daar niet is opgevallen.

Bedankt voor alle antwoorden. Er gaat weer een nieuwe CSS wereld open