SimpleGrid

Usage

SimpleGrid is a simple flexbox container where each child is treated as column. Each column take equal amount of space and unlike Grid component you do not control column span, instead you specify amount of columns per row:

<SimpleGrid cols={3}>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</SimpleGrid>

Breakpoints

Provide an array to breakpoints prop to define responsive behavior:

• maxWidth – max-width at which media query will work
• cols – amount of columns per row at given max-width
• spacing – optional spacing at given max-width, if not provided spacing from component prop will be used instead

Resize browser to see breakpoints behavior:

<SimpleGrid
  cols={4}
  spacing="lg"
  breakpoints={[
    { maxWidth: 980, cols: 3, spacing: 'md' },
    { maxWidth: 755, cols: 2, spacing: 'sm' },
    { maxWidth: 600, cols: 1, spacing: 'sm' },
  ]}
>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</SimpleGrid>

In this example:

• If screen width is more than 980px then component cols and spacing is used – 4 columns, lg spacing
• screen width < 980px and > 755px – cols = 3, spacing = sm
• screen width < 755px and > 680px – cols = 2, spacing = sm
• screen width < 680px – cols = 1, spacing = sm

Spacing

You can use either theme.spacing value or number value for spacing in px:

// xl spacing from theme.spacing
<SimpleGrid spacing="xl" />;

// 12px spacing
<SimpleGrid spacing={12} />;

Spacing also works in breakpoints:

// xl spacing from theme.spacing
<SimpleGrid breakpoints={[{ maxWidth: 755, cols: 2, spacing: 'xl' }]} />;

// 12px spacing
<SimpleGrid breakpoints={[{ maxWidth: 755, cols: 2, spacing: 12 }]} />;

Server side rendering

Component uses use-id hook to generate unique classes, provide static id prop to prevent props mismatch:

<SimpleGrid /> // -> random id generated both on client and server, props mismatch warning
<SimpleGrid id="my-grid" /> // -> id is static, no mismatches