.finally(React)

English
Copyright © 2023-currentdotfinally, LLC

Grid

An easily customizable and responsive grid system

FinallyReact's grid system can be used by importing the Row and Column components. It works with percent based inputs that determine how content should be presented on different screen sizes.

You can start by using the Row component to specify rows on your page, then as many Column components as needed within. Each Column component has props for xs (extra small), sm (small), md (medium), lg (large), xl (extra large) and xxl (extra extra large). Each takes a number between 0 and 100, representing the percentage of the row that the column occupies when the screen is that size.

For example, this would be one row with one column that takes up 100% of the row:

In that scenario, the percent defined for xs will apply to all sizes larger. If you add a percentage for a larger size, than that'll apply to that size or larger.

In the below example, each column will be 100% of the Row when the screen is xs or sm and 50% of the Row when the screen is md, lg, xl, or xxl.

Breakpoints

Based on the entire width, in pixels, of the browser window. Important: these breakpoints are based on pixels while the Column size props are based on width percentages.

Note: these can be configured in your app through a config file

xs (extra small)
600px
sm (small)
900px
md (medium)
1200px
lg (large)
1600px
xl (extra large)
2000px
xxl (extra extra large)
2400px

Examples

Change your browser width to test responsive capabilities of these examples

An independent Row

Row
Grid: An independent Row

Two Columns

Two Columns in a Row, both with sm={100} and md={50}

Column 1
Column 2
Grid: Two Columns

Three Columns

Three Columns in a Row, with various horizontal and vertical alignments

Column 1
Column 2
Column 3
Grid: Three Columns

Four Columns

Four Columns in a Row, with the first Column taking half of the Row on larger screens

Column 1
Column 2
Column 3
Column 4
Grid: Four Columns

Custom Column Props

You can define custom props to apply when the screen is a specific size. For example, this column will change colors when the screen width is "md"

Column 1
Grid: Custom Column Props

Row Props

Prop NameProp TypeDescription
horizontalAlign'left', 'center', 'right'Horizontal alignment of items in Row
simplebooleanDoes not apply flex to the row
verticalAlign'top', 'center', 'bottom'Vertical alignment of items in Row

Column Props

Prop NameProp TypeDescription
horizontalAlign'left', 'center', 'right'Horizontal alignment of items in Column
lgnumberWidth % on large screens
lgPropsHTMLAttributeslgPropsDesc
mdnumberWidth % on medium screens
mdPropsHTMLAttributesmdPropsDesc
smnumberWidth % on small screens
smPropsHTMLAttributessmPropsDesc
verticalAlign'top', 'center', 'bottom'Vertical alignment of items in Column
xlnumberWidth % on extra-large screens
xlPropsHTMLAttributesxlPropsDesc
xsnumberWidth % on extra-small screens
xsPropsHTMLAttributesxsPropsDesc
xxlnumberWidth % on extra-extra-large screens
xxlPropsHTMLAttributesxxlPropsDesc