React Responsive and dynamic Video Grid

Question

Hi Guys I am working on a project where I want a dynamic grid of div's that automatically fills the screen space, just like google meet does for the meeting participants. And I am struggling to implement that I am using tailwind css with nextjs, But not able to figure out how to make a grid like google meet.

return (
            <div className="flex flex-row h-full w-full">
                <div className="relative flex h-full w-full pb-16 ">
                    <FooterMeeting
                        isMessagesOpen={isMessagesOpen}
                        toggleMessages={() => {
                            setisMessagesOpen(!isMessagesOpen)
                        }}
                        audioPermession={audioPermession}
                        cameraPermession={cameraPermession}
                        toggleVideo={toggleVideo}
                        toggleAudio={toggleAudio}
                    />
                    <div className="flex w-full h-full p-2">
                        <div className="grid w-full grid-flow-col grid-cols-2 grid-rows-2 md:grid-cols-3 md:grid-rows-3 xl:grid-cols-4 xl:grid-rows-3 gap-2 justify-start overflow-x-scroll scrollDiv">
                            <VideoView />
                            <VideoView />
                            <VideoView />
                            <VideoView />
                        </div>
                    </div>
                </div>
                <MessagesSidebar isMessagesOpen={isMessagesOpen} closeMessages={() => { setisMessagesOpen(false) }} />
            </div>
        )

above is the jsx for grid div with VideoView as children's

const VideoView = (props) => {
    //refs
    const mainDiv = useRef();

    //state
    const [divHeight, setdivHeight] = useState(0)

    //lifecycle
    useLayoutEffect(() => {
        if (mainDiv.current) {
            setdivHeight(mainDiv.current.offsetWidth / 2)
        }
        return () => {

        };
    }, [])
    //methods

    //views
    return (
        <div ref={mainDiv} style={{ height: divHeight }} className=" relative flex w-full h-auto bg-gray-300 dark:bg-appColor-appLight rounded-xl justify-center items-center">
            <video className=" h-auto max-w-full rounded-xl overflow-hidden flipVideo object-cover" />
        </div>
    )
}

above is the VideoView component

here is the screenshot of current problem

It will be great if you can help!!

Answer 1

You want to adjust this part of the code:

   <div className="grid w-full grid-flow-col grid-cols-2 grid-rows-2 md:grid-cols-3 md:grid-rows-3 xl:grid-cols-4 xl:grid-rows-3 gap-2 justify-start overflow-x-scroll scrollDiv">
           <VideoView />
           <VideoView />
           <VideoView />
           <VideoView />
   </div>

                     

just change the className

className="grid grid-cols-2 gap-0"

this will create 2 X 2 system. if you have 6 , It will make 3X2. But if you want more control you can write in a css file.

className="container"

component.css

.container{
    // specify how many cols you want
    @apply grid gap-0 grid-cols-3
    
  // ' >* ' means target all of the children 
  // we are able to use '&' with postcss-nesting plugin
   &>*{
    @apply overflow-hidden;
    height:300px;
    max-height:500px;
  // or specify the height based on screen size 
  // sm-md-lg-x1-2x1
    @screen lg{
      height:400px}
    }
}