Flexbox- og Grid-generator

Slik bruker du flexbox- og grid-lekeplassen

1. Velg en Layout: Flexbox eller Grid, eller start med en av Forhåndsinnstillingene (Sentrert, Navigasjonslinje, Kort som brytes, Sidepanel, Responsivt kortrutenett, Holy grail, 12 kolonner).
2. Sett egenskapene til 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 har justify-content, align-items, align-content, row-gap (px) og column-gap (px) felles.
3. Administrer Elementer med Legg til element, Fjern valgt element og Tilbakestill valgt element. Klikk på et element i forhåndsvisningen (eller gå til det med Tab og trykk Enter) for å velge det.
4. Rediger det valgte elementet: order og align-self i begge moduser, flex-grow, flex-shrink og flex-basis for flexbox, og grid-area, grid-column, grid-row og justify-self for grid.
5. Kopier CSS-kode og tilhørende HTML-kode med Kopier-knappene.

Alle kontroller er vanlige skjemafelt, så hele lekeplassen fungerer bare med tastaturet. CSS-en inneholder bare egenskapene du har endret fra standardverdiene, noe som holder den kort, og elementer med identiske innstillinger deler én regel (.item når alle er like).

Alt skjer i nettleseren din. Ingenting du skriver inn, sendes til en server.

Flexbox kort fortalt

Flexbox legger ut elementer langs én akse. flex-direction bestemmer hovedaksen (en rad eller en kolonne). justify-content fordeler elementene langs den (center, space-between …), og align-items plasserer dem på tverraksen. Med flex-wrap: wrap flyttes elementer som ikke får plass, til en ny linje, og align-content fordeler deretter mellomrommet mellom disse linjene.

Hvert element har tre egenskaper for størrelse, som vanligvis skrives sammen som flex:

• flex-basis: startstørrelsen (auto bruker innholdet eller width);
• flex-grow: hvor stor del av den ledige plassen elementet tar (0 = ingenting, 1 = en lik andel);
• flex-shrink: hvor mye det gir fra seg når plassen er knapp (0 = krymper aldri).

Forhåndsinnstillingen Sidepanel viser det klassiske mønsteret: et sidepanel med flex-basis: 200px og flex-shrink: 0, og et hovedområde med flex-grow: 1.

CSS Grid kort fortalt

Grid legger ut elementer i to dimensjoner. grid-template-columns: repeat(3, 1fr) lager tre like kolonner. fr er en andel av den ledige plassen. repeat(auto-fill, minmax(120px, 1fr)) lager så mange kolonner på minst 120px som det er plass til, og gir et responsivt kortrutenett uten media queries.

Elementene fyller cellene i rekkefølge, med mindre du plasserer dem: grid-column: span 2 gjør et element to kolonner bredt, og grid-column: 1 / -1 strekker det over hele raden.

Med grid-template-areas kan du tegne layouten med navn. Skriv én rad per linje, for eksempel header header og deretter nav main, og gi elementene grid-area: header eller grid-area: main. Et punktum markerer en tom celle. Hver rad må ha like mange celler, og hvert navn må danne et rektangel. Verktøyet advarer deg ellers.