A zero-dependency and lightweight library to make responsive grids of videos/photos/anything.
Here’s the demo loaded from good-grid.vercel.app for you to play around and get a feel of the library.
npm i good-grid
Here’s a minimal example of the full API usage in React:
import { createGrid } from 'good-grid';
import { useGridDimensions } from 'good-grid/react';
function App() {
const $el = useRef();
// hook that listens to resize of the element
// and returns it's dimensions
const dimensions = useGridDimensions($el);
const { width, height, getPosition } = createGrid({
dimensions,
count: participants.length,
aspectRatio: '16:9',
gap: 10,
});
return (
<div className="container" ref={$el}>
{participants.map((participant, index) => {
const { top, left } = getPosition(index);
return (
<div
className="grid-item"
style={{
width,
height,
top,
left,
position: 'absolute',
transition: '0.4s all',
}}
key={participant.name}
>
{participant.name}
</div>
);
})}
</div>
);
}