schachtel ʃaxtəl

The shallow grid with infinite depth

Documentation
Demo

When you put "Schachteln" in a "Schachtel" you "schachtel Schachteln"
When you put "boxes" in a "box" you "box boxes"

English - German translation

npm i schachtel

import React from 'react'
import {Grid, SubGrid, Column} from 'schachtel'

const Layout = props => (
  <Grid>
    <Column el='section'> First Column </Column>
    <Column el='aside'> second Column </Column>
    <Column>
      <SubGrid>
        No gutter
      </SubGrid>
      <SubGrid>
        <Column handheld={4} tablet={8}> Same grid as root level</Column>
      </SubGrid>
    </Column>
  </Grid>
)

import React from 'react'
import {Grid, SubGrid, Column} from 'schachtel'

const Layout = props => (
  <Grid>
    <Column handheld={4} tablet={8} desktop={12}> Always span fullWidth</Column>
    <Column handheld={12}> shortcut fullWidth </Column>
  </Grid>
)

<Column handheld={4} tablet={6}>
  <SubGrid>SubGrids have no gutter </SubGrid>
  <SubGrid>I am a subgrid with 4 columns. </SubGrid>
  <SubGrid>On tablets and above I have 6 columns. </SubGrid>
  <SubGrid>
    <Column handheld={6}>
      I am requesting 6 columns but will only get 4
      until more are available.
    </Column>
    <Column handheld={12}>
      If my parents allowed it, I would be 12 units wide.
    </Column>
  </SubGrid>
</Column>