Function getEasyLayout

getEasyLayout(
    extendFrom?: FCWithChildren,
    areasExtendFrom?: FCWithChildren,
    options?: EasyLayoutSpacing,
): (
    layoutTemplate: TemplateStringsArray,
    ...expressions: any[],
) => LayoutComponents
Quickly express advanced, extensible grid layouts with styled-components. Template syntax:
- Row lines: <area area ...>, <track>
- Optional column line: \\ <track> <track> ...
Supported track units are fr, px, and %. Parsing and area-shape validation are shared from the app EasyLayout core. On web, final pixel distribution is resolved by the browser CSS Grid engine. Optional spacing (gap, padding) can be provided in options.
Parameters
- OptionalextendFrom: FCWithChildren
  Base component to extend for the layout container.
- OptionalareasExtendFrom: FCWithChildren
  Base component to extend for each area component.
- options: EasyLayoutSpacing = {}
  Optional layout spacing (gap, padding).
Returns (
layoutTemplate: TemplateStringsArray,
...expressions: any[],
) => LayoutComponents
Tagged template function that builds layout components.
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>
  );
};
```
- Defined in web/utils/EasyLayout.tsx:129

Function getEasyLayout

Parameters

Returns ( layoutTemplate: TemplateStringsArray, ...expressions: any[],) => LayoutComponents

Example

Settings

Returns (
layoutTemplate: TemplateStringsArray,
...expressions: any[],
) => LayoutComponents