Grid

En grid brukes som en CSS grid.

Komponenten er klar til testing, men ikke ferdig

Komponenten har blitt utarbeidet nok til at det ikke kommer store endringer, men trenger å bli testet for å avdekke behov. Gi tilbakemelding om noe lugger eller mangler.

Breaking changes varsles i endringsloggen som patches, ikke som major oppdateringer, for å unngå versjonsinflasjon.

Send innspill

Eksempler

Standard

<Grid gap="md">
  <GridItem col="span 6">
    <div className="exampleBox">1</div>
  </GridItem>
  <GridItem col="span 6">
    <div className="exampleBox">2</div>
  </GridItem>
  <GridItem col="span 12">
    <div className="exampleBox">3</div>
  </GridItem>
  <GridItem col="span 4">
    <div className="exampleBox">4</div>
  </GridItem>
  <GridItem col="span 4">
    <div className="exampleBox">5</div>
  </GridItem>
  <GridItem col="span 4">
    <div className="exampleBox">6</div>
  </GridItem>
  <GridItem col="span 1">
    <div className="exampleBox">7</div>
  </GridItem>
  <GridItem col="span 1">
    <div className="exampleBox">8</div>
  </GridItem>
  <GridItem col="span 1">
    <div className="exampleBox">9</div>
  </GridItem>
  <GridItem col="span 1">
    <div className="exampleBox">10</div>
  </GridItem>
</Grid>

Kolonner

Alle grid-column attributter er støttet på GridItem

<Grid gap="md">
  <GridItem col="1/-1">
    <div className="exampleBox">1</div>
  </GridItem>
  <GridItem col="1/8">
    <div className="exampleBox">2</div>
  </GridItem>
  <GridItem col="2/span 5">
    <div className="exampleBox">3</div>
  </GridItem>
  <GridItem col="span 9">
    <div className="exampleBox">4</div>
  </GridItem>
  <GridItem col="-8/-3">
    <div className="exampleBox">5</div>
  </GridItem>
</Grid>

Flere rader

Det er også mulig å definere grids med flere rader, og la elementer bruke mer enn én rad.

<Grid gap="md" rows={3}>
  <GridItem col="span 6" row="span 2">
    <div className="exampleBox">1</div>
  </GridItem>
  <GridItem col="span 6">
    <div className="exampleBox">2</div>
  </GridItem>
  <GridItem col="span 6" row="span 2">
    <div className="exampleBox">3</div>
  </GridItem>
  <GridItem col="span 6">
    <div className="exampleBox">4</div>
  </GridItem>
</Grid>

Per breakpoint

Et grid kan bygges opp til å endre seg per breakpoint-størrelse, slik at man kan ha flere kolonner på stor skjerm, og alt under hverandre på liten skjerm. For å få til dette kan man bruke useCurrentBreakpoint-hooken sammen med calcBreakpointValue for å regne ut verdier for props basert på breakpoint. Endre vindustørrelse for å se grid'et endre seg.

function PerBreakpointGrid() {
  const breakpoint = useCurrentBreakpoint();

  const calcValue = (perBreakpointVals) =>
    calcBreakpointValue(perBreakpointVals, breakpoint);

  return (
    <Grid
      gap={calcValue({ base: "xs", medium: "sm", large: "lg", extraLarge: "xl" })}
      rows={calcValue({
        base: undefined,
        large: 3,
        extraLarge: 3,
      })}
    >
      <GridItem
        col={calcValue({
          base: "1/-1",
          medium: "span 8",
          large: "span 6",
          extraLarge: "span 4",
        })}
        row={calcValue({
          base: "span 1",
          medium: "span 1",
          large: "1/-1",
          extraLarge: "1/-1",
        })}
      >
        <div className="exampleBox">1</div>
      </GridItem>
      <GridItem
        col={calcValue({
          base: "1/-1",
          medium: "span 4",
          large: "span 6",
          extraLarge: "span 4",
        })}
      >
        <div className="exampleBox">2</div>
      </GridItem>
      <GridItem
        col={calcValue({
          base: "1/-1",
          medium: "span 4",
          large: "span 6",
          extraLarge: "span 4",
        })}
      >
        <div className="exampleBox">3</div>
      </GridItem>
      <GridItem
        col={calcValue({
          base: "1/-1",
          medium: "span 4",
          large: "span 6",
          extraLarge: "span 8",
        })}
      >
        <div className="exampleBox">4</div>
      </GridItem>
      <GridItem
        col={calcValue({
          base: "1/-1",
          medium: "span 4",
          large: "1/-1",
          extraLarge: "span 8",
        })}
      >
        <div className="exampleBox">5</div>
      </GridItem>
    </Grid>
  );
}

Retningslinjer

Brukes når du trenger å plassere elementer i et grid.

Kode

<Grid />

import { Grid } from "@aneo-org/design-react/clientComponents";

Prop	Type	Beskrivelse
gap?	`0 \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl"`	Rom mellom elementer. Korresponderer til et layout-spacing token.
rowGap?	`0 \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl"`	Rom mellom rader. Korresponderer til et layout-spacing token.
flow?	`"row" \| "column" \| "dense" \| "row dense" \| "column dense"`	Hvilken vei elementene i grid'et skal flyte. Korresponderer til `grid-auto-flow`. Standardverdi "row"
rows?	`number`	Antallet rader i grid'et. Trenger ikke spesifiseres med mindre du eksplisitt vil plassere elementer i en gitt rad.
as?	`React.ElementType`	Hvilket element Grid-elementet skal rendres som. Standardverdi "div".

<GridItem />

import { GridItem } from "@aneo-org/design-react/clientComponents";

Prop	Type	Beskrivelse
as?	`React.ElementType`	Hvilket element GridItem-elementet skal rendres som. Standardverdi "div".
col?	`grid-column-verdi`	Korresponderer til grid-column CSS-verdi.
row?	`grid-row-verdi`	Korresponderer til grid-row CSS-verdi. Bør kun brukes når man spesifiserer `rows` på Grid-komponenten.