Flexbox- og grid-generator

Sådan bruger du flexbox- og grid-generatoren

1. Vælg et Layout: Flexbox eller Grid, eller start med en af Forudindstillinger (Centreret, Navigationslinje, Ombrydende kort, Sidebjælke, Responsivt kortgitter, Holy grail, 12 kolonner).
2. Indstil egenskaberne for Beholder. For flexbox: flex-direction og flex-wrap. For grid: grid-template-columns, grid-template-rows, grid-auto-flow, justify-items og grid-template-areas. Begge deler justify-content, align-items, align-content, row-gap (px) og column-gap (px).
3. Administrér Elementer med Tilføj element, Fjern valgt element og Nulstil valgt element. Klik på et element i eksemplet (eller tab hen til det, og tryk på Enter) for at vælge det.
4. Rediger det valgte element: order og align-self i begge tilstande, flex-grow, flex-shrink og flex-basis til flexbox og grid-area, grid-column, grid-row og justify-self til grid.
5. Kopiér CSS-kode og den tilhørende HTML-kode med deres Kopiér-knapper.

Alle kontroller er almindelige formularfelter, så hele værktøjet kan bruges med tastaturet alene. CSS-koden indeholder kun de egenskaber, du har ændret fra standardværdierne, så den bliver kort, og elementer med identiske indstillinger deler én regel (.item, når alle er ens).

Alt foregår i din browser. Intet, du indtaster, sendes til en server.

Flexbox kort fortalt

Flexbox placerer elementer langs én akse. flex-direction bestemmer hovedaksen (en række eller en kolonne). justify-content fordeler elementerne langs den (center, space-between …), og align-items placerer dem på tværaksen. Med flex-wrap: wrap flytter elementer, der ikke kan være der, til en ny linje, og align-content fordeler så mellemrummet mellem linjerne.

Hvert element har tre størrelsesegenskaber, som oftest skrives samlet som flex:

• flex-basis: startstørrelsen (auto bruger indholdet eller width);
• flex-grow: hvor stor en del af den ledige plads elementet tager (0 = ingen, 1 = en lige stor andel);
• flex-shrink: hvor meget det giver afkald på, når pladsen er knap (0 = skrumper aldrig).

Forudindstillingen Sidebjælke viser det klassiske mønster: en sidebjælke med flex-basis: 200px og flex-shrink: 0 og et hovedområde med flex-grow: 1.

CSS Grid kort fortalt

Grid placerer elementer i to dimensioner. grid-template-columns: repeat(3, 1fr) laver tre lige store kolonner. fr er en andel af den ledige plads. repeat(auto-fill, minmax(120px, 1fr)) laver så mange kolonner på mindst 120px, som der er plads til, og det giver et responsivt kortgitter uden en eneste media query.

Elementerne fylder cellerne i rækkefølge, medmindre du placerer dem: grid-column: span 2 gør et element to kolonner bredt, og grid-column: 1 / -1 strækker det over hele rækken.

Med grid-template-areas kan du tegne layoutet med navne. Skriv én række pr. linje, for eksempel header header og derefter nav main, og giv elementerne grid-area: header eller grid-area: main. Et punktum markerer en tom celle. Hver række skal have lige mange celler, og hvert navn skal danne et rektangel. Ellers advarer værktøjet dig.