@UiReact

Installation

The Basics

Themes

Colorations

Foundation

Main View

Components

Charts

Dialogs

Framer Animations

EzForms

Forms

Grids

Typography

Tools

Contributing

Feature request

UiGrid & UiGridItem

Package: @uireact/grid

^v3.0.15

Structure and organize the UI using a grid column

Installation ⚙️

1. Make sure you install peer dependencies first:

Expand peer dependencies

2. Install package:

npm i -S @uireact/grid

Usage

1. Using just UiGrid


  <UiGrid cols={3} rows={2} colsGap="four" justifyItems="center">
    <UiCard fullWidth fullHeight>
      <UiText>Item 1!</UiText>
    </UiCard>
    <UiCard fullWidth fullHeight>
      <UiText>Item 2!</UiText>
    </UiCard>
  </UiGrid>

2. Using UiGrid with UiGridItem


  <UiGrid cols={3} rows={2} colsGap="four">
    <UiViewport criteria="l|xl">
      <UiGridItem cols={2}>
        <UiCard>
          <UiText>Item 1!</UiText>
        </UiCard>
      </UiGridItem>
    </UiViewport>
    <UiGridItem placeSelf="stretch" rows={2}>
      <UiCard>
        <UiText>Item 2!</UiText>
        <UiText>Yeah, 2 rows is nice!</UiText>
      </UiCard>
    </UiGridItem>
  </UiGrid>

In this case as we are using the UigridItem we are able to manipulate each grid item on its own.

Also notice that in Item 1 we are making use of the UiViewport to render/remove it depending on the breakpoint

3. Using GridBreakpointsDistribution prop

This prop give you the ability to set a number of cols/rows depending on the breakpoint.


  <UiGrid cols={{ small: 1, medium: 2, large: 3, xlarge: 3 }} rows={2} colsGap={"five"} rowsGap={"six"}>
    <UiCard>
      <UiText>Item 1!</UiText>
    </UiCard>
    <UiCard>
      <UiText>Item 2!</UiText>
    </UiCard>
    <UiCard>
      <UiText>Item 3!</UiText>
    </UiCard>
  </UiGrid>

2. Using custom UiGridItem col span


  <UiGrid cols={4} colsGap="three">
    <UiGridItem cols={2}>
      <UiCard>
        <UiText>Item 1!</UiText>
      </UiCard>
    </UiGridItem>
    <UiGridItem placeSelf="stretch" cols={2} startingCol={3} startingRow={2}>
      <UiCard>
        <UiText>Item starting on the 3rd col and 2nd row</UiText>
      </UiCard>
    </UiGridItem>
  </UiGrid>