How to Set Up VSTACK: A Comprehensive Guide

Key Concepts

Here are some of the key concepts and properties of vstack:

• spacing

  The spacing property controls the amount of space between elements in the stack. It can be a number (representing the number of pixels) or a function that takes the current breakpoint as an argument and returns a number.

• align

  The align property controls the vertical alignment of elements in the stack. It can be one of the following values: 'start', 'center', 'end', 'stretch', or a function that takes the current breakpoint as an argument and returns one of these values.

• justify

  The justify property controls the horizontal alignment of elements in the stack. It can be one of the following values: 'start', 'center', 'end', or a function that takes the current breakpoint as an argument and returns one of these values.

• wrap

  The wrap property controls whether elements in the stack should wrap to the next line when there is not enough space. It can be one of the following values: 'wrap', 'nowrap', or a function that takes the current breakpoint as an argument and returns one of these values.

• breakpointCols

  The breakpointCols property controls the number of columns in the stack at different breakpoints. It should be an object with keys representing the breakpoint name (e.g., 'sm', 'md', 'lg') and values representing the number of columns at that breakpoint.

Example

Here is an example of a vstack component with custom spacing, alignment, and breakpoints:

import VStack from 'react-stack-grid';

const breakpointCols = {
  sm: 1,
  md: 2,
  lg: 3
};

function MyComponent() {
  return (
     (bp === 'sm' ? 8 : 16)}
      align="center"
      justify="space-between"
      wrap
      breakpointCols={breakpointCols}
    >
      
Element 1
Element 2
      
Element 3
    
  );
}