A simple, responsive image gallery using CSS Grid with `grid-auto-flow: dense;` to ensure a compact layout by filling in gaps automatically.
npm install grid-densegrid-auto-flow: dense; to ensure a compact layout by filling in gaps automatically.
bash
npm i grid-dense
`
Usage
$3
`bash
const images = (maxNum = 100) => {
const templateImage = [
{
src: "",
},
];
const arr = [];
for(let i = 0; i < maxNum; i++) {
const randomNumber = Math.floor(Math.random() * templateImage.length);
arr.push(templateImage[randomNumber]);
}
return arr;
}
/>
`
$3
| Prop | Type | Description |
|----------|-----|---------------|
| images | Images[] | important property for each image from src object |
| zoom | number | property for define col size. the col multiple of 9. default value of zoom is 1 |
| space | string | property make space each images. default value of space 5px`