Description
Sometimes you need to switch to/from an
overflow-x: scroll;
single line scroller from a grid, whilst
still keeping the content on grid.
-
.full-bleed-scroller
sets a container to being an overflow scrolling container with outer gutter shims .full-bleed-scroller-reset
resets the container
Note: works with both fluid and fixed width .container
thanks
to a .breakout
's clever outer gutter handling.
Setup
Requires Setup
and Container
plugin with
theme.screens
, theme.mainColWidths
,
theme.innerGutters
, theme.outerGutters
and
theme.columnCount
configured.
Demo
A full bleed scroller, at all breakpoints:
Using a .breakout
class (from
Container#breakout) to get a
100vw
container. full-bleed-scroller
by
default sets
display: flex; flex-flow: row nowrap; gap: var(--inner-gutter);
.
Note the children use .*-vw
type
Layoutwidth classes, this is because
the container here is wider that .container
. Also note that
each child has flex-none
set, so the width is controlled by the
width class and not the child content.
Full bleed scroller on smaller screens, constrained by container width at
md
breakpoint and up
Again using a .breakout
class to get a
100vw
container and then at md
breakpoint,
resetting the breakout with md:breakpoint-reset
.
On the full-bleed-scroller
element, at
md
breakpoint, removing the ::before
and
::after
content that full-bleed-scroller
inserts
to add the outer gutter spacing.
And the children swap there w-3-cols-vw
for
md:w-3-cols
at the md
breakpoint (although this
isn't strictly necessary, it does serve to demonstrate when to use the
.*-vw
Layout classes over the regular ones).
A full bleed scroller on smaller screens, resets to a grid at
md
breakpoint
Similar to above, only now at the md
breakpoint we reset the
scroller with md:full-bleed-scroller-reset
and add Tailwind
grid classes.