Is there a way to have a div fill the whole row?

[bit-pax]

All my images are the same size (like a grid) but I have "titles" that I'd like to have it fill the row width. The title currently takes up the same space as my other images (so only 1/5 of the row). Is there a way to make a grid item take over a whole row instead of a single column width?

I do want the titles to be just another grid item because when filtering or sorting, I'll be hiding them. Is there an easy way to have particular grid items fill the whole row? Any help would be awesome!

I love Shuffle. It's so cool to see all the cards move around but if I can't solve this I'll probably have to remove it from my web app.

[Vestride]

This demo has different sized elements https://codepen.io/Vestride/details/ZVWmMX as well as some of the other demos.

[bit-pax]

Hi Vestride,

I did look at the demo and the Golden Gate Bridge image takes up two column spaces but I don't see how it's being achieved. I have images that have to load so I wait for a single image to finish loading and then I get the dimensions and apply it to all my other images. I tried setting the width and height manually for the "title" divs but it didn't do anything. The following is how I am currently setting up my grid (without any additional code for titles). Any pointers on how to get a title div to take up the whole width would be awesome.

const grid = document.querySelector('.card-grid'); const Shuffle = window.Shuffle; var s; // shuffle instance

        var imgLoad = imagesLoaded( grid );

imgLoad.on('progress', oneImageLoaded);

        function oneImageLoaded(instance, image) {
            var result = image.isLoaded ? 'loaded' : 'broken';
            // console.log( 'image is ' + result + ' for ' +

image.img.src, image.img.width, image.img.height );

            if(result == 'loaded') {
                initCardSizes(image.img);
                initShuffle();
                imgLoad.off('progress', oneImageLoaded); // end event

listener } }

        function initCardSizes(card) {
            // var card = grid.querySelector('a img');
            var width = Math.floor(card.width);
            var height = Math.floor(card.height);

            var items = grid.querySelectorAll('a');
            for (var i=0; i<items.length; i++) {
                items[i].style.width = width + 'px';
                items[i].style.height = height + 'px';
            }
        }

        function initShuffle() {
            s = new Shuffle(grid, {
                itemSelector: 'a',
                isCentered: true
            });
        }

On Fri, Mar 1, 2024 at 7:11 PM Glen Cheney @.***> wrote:

This demo has different sized elements https://codepen.io/Vestride/details/ZVWmMX as well as some of the other demos.

— Reply to this email directly, view it on GitHub https://github.com/Vestride/Shuffle/issues/563#issuecomment-1974116806, or unsubscribe https://github.com/notifications/unsubscribe-auth/A2PPB6PAXGM5JMI6UXQKO4TYWEKMHAVCNFSM6AAAAABD7BN55OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNZUGEYTMOBQGY . You are receiving this because you authored the thread.Message ID: @.***>