Scroll

Displays children in a horizontally spaced and scrollable grid.

It’s integral to most device agnostic layouts.

It’s best used as a block that occupies the entire viewport width:

Styles

Import the styles within a Next.js custom app in pages/_app.js.
import "device-agnostic-ui/Scroll.css";

Props

children

TypeJSX children (required)

CSS Grid items to be horizontally spaced and vertically top aligned.

...props

Type…* (optional)

Additional props for the container; a <div> element.

Examples

How to import.
import Scroll from "device-agnostic-ui/Scroll.mjs";
Several articles. The maxWidth style is only to demo demo scrolling; limiting the width isn’t recommended.
import Heading from "device-agnostic-ui/Heading.mjs";
import Scroll from "device-agnostic-ui/Scroll.mjs";

const result = (
  <Scroll style={{ maxWidth: "15rem" }}>
    <article>
      <Heading>First</Heading>
    </article>
    <article>
      <Heading>Second</Heading>
    </article>
    <article>
      <Heading>Third</Heading>
    </article>
    <article>
      <Heading>Fourth</Heading>
    </article>
  </Scroll>
);

First

Second

Third

Fourth

Tags