@myntra/uikit-component-layout v1.13.96

import Layout, { layouts } from './src/layout'

Layout

<Layout type="stack">
  <div style={{ padding: '16px', border: '1px solid' }}>One</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Two</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Three</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Four</div>
</Layout>

• Stack
• Row

Stack Layout

You can assign relative spaces to elements.

<Layout type="stack" space={[1,2,1]}>
  <div style={{ padding: '16px', border: '1px solid' }}>25%</div>
  <div style={{ padding: '16px', border: '1px solid' }}>50%</div>
  <div style={{ padding: '16px', border: '1px solid' }}>25%</div>
</Layout>

Skip value in space to use auto width.

<Layout type="stack" space={[,1,]}>
  <div style={{ padding: '16px', border: '1px solid' }}>Auto</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Fill</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Auto</div>
</Layout>

Move items to right.

<Layout type="stack" space={[1]}>
  <div />
  <div style={{ padding: '16px', border: '1px solid' }}>A column on right.</div>
</Layout>

Choose distribution to get the required layout.

<>
  <Layout type="stack" distribution="spaceBetween">
    <div style={{ padding: '16px', border: '1px solid' }}>Optimize</div>
    <div style={{ padding: '16px', border: '1px solid' }}>Space</div>
    <div style={{ padding: '16px', border: '1px solid' }}>Between</div>
  </Layout>
  <Layout type="stack" distribution="spaceAround">
    <div style={{ padding: '16px', border: '1px solid' }}>Space</div>
    <div style={{ padding: '16px', border: '1px solid' }}>Around</div>
  </Layout>
</>

Wrap elements into multiple lines.

<Layout type="stack" wrap>
  <div style={{ padding: '16px', border: '1px solid', width: '40%' }}>One</div>
  <div style={{ padding: '16px', border: '1px solid', width: '40%' }}>Two</div>
  <div style={{ padding: '16px', border: '1px solid', width: '40%' }}>Three</div>
</Layout>

Row Layout

<>
  <Layout type="row" space={[1,2,1]}>
    <div style={{ padding: '16px', border: '1px solid' }}>One</div>
    <div style={{ padding: '16px', border: '1px solid' }}>Two</div>
    <div style={{ padding: '16px', border: '1px solid' }}>Three</div>
    <div style={{ padding: '16px', border: '1px solid' }}>Four</div>
  </Layout>
</>

Gutter width

<Layout type="row" space={[1,2,1]} gutter="large">
  <div style={{ padding: '16px', border: '1px solid' }}>One</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Two</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Three</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Four</div>
</Layout>

<Layout type="stack" gutter="none">
  <div style={{ padding: '16px', border: '1px solid' }}>One</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Two</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Three</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Four</div>
</Layout>

Stack

<Layout type="stack">
  <div style={{ padding: '16px', border: '1px solid' }}>One</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Two</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Three</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Four</div>
</Layout>

Row

<Layout type="row">
  <div style={{ padding: '16px', border: '1px solid' }}>One</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Two</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Three</div>
  <div style={{ padding: '16px', border: '1px solid' }}>Four</div>
</Layout>