@zeytal/grid
v1.0.5
Published
Small layout grid utility. Align everything perfectly. Simplify your responsive design coding process without sacrificing effectiveness. Hit G on your keyboard to toggle your grid on and off.
Maintainers
provokReadme
Install
pnpm add @zeytal/gridyarn add @zeytal/gridnpm i @zeytal/gridUsage
// Next.js RootLayout example.
import { isProdEnv } from "@/utils/isProdEnv";
import { GridOverlay } from "@zeytal/grid";
type Props = Readonly<{
children: React.ReactNode;
}>;
export default function RootLayout({ children }: Props) {
return (
<html lang="en">
<body>
{children}
{!isProdEnv() && <GridOverlay active={false} />}
</body>
</html>
);
}Component props
breakpoints
import type { Breakpoints } from "@zeytal/grid";
import { GridOverlay } from "@zeytal/grid";
export default function ExampleComponent({ children }: Props) {
// Define your breakpoints, their columns number and gutter size.
const breakpoints: Breakpoints = {
"0x": {
columns: 2,
gutter: 0,
},
"320x": {
columns: 4,
gutter: 16,
},
// ...
"1920x": {
columns: 16,
gutter: 32,
},
};
// Pass them to the breakpoints prop.
return <GridOverlay breakpoints={breakpoints} />;
}// Default breakpoints values:
{
"0x": {
columns: 24,
gutter: 0,
},
"320x": {
columns: 24,
gutter: 0,
},
"400x": {
columns: 24,
gutter: 0,
},
"480x": {
columns: 24,
gutter: 0,
},
"576x": {
columns: 24,
gutter: 0,
},
"672x": {
columns: 24,
gutter: 0,
},
"768x": {
columns: 24,
gutter: 0,
},
"896x": {
columns: 24,
gutter: 0,
},
"1024x": {
columns: 24,
gutter: 0,
},
"1152x": {
columns: 24,
gutter: 0,
},
"1280x": {
columns: 24,
gutter: 0,
},
"1408x": {
columns: 24,
gutter: 0,
},
"1536x": {
columns: 24,
gutter: 0,
},
"1920x": {
columns: 24,
gutter: 0,
},
};active
import { GridOverlay } from "@zeytal/grid";
export default function ExampleComponent({ children }: Props) {
// Decide whether or not your grid is displayed on load.
// To toggle on/off the grid, hit the letter G on your keyboard.
// Default value: true
return <GridOverlay active={true} />;
}maxWidth
import { GridOverlay } from "@zeytal/grid";
export default function ExampleComponent({ children }: Props) {
// Two possible values: "last-breakpoint" | "none"
// "last-breakpoint" — The grid stops growing when it hits your last defined breakpoint width.
// "none" — The grid grows indefinitely.
// Default value: "last-breakpoint"
return <GridOverlay maxWidth="last-breakpoint" />;
}