Skip to main content

Gap

Gap will add spacing between the rows and columns of a flex container. You can specify if you want the gaps to be between only the rows, only the columns, or both. You can do this by passing in the corresponding gutter value to the API, for example

YGNodeStyleSetGap(node, YGGutterRow, amount);
<Layout config={{useWebDefaults: false}}>
  <Node
    style={{
      width: 200,
      height: 250,
      padding: 10,
      flexWrap: 'wrap',
      gap: 10,
    }}>
    <Node style={{height: 50, width: 50}} />
    <Node style={{height: 50, width: 50}} />
    <Node style={{height: 50, width: 50}} />
    <Node style={{height: 50, width: 50}} />
    <Node style={{height: 50, width: 50}} />
  </Node>
</Layout>