Et designsystem for Byggforskserien.
Fundament Grid gir et fleksibelt og responsivt rutenett for å strukturere innhold i dine prosjekter.
Installer via npm:
npm install @byggforsk/fundament-grid
eller med Yarn:
yarn add @byggforsk/fundament-grid
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.
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>;