Praktijktips van Aanpak voor een CSS-Metselwerk Lay-out

0
11

Metselwerk lay-out, op het web, is wanneer voorwerpen van ongelijke grootte worden vastgelegd, zodanig dat er geen ongelijke gaten. Ik denk dat de term werd bedacht (of op zijn minst populair) voor het web door David DeSandro vanwege zijn populaire Metselwerk JavaScript-bibliotheek, die al sinds 2010.

JavaScript bibliotheek. Niets tegen in JavaScript, maar het is begrijpelijk dat we misschien niet willen leunen op het voor het doen van lay-out. Is er iets wat we kunnen doen in CSS direct deze dagen? Sorta.

Verticaal Is om met onregelmatige bodems OK?

Als dat zo is, dan CSS kolommen zal het prima doen.

Zie de Pen Metselwerk met Columns van Chris Coyier (@chriscoyier) op CodePen.

Flexbox kan doen verticale kolommen met rafelige uiteinden te

Maar het is niet zo slim, want je moet een hoogte van zo ‘ n soort te krijgen om wrap de kolommen. U zult ook moeten expliciet zijn over de breedte in plaats van te beslissen kolommen voor u.

Maar het is goed te doen en het maakt de auto ruimte in de gaten als er ruimte is.

Zie de Pen Metselwerk met Flexbox door Chris Coyier (@chriscoyier) op CodePen.

Heeft u behoefte aan een schone bodem rand? Een Flexbox/JavaScript combo kan helpen.

Jamie Perkins oorspronkelijk schreef dit, dan Janosh Riebesell opnieuw geschreven, en nu ben ik porten hier.

Het geheel geen rekening hield met de orde en vraagt de kinderen om flexy over hun hoogte, maar het is de truc:

Zie de Pen Metselwerk met Flexbox + JS door Chris Coyier (@chriscoyier) op CodePen.

Is horizontale lijn metselwerk OK?

Als het is gewoon de ongelijke baksteen kijken je na, dan horizontale metselwerk is veel makkelijker. Je kan waarschijnlijk zelfs drijvend spul als je niet de zorg over de rafelrand. Als u wilt houden het op een blok… flexbox met een toegestane flex-groeien is het ticket.

Zie de Pen Metselwerk met Flexbox + JS door Chris Coyier (@chriscoyier) op CodePen.

Je zou denken CSS grid kan helpen

CSS grid is zeer verbazingwekkend en nuttig in een CSS developer ‘ s het dagelijks leven, maar het is niet echt ontworpen voor metselwerk stijl lay-outs. CSS grid is over het definiëren van regels en het plaatsen van dingen langs die lijnen, waar de vrijmetselarij is dat elementen einde waar ze kan, maar nog steeds het uitoefenen van sommige positionele invloed.

Balázs Sziklai is een mooi voorbeeld van de auto stroomt rasters die alle overlappen elkaar mooi, met vrij goede horiziontal bestellen:

Zie de Pen Ware Metselwerk met rasterlay-out door Balázs Sziklai (@balazs_sziklai) op CodePen.

Maar je kunt zien hoe streng de regels zijn. Er is een manier dat wel!

Rooster + JavaScript-maniplated rij

Andy schreef op blote voeten een geweldige gids. De truc is het instellen van herhalende raster van rijen die zijn vrij kort, waardoor de elementen vallen in het rooster horizontaal als ze kunnen, dan is het aanpassen van hun hoogten overeenkomen met de grid met een aantal vrij licht wiskunde om te berekenen hoeveel rijen zij moet leggen.

Zie de Pen CSS Grid Metselwerk (Stap 10) door Andy op blote voeten (@andybarefoot) op CodePen.

DOM verschoven elementen in een CSS-kolommen indeling

Wat mensen willen over het algemeen is kolom-stapelen (gevarieerd heights op basis van elementen), maar met horizontale bestellen. Dat laatste grid demo hierboven gaat het vrij goed, maar het is niet de enige manier.

Jesse Korzan aangepakt is het met CSS kolommen. Het moet JavaScript en om het gedaan te krijgen. In dit geval verschuift de elementen in de DOM om ze van links naar rechts, terwijl het verstrekken van een horizontale stack met gebruik van een CSS-kolommen lay-out. Dit introduceert een beetje van de toegankelijkheid probleem, aangezien de visuele volgorde (van links naar rechts) en de bron volgorde (van boven naar beneden) zijn verschillende super & dash; al is het misschien op te lossen met programmatische tabindex?

Er is ook de oorspronkelijke bibliotheek

Wegzweven, mijn pretties.

Zie de Pen Metselwerk met Metselwerk van Chris Coyier (@chriscoyier) op CodePen.