Konstruksjon av oppsett med CSS Grid-generator
CSS Grid-generator er et visuelt verktøy som lar deg designe todimensjonale rutenett direkte i nettleseren. Ved å definere rader og kolonner, angi avstander og tegne elementer direkte på rutenettet, genererer verktøyet ferdig CSS- og HTML-kode som kan kopieres direkte inn i egne prosjekter.
Verktøyet kjører i sin helhet lokalt. Rutenettet ditt bygges direkte i nettleseren din, og ingenting du angir her lastes opp til BroBroGo.
Grensesnittets parametere og rammer
For å skape et strukturert oppsett kreves nøyaktige verdier for rutenettets struktur. Verktøyet opererer med følgende rammer og inndata:
- Kolonner: Et heltall mellom 1 og 12.
- Rader: Et heltall mellom 1 og 12.
- Kolonneavstand: En verdi fra 0 til 48px.
- Radavstand: En verdi fra 0 til 48px.
- Kolonnestørrelser og Radstørrelser: Valgfrie, gyldige CSS-verdier som definerer bredde og høyde for hvert enkelt spor. Eksempler på gyldige verdier er
1fr,200px,auto,min-contentellerminmax(120px, 1fr). - Elementplassering: Markering av rektangulære områder ved å klikke og dra musen over cellene i rutenettet.
Verktøyet støtter maksimalt 16 elementer samtidig. Hvis du skriver inn en ugyldig verdi i et størrelsesfelt, for eksempel not-a-grid-track, vil inndatafeltet markeres som ugyldig. CSS-koden som genereres vil i slike tilfeller beholde den siste gyldige verdien som ble registrert.
Generering av CSS og HTML
Når du tegner eller definerer rutenettet, produserer verktøyet to separate kodeblokker:
- CSS: Inneholder stilregler for rutenettets container (
display: grid) samt posisjoneringsregler for hvert enkelt plassert element. - HTML: Genererer en overordnet container-div og individuelle
div-elementer for hvert plassert element.
Sammenslåing og optimalisering av kode
Verktøyet optimaliserer den genererte koden automatisk basert på verdiene du oppgir:
- Bruk av
repeat(): Hvis flere påfølgende kolonner eller rader deler nøyaktig samme størrelse, slås disse sammen til en mer konsisrepeat()-syntaks i den ferdige CSS-koden. - Sammenslåing av avstander: Kolonneavstand og radavstand defineres uavhengig av hverandre. Dersom verdiene for kolonneavstand og radavstand er identiske, slås de sammen til den enkle fellesegenskapen
gapi CSS-koden. - Overlapping: Elementer kan plasseres slik at de overlapper hverandre. Elementet som tegnes sist vil legge seg øverst i oppsettet.
Forhåndsdefinerte oppsett
For rask prototyping inneholder verktøyet fire ferdige maler under overskriften "Forhåndsinnstillinger":
| Forhåndsinnstilling | Struktur og oppførsel |
|---|---|
| Sidefelt | Oppsett tilpasset en hoveddel med et tilstøtende sidefelt. |
| Header og footer | Klassisk tredelt struktur med topplinje, hovedinnhold og bunnlinje. |
| Galleri | Genererer automatisk et rutenett bestående av 3 kolonner, 2 rader og 3 plasserte elementer. |
| Dashbord | Et mer komplekst oppsett egnet for administrasjonspaneler og informasjonsskjermer. |
Ved å bruke funksjonen "Tøm elementer" nullstilles hele rutenettet, noe som resulterer i en tom HTML-container og 0 aktive elementer. Knappen "Legg til element" genererer et nytt HTML-element i strukturen.
Sentrale konsepter i CSS Grid
For å få fullt utbytte av verktøyet er det viktig å forstå de underliggende CSS-mekanismene som genereres.
Fleksible enheter med fr
Brøkdel-enheten (fr eller fractional unit) representerer en proporsjonal del av den tilgjengelige plassen i rutenettbeholderen. Hvis en kolonne settes til 1fr og en annen til 2fr, vil den andre kolonnen tildeles dobbelt så mye av den resterende plassen som den første etter at eventuelle faste størrelser (som 200px) og avstander er trukket fra.
Sporstørrelser med minmax()
Funksjonen minmax(minimum, maksimum) definerer en størrelsesgrense som er både fleksibel og begrenset. For eksempel vil minmax(120px, 1fr) sørge for at en kolonne aldri blir smalere enn 120px, men at den kan utvide seg til å fylle den tilgjengelige plassen dersom det er rom for det.
Plassering med linjenummer
Når du drar over rutenettet for å plassere et element, beregner verktøyet elementets start- og sluttlinjer. Dette oversettes til egenskapene grid-column og grid-row i CSS-koden. Disse egenskapene definerer hvilke vertikale og horisontale linjer elementet skal spenne over, noe som muliggjør presis plassering uavhengig av elementenes rekkefølge i HTML-koden.
Ofte stilte spørsmål
Hvordan plasserer jeg elementer på rutenettet?
Klikk og dra over rutene for å markere et rektangel — når du slipper, blir det til et plassert underelement som spenner over disse kolonnene og radene. Hvert element du tegner får sin egen grid-column- og grid-row-regel i CSS-koden og en tilsvarende div i HTML-koden. Elementer kan overlappe, og det som tegnes sist legger seg øverst; bruk × på et element for å fjerne det.
Kan kolonner og rader ha forskjellige størrelser?
Ja. Hvert spor har sitt eget størrelsesfelt, og du kan skrive inn en hvilken som helst grid-verdi der — f.eks. 1fr, 200px, auto, min-content eller minmax(120px, 1fr). Spor som deler samme størrelse slås sammen med repeat() for å holde koden kort. Kolonneavstand og radavstand settes hver for seg, og slås sammen til en enkelt gap-verdi når de er like.
Hva gjør jeg med den genererte koden?
Kopier CSS- og HTML-koden side om side. HTML-koden gir deg containeren med én div per element, og CSS-koden definerer rutenettet og posisjonerer hvert element. Lim begge inn i prosjektet ditt for å få nøyaktig samme layout som du tegnet her.