@byggforsk/fundament-grid

Fundament

Et designsystem for Byggforskserien.

Fundament Grid gir et fleksibelt og responsivt rutenett for å strukturere innhold i dine prosjekter.

Installasjon

Installer via npm:

npm install @byggforsk/fundament-grid

eller med Yarn:

yarn add @byggforsk/fundament-grid

Bruk

For å bruke Grid-komponentet, pakk innholdet ditt i <Grid.Container> Legg til individuelle elementer med <Grid.Item>, hvor du kan spesifisere egenskaper som xs, sm, md og lg for responsiv oppførsel.

Eksempel

import { Grid } from "@byggforsk/fundament-grid";

<Grid.Container spacing="2">
  <Grid.Item xs={12} sm={6} md={4} lg={12}>
    <div style={{ background: "skyblue", height: "100px" }}>Item 1</div>
  </Grid.Item>

  <Grid.Item xs={12} sm={6} md={8} lg={12}>
    <div style={{ background: "lightgreen", height: "100px" }}>Item 2</div>
  </Grid.Item>

  <Grid.Item xs={12} sm={6} md={6} lg={12}>
    <div style={{ background: "salmon", height: "100px" }}>Item 3</div>
  </Grid.Item>

  <Grid.Item xs={12} sm={6} md={6} lg={12}>
    <div style={{ background: "lightgray", height: "100px" }}>Item 4</div>
  </Grid.Item>
</Grid.Container>;