Grid
Rutnät
Introduktion
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.
Installation och användning
- npm
- Yarn
- pnpm
npm install @midas-ds/grid
yarn add @midas-ds/grid
pnpm add @midas-ds/grid
import { Grid } from '@midas-ds/grid'
Grid
Grids skalas enligt följande specifikation.
| Skärmstorlek | Margin | Children | Kollumner | Gutter |
|---|---|---|---|---|
| 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 de direkt underliggande komponenter till Grid justeras enligt griddets bestämmelser. Justera med barnkomponenten <GridItem col="antal-kolumner"></GridItem>.