Layout component

We can extend the idea of Base components to create Layout components.

Example

  1. const Grid = (props) => (
  2.   <Box {...props}
  3.     display='inline-block'
  4.     verticalAlign='top'
  5.     px={2}/>
  6. );
  8. const Half = (props) => (
  9.   <Grid {...props}
  10.     width={1 / 2}/>
  11. );
  13. const Third = (props) => (
  14.   <Grid {...props}
  15.     width={1 / 3}/>
  16. );
  18. const Quarter = (props) => (
  19.   <Grid {...props}
  20.     width={1 / 4}/>
  21. );
  23. const Flex = (props) => (
  24.   <Box {...props}
  25.     display='flex'/>
  26. );
  28. const FlexAuto = (props) => (
  29.   <Box {...props}
  30.     flex='1 1 auto'/>
  31. );

Usage

  1. const Layout = () => (
  2.   <div>
  3.     <div>
  4.       <Half>Half width column</Half>
  5.       <Half>Half width column</Half>
  6.     </div>
  7.     <div>
  8.       <Third>Third width column</Third>
  9.       <Third>Third width column</Third>
  10.       <Third>Third width column</Third>
  11.     </div>
  12.     <div>
  13.       <Quarter>Quarter width column</Quarter>
  14.       <Quarter>Quarter width column</Quarter>
  15.       <Quarter>Quarter width column</Quarter>
  16.       <Quarter>Quarter width column</Quarter>
  17.     </div>
  18.   </div>
  19. );

Related links: