React js css grid

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

A thin wrapper to help make CSS Grid simpler and more expressive

License

bikk-uk/react-css-grid

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

A thin wrapper to help make CSS Grid simpler and more expressive

import Grid from '@react-css/grid'

All components are s with the React typed props fully exposed. You can change what is rendered for both and via the as prop:

Grid as='main'> MyComponent /> /Grid>

Grid inline> MyComponent /> /Grid>

To modify grid-template-rows :

Grid rows='50px auto 25px'> MyComponent /> /Grid>

To modify grid-template-columns :

Grid columns='10px 20px 30px'> MyComponent /> /Grid>

Grid gap='1em'> MyComponent /> /Grid>

To modify row-gap ( grid-row-gap ):

Grid rowGap='5px'> MyComponent /> /Grid>

Column Gap (Grid Column Gap)

To modify column-gap ( grid-column-gap ):

Grid columnGap='10px'> MyComponent /> /Grid>

Grid justifyItems='end'> MyComponent /> /Grid>

Grid justifyItemsStart>/Grid> // justify-items: start; Grid justifyItemsEnd>/Grid> // justify-items: end; Grid justifyItemsCenter>/Grid> // justify-items: center; Grid justifyItemsStretch>/Grid> // justify-items: stretch;

These are first come first served, in this order. They cannot be used if you have already provided the justifyItems prop. Providing multiple will result in a console warning.

Grid alignItems='stretch'> MyComponent /> /Grid>

Grid alignItemsStart>/Grid> // align-items: start; Grid alignItemsEnd>/Grid> // align-items: end; Grid alignItemsCenter>/Grid> // align-items: center; Grid alignItemsStretch>/Grid> // align-items: stretch;

These are first come first served, in this order. They cannot be used if you have already provided the alignItems prop. Providing multiple will result in a console warning.

Grid justifyContent='start'> MyComponent /> /Grid>

Grid justifyContentStart>/Grid> // justify-content: start; Grid justifyContentEnd>/Grid> // justify-content: end; Grid justifyContentCenter>/Grid> // justify-content: center; Grid justifyContentStretch>/Grid> // justify-content: stretch; Grid justifyContentSpaceAround>/Grid> // justify-content: space-around; Grid justifyContentSpaceBetween>/Grid> // justify-content: space-between; Grid justifyContentSpaceEvenly>/Grid> // justify-content: space-evenly;

These are first come first served, in this order. They cannot be used if you have already provided the justifyContent prop. Providing multiple will result in a console warning.

Grid alignContent='space-around'> MyComponent /> /Grid>

Grid alignContentStart>/Grid> // align-content: start; Grid alignContentEnd>/Grid> // align-content: end; Grid alignContentCenter>/Grid> // align-content: center; Grid alignContentStretch>/Grid> // align-content: stretch; Grid alignContentSpaceAround>/Grid> // align-content: space-around; Grid alignContentSpaceBetween>/Grid> // align-content: space-between; Grid alignContentSpaceEvenly>/Grid> // align-content: space-evenly;

These are first come first served, in this order. They cannot be used if you have already provided the alignContent prop. Providing multiple will result in a console warning.

Grid autoFlow='column'> MyComponent /> /Grid>

Grid autoFlowRow>/Grid> // grid-auto-flow: row; Grid autoFlowColumn>/Grid> // grid-auto-flow: column; Grid autoFlowDense>/Grid> // grid-auto-flow: dense;

These are first come first served, in this order. They cannot be used if you have already provided the autoFlow prop. Providing multiple will result in a console warning.

Grid autoRows='50px'> MyComponent /> /Grid>

To modify grid-auto-columns :

Grid autoColumns='min-content'> MyComponent /> /Grid>

Grid template='initial'> MyComponent /> /Grid>

Grid placeItems='start end'> MyComponent /> /Grid>

Grid placeContent='end space-between'> MyComponent /> /Grid>

To help with structuring your components, a Grid Item is also available.

Grid rows='6em' columns='4em 2em'> Grid.Item justifySelfStart> MyFirstComponent /> /Grid.Item> Grid.Item justifySelfEnd> MySecondComponent /> /Grid.Item> /Grid>

Grid Column Start | Grid Column End

To modify grid-column-start or grid-column-end :

Grid> Grid.Item columnStart=2> columnEnd=5>> MyComponent /> /Grid.Item> /Grid>

Grid> Grid.Item column='2 / 5'> MyComponent /> /Grid.Item> /Grid>

Grid Row Start | Grid Row End

To modify grid-row-start or grid-row-end :

Grid> Grid.Item rowStart='span' rowEnd='row1-end'> MyComponent /> /Grid.Item> /Grid>

Grid> Grid.Item row='3 / 6'> MyComponent /> /Grid.Item> /Grid>

Grid> Grid.Item area='header'> MyComponent /> /Grid.Item> /Grid>

Grid> Grid.Item justifySelf='center'> MyComponent /> /Grid.Item> /Grid>

Grid.Item justifySelfStart>/Grid.Item> // justify-self: start; Grid.Item justifySelfEnd>/Grid.Item> // justify-self: end; Grid.Item justifySelfCenter>/Grid.Item> // justify-self: center; Grid.Item justifySelfStretch>/Grid.Item> // justify-self: stretch;

These are first come first served, in this order. They cannot be used if you have already provided the justifySelf prop. Providing multiple will result in a console warning.

Grid> Grid.Item alignSelf='end'> MyComponent /> /Grid.Item> /Grid>

Grid.Item alignSelfStart>/Grid.Item> // align-self: start; Grid.Item alignSelfEnd>/Grid.Item> // align-self: end; Grid.Item alignSelfCenter>/Grid.Item> // align-self: center; Grid.Item alignSelfStretch>/Grid.Item> // align-self: stretch;

These are first come first served, in this order. They cannot be used if you have already provided the alignSelf prop. Providing multiple will result in a console warning.

Grid> Grid.Item placeSelf='center'> MyComponent /> /Grid.Item> /Grid>

All the React div props and TypeScript definitions are exposed/passed through. This allows for an identical development experience whilst being able to ignore any Grid related CSS.

Grid rows='50px auto' columns='4em auto 10em' onMouseEnter=onMouseEnter>> Grid.Item alignSelfCenter> MyComponent /> /Grid.Item> Grid.Item placeSelf='end' onClick=handleItemClick>> MyComponent /> /Grid.Item> /Grid>

CSS provided via styles will be applied last, this allows all generated CSS to be overridden.

Grid inline // this will get overridden style= display: 'grid', // this will override everything else >>> Grid.Item> MyComponent /> /Grid.Item> /Grid>

Rendering as different elements

If the as prop is not provided, it will default to a . The supported as values are:

Whilst the type definitions prevent you from using both the short and manual prop for each style, it is not feasible to expand this to stop you from being able to provide more than one of the short props for each style. These were implemented but due to the possible number of combinations, the developer experience was poor as VS Code tried to work out the Props via IntelliSense.

To help prevent accidentally doing this, a warning will log if you have provided multiple values that would overlap/contradict.

About

A thin wrapper to help make CSS Grid simpler and more expressive

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

React layout component based on CSS Grid Layout and built with styled-components

License

jxnblk/react-css-grid

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

React layout component based on CSS Grid Layout and built with styled-components

// Example usage import React from 'react' import Grid from 'react-css-grid' class App extends React.Component  render ()  return ( Grid width=320> gap=24>> div>Column/div> div>Column/div> div>Column/div> div>Column/div> /Grid> ) > >

• Responsive grid layout with zero media queries
• Simple API for handling tiled layouts
• Customizable column width and gutters

Sets the width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length.

Sets the gutter ( grid-gap ) between columns. Pass a number for pixel values or a string for any other valid CSS length.

Sets align-items to control child element alignment.

Источник