Function getEasyLayout

  • getEasyLayout(extendFrom?, areasExtendFrom?): ((layoutTemplate, ...expressions) => LayoutComponents)

  • Quickly express advanced, extensible grid layouts with styled-components.

    Parameters

    Returns ((layoutTemplate, ...expressions) => LayoutComponents)

    Example

    const {
      layout: Container,
      areas: {
        Header,
        Side,
        Main,
        Footer,
      },
    } = getEasyLayout(styled.div)`
      header header header, 1fr
      side main main, 5fr
      footer footer footer, 1fr
      \\ 1fr 1fr 1fr
    `;

    const App = () => {
      return (
        <Container>
          <Header>Header Content</Header>
          <Side>Side Content</Side>
          <Main>Main Content</Main>
          <Footer>Footer Content</Footer>
        </Container>
      );
    };

Settings

Member Visibility

Theme