@artifak/grid
@artifak/grid is a component for quickly setting grid columns. Apart from that, the usual CSS grid styles can also be applied to your liking. You can also view the docs at Artifak Grid.
Installation
Yarn
yarn add @artifak/gridNPM
npm install @artifak/gridUsage
There are two properties here that you can set which are columnWidth and columnLength.
Column Width
This defines the sizing for the column based on the width that you provide.
import { Grid, GridItem } from '@artifak/grid';
type Props = {
images: string[]
}
const ImageGallery: React.FC<Props> = ({ images }) => {
return (
<Grid columnWidth="320px">
{image.map((image, i) => {
return (
<GridItem key={i}><img src={image} /></GridItem>
)
})}
</GridItem>
)
}Column Length
This defines the number of columns to distribute your grid contents into.
import { Grid, GridItem } from '@artifak/grid';
type Props = {
images: string[]
}
const ImageGallery: React.FC<Props> = ({ images }) => {
return (
<Grid columnLength={4}>
{image.map((image, i) => {
return (
<GridItem key={i}><img src={image} /></GridItem>
)
})}
</GridItem>
)
}