Grid

Rutnät

Storybook

Grid och GridItem är komponenter som bygger på CSS Flexbox för att skapa responsiva rutnätslayouter men i ett förbestämt rutnät.

size=8

size=4

size=4

size=8

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

GridItem / kolumner

Statiskt

Använd size på <GridItem> för att ange hur många kolumner varje element ska ta upp. Rutnätet är indelat i 12 kolumner, så size={6} betyder att elementet tar upp hälften av bredden (6 av 12 kolumner).

<Grid>
  <GridItem size={8}>size=8</GridItem>
  <GridItem size={4}>size=4</GridItem>
  <GridItem size={4}>size=4</GridItem>
  <GridItem size={8}>size=8</GridItem>
</Grid>

size=8

size=4

size=4

size=8

Responsivt

De responsiva brytpunkterna är xs, sm, md, lg och xl.

• xs: under 480px
• sm: 480 px - 767 px
• md: 768 px - 1023 px
• lg: 1024 px - 1279 px
• xl: över 1280 px

Exemplet nedan är som exemplet ovan fast responsivt i mindre storlekar. Kolumnerna blir hälften så breda på mindre skärmar och tar upp hela bredden på små skärmar.

<Grid>
  <GridItem size={{ xs: 12, sm: 6, md: 8 }}>xs: 12, sm: 6, md: 8</GridItem>
  <GridItem size={{ xs: 12, sm: 6, md: 4 }}>xs: 12, sm: 6, md: 4</GridItem>
  <GridItem size={{ xs: 12, sm: 6, md: 4 }}>xs: 12, sm: 6, md: 4</GridItem>
  <GridItem size={{ xs: 12, sm: 6, md: 8 }}>xs: 12, sm: 6, md: 8</GridItem>
</Grid>

size=xs: 12, sm: 6, md: 8

size=xs: 12, sm: 6, md: 4

size=xs: 12, sm: 6, md: 4

size=xs: 12, sm: 6, md: 8

Även om lg och xl inte är definerade i dessa exempel så fortsätter md-inställningen att gälla för storlekarna över den. Arbeta alltid från minsta till största skärmstorlek för ett enklare arbetsflöde med kolumner.

Alias

quarter, third, half, full är aliaser för size={3}, size={4}, size={6} och size={12}. Dessa kan användas för att göra koden mer läsbar.

Automatiska kolumner

I exemplet ovan används size för att ange hur många kolumner varje element ska ta upp. Size kan anges andra värden än nummer, till exempel auto för att en kolumn ska ta upp exakt så mycket plats som innehållet i den behöver.

<Grid>
  <GridItem size={8}>size=8</GridItem>
  <GridItem size='auto'>size=auto</GridItem>
  <GridItem size={{ xs: 12, sm: 6, md: 4 }}>size=4</GridItem>
  <GridItem size={{ xs: 12, sm: 6, md: 'auto' }}>xs: 12, sm: 6, md: auto</GridItem>
</Grid>

size=8

size=auto

size=xs: 12, sm: 6, md: 4

size=xs: 12, sm: 6, md: auto

Växande kolumner

Kolumner kan även ställas in till att ta upp all tillgänglig yta på en rad.

<Grid>
  <GridItem size={6}>size=6</GridItem>
  <GridItem size='auto'>size=auto</GridItem>
  <GridItem size='grow'>size=grow</GridItem>
</Grid>

size=6

size=auto

size=grow

Offset

För att skapa mellanrum mellan kolumner kan du använda offset på <GridItem>. Detta skapar ett tomrum innan elementet, vilket kan vara användbart för att justera layouten. Här är ett exempel där vi har ett element som tar upp 6 kolumner och ett annat som tar upp 3 kolumner med en offset på 3 kolumner och därmed har vi fyllt upp alla tolv kolumner.

<Grid>
  <GridItem size={6}>size=6</GridItem>
  <GridItem
    size={3}
    offset={3}
  >
    size=3, offset=3
  </GridItem>
</Grid>

size=6

size=3

Precis som size så kan offset även anges som ett objekt med responsiva brytpunkter. Detta gör att på mindre skärmar kommer andra kolumnen bryta till en ny rad eftersom vi överstiger tolv kolumner. Med 9 + 3 kommer elementet ligga mot högerkant av skärmen i mindre skärmar.

<Grid>
  <GridItem size={6}>size=6</GridItem>
  <GridItem
    size={3}
    offset={{ xs: 9, md: 3 }}
  >
    size=3, offset=xs: 9, md: 3
  </GridItem>
</Grid>

size=6

size=3

Grid / container

Föräldraelementet <Grid> är en container för rutnätet och bestämmer hur elementen under ska justeras.

Contained

Med contained kan du ställa in att rutnätet ska ha en maxbredd och centrerat innehåll på större skärmar. Detta är användbart för att skapa en responsiv layout som inte sträcker sig över hela skärmens bredd.

<Grid contained>
  <GridItem size={6}>size=6</GridItem>
  <GridItem size='auto'>size=auto</GridItem>
  <GridItem size='grow'>size=grow</GridItem>
</Grid>

Marginaler

Flex har inbyggda marginaler som anpassar sig efter skärmstorlek. Marginalerna är inställda på att ge en bra balans mellan innehåll och utrymme runtom. Dessa yttre marginaler går att stänga av med removeMargins om du vill ha ett rutnät utan marginaler.

<Grid removeMargins={true}>
  <GridItem size={8}>size=8</GridItem>
  <GridItem size={4}>size=4</GridItem>
</Grid>

Marginaler avstängda

---

size=8

size=4

Nästlad användning

Rutnät kan även användas inuti andra rutnät. Detta kan vara användbart för att skapa komplexa layouter där du vill ha flera nivåer av kolumner.

<Grid>
  <GridItem size={6}>
    <Grid removeMargins={true}>
      <GridItem size={6}>Nästlad 1</GridItem>
      <GridItem size={6}>Nästlad 2</GridItem>
    </Grid>
  </GridItem>
  <GridItem size={6}>size=6</GridItem>
</Grid>

Nästlad 1 - size=6

Nästlad 2 - size=6

size=6

Brytpunkter

Grids skalas enligt följande specifikation.

Namn	Skärmstorlek	Yttre marginaler	Underliggande element	Kolumner	Inre marginaler	Contained
xs	0 - 479 px	16 px	Skalas	12	16 px
sm	480 px - 767 px	16 px	Skalas	12	16 px
md	768 px - 1023 px	32 px	Skalas	12	16 px
lg	1024 px - 1279 px	32 px	Skalas	12	24 px
xl	över 1280 px	32 px	Skalas	12	24 px	Nej
xl	över 1280 px	Skalas	1368 px	12	24 px	Ja

API

Grid

Name	Type	Default	Description
fluid	boolean	false	Removes outer margins for nested use. First Grid on a page should have outer margins. @deprecated since v10.2.0 Use isContained prop instead.
isContained	boolean	false	A contained grid has a max-width and centered positioning on large screens.
removeMargins	boolean	false	Removes outer margins.

GridItem