Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
TypeScript
123456789101112131415161718192021222324252627282930313233import type { CSSProperties } from "react";
// Column layout shared by the membership tier grid and the post-subscribe// publication recommendations: one to three items each get their own column in// a single row, four splits into two rows of two, and anything more runs three// across with a partial last row centered under the full ones.//// The grid is laid out with twice as many columns as it shows so a leftover// last row can start on a half-column offset; every cell spans two.export function centeredGridColumns(count: number) { if (count <= 3) return Math.max(count, 1); if (count === 4) return 2; return 3;}
export function centeredGridStyle(count: number): CSSProperties { return { gridTemplateColumns: `repeat(${centeredGridColumns(count) * 2}, minmax(0, 1fr))`, };}
export function centeredGridCellStyle( index: number, count: number,): CSSProperties { let columns = centeredGridColumns(count); let remainder = count % columns; let lastRowStart = count - remainder; if (!remainder || index < lastRowStart) return { gridColumn: "span 2" }; let start = columns - remainder + 1 + (index - lastRowStart) * 2; return { gridColumn: `${start} / span 2` };}