New CSS Grid classes: col-span-full and row-span-full

[flybayer]

Something that's very common for when doing CSS grid layouts is having a row or column that should always span the entire grid.

This is easily accomplished via CSS with:

grid-column:  1 / -1;

So I'd love to have that as a tailwind utility. I think col-span-full and row-span-full are good options for the naming.

[Nick-Mazuk]

This does sound useful!

I haven't tried this yet, but you should be able to add this to the tailwind.config.js:

module.exports = {
    theme: {
        extend: {
            gridRow: {
                'span-full': '1 / -1',
            },
            gridColumn: {
                'span-full': '1 / -1',
            },
        },
    },
}

Though adding as a default utility would be nice.

https://tailwindcss.com/docs/grid-row#customizing

https://tailwindcss.com/docs/grid-column#customizing

[CalebKester]

I was just needing this. I use this class all the time and was surprised that it wasn't included. Turns out that I have had it in my extend functions this whole time. What Nick posted works really well for now.

[adamwathan]

Nice idea! Would accept a PR for this one 👍

[swyxio]

#2471