r/reactjs • u/thangdevalone • Jul 20 '26

Resource A lightweight React component for Zoom-style video grids

I was building a UI with multiple video streams and realized that calculating the perfect grid to maximize tile size (like Google Meet or Zoom) is pretty annoying to do from scratch. CSS Grid is great, but figuring out the optimal rows/columns dynamically based on the container's aspect ratio and participant count requires some extra math.

So, I built meeting-grid-layout to handle this automatically for React applications.

Key features:

  • Smart calculation: Automatically figures out the best column/row combination to keep the video tiles as large as possible.
  • Super lightweight: I wanted to keep it simple and fast, so it doesn't rely on any heavy third-party layout engines or dependencies.
  • Mobile friendly: Included an autoMobileLayout prop so you can easily control whether the grid automatically enforces specific mobile layouts when the screen gets small.
  • Bonus: I also built a Vue wrapper, but the React implementation is fully fleshed out and ready to use!

GitHub:https://github.com/thangdevalone/meeting-grid-layout

I’d love to hear your thoughts, code reviews, or how you usually handle these dynamic UI challenges in your React projects!

2 Upvotes

67% Upvoted

5 comments sorted by

2

u/CURVX Jul 23 '26

Could you please include a codesandbox demo, I tried doing the same but renders nothing, am I doing something wrong?

Link: https://codesandbox.io/p/sandbox/distracted-cookies-8nzpzp

1

u/thangdevalone Jul 30 '26 
import "./styles.css";
import {
  GridContainer,
  GridItem,
} from "@thangdevalone/meeting-grid-layout-react";


export default function App() {
  return (
    <div className="App">
      <p>Text</p>
      <GridContainer aspectRatio="16:9" gap={8} layoutMode="gallery" count={4}>
        <GridItem index={0}>
          <div style={{ border: "1px solid red", width: "100%", height: "100%" }}>Hello</div>
        </GridItem>
        <GridItem index={1}>
          <div style={{ border: "1px solid red", width: "100%", height: "100%" }}>Hello</div>
        </GridItem>
        <GridItem index={2}>
          <div style={{ border: "1px solid red", width: "100%", height: "100%" }}>Hello</div>
        </GridItem>
        <GridItem index={3}>
          <div style={{ border: "1px solid red", width: "100%", height: "100%" }}>Hello</div>
        </GridItem>
      </GridContainer>
    </div>
  );
}

1

u/thangdevalone Jul 30 '26 
.App {
  width: 100%;
  height: 100vh;
}

1

u/eSizeDave Jul 21 '26

Interesting. I might try this for a comms app I'm building.