Grid

Rutnät

Storybook

Grid baserat på tekniken display: grid; i css. Grid är både en container för maxbredd och ett underliggande grid med marginaler och tomrum mellan underliggande element.

Komponenterna Grid och Flex har samma innebörd, använd den vars teknik du är mest bekväm med. För komplexa grid kan Grid vara enklare att hantera.

col=12

col=3

col=4

col=5

col=4

col=4

col=4

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

import { Grid, GridItem } from '@midas-ds/components'

<Grid>
  <GridItem col={12}>
    <span>col=12</span>
  </GridItem>
  <GridItem col={3}>
    <span>col=3</span>
  </GridItem>
  <GridItem col={4}>
    <span>col=4</span>
  </GridItem>
  <GridItem col={5}>
    <span>col=5</span>
  </GridItem>
  <GridItem col={4}>
    <span>col=4</span>
  </GridItem>
  <GridItem col={4}>
    <span>col=4</span>
  </GridItem>
  <GridItem col={4}>
    <span>col=4</span>
  </GridItem>
</Grid>

Grid

Grids skalas enligt följande specifikation.

Skärmstorlek	Yttre marginaler	Underliggande element	Kolumner	Inre marginaler
0 - 767 px	16 px	Skalas	1	16 px
768 px - 1199 px	32 px	Skalas	12	16 px
1200 px - 1440 px	32 px	Skalas	12	24 px
> 1440 px	Skalas	1368 px	12	24 px

Riktlinjer

När ska du använda Grid ?

Grid används för att strukturera upp en sida och placera olika saker i kolumner. Med gridkomponenten får du med dig ovan justeringar för responsivitet samt mellanrum mellan kolumner.

Så här använder du Grid

Använd <Grid></Grid> som komponent och justera direkt underliggande komponenter med inställningar i Grid. Justera med barnkomponenten <GridItem col="antal-kolumner"></GridItem>.

API

Grid

Name	Type	Default	Description
fluid	boolean	false	Removes outer margins for nested use. First Flex on a page should have outer margins.

GridItem