feat: add masonry grid

src/atoms/box/index.tsx

@@ -0,0 +1,44 @@
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import React, { CSSProperties, FC } from "react";
+
+const StyledBox = styled.div<{
+	style?: CSSProperties & { "--aspect-ratio"?: number };
+	roundCorners?: boolean;
+}>`
+	position: relative;
+	width: 100%;
+	height: 0;
+	padding-bottom: calc(100% / var(--aspect-ratio, 1));
+	${({ theme, roundCorners }) =>
+		roundCorners &&
+		css`
+			border-radius: ${theme.shapes.m};
+			overflow: hidden;
+		`};
+`;
+
+const StyledBoxInner = styled.div`
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+`;
+
+export interface BoxProps {
+	aspectRatio?: number;
+	roundCorners?: boolean;
+}
+
+const Box: FC<BoxProps> = ({ aspectRatio = 1, roundCorners, children, ...props }) => {
+	return (
+		<StyledBox {...props} style={{ "--aspect-ratio": aspectRatio }} roundCorners={roundCorners}>
+			<StyledBoxInner>{children}</StyledBoxInner>
+		</StyledBox>
+	);
+};
+
+export default Box;

src/molecules/masonry/column.tsx

@@ -0,0 +1,13 @@
+import { BoxProps } from "@/atoms/box";
+import { StyledMasonryBox } from "@/molecules/masonry/styled";
+import React, { FC } from "react";
+
+const MasonryColumn: FC<BoxProps> = ({ aspectRatio, roundCorners, children, ...props }) => {
+	return (
+		<StyledMasonryBox {...props} aspectRatio={aspectRatio} roundCorners={roundCorners}>
+			{children}
+		</StyledMasonryBox>
+	);
+};
+
+export default MasonryColumn;

src/molecules/masonry/grid.tsx

@@ -0,0 +1,33 @@
+import { StyledMasonryGrid } from "@/molecules/masonry/styled";
+import React, { FC } from "react";
+
+export interface MasonryGridProps {
+	colCountXS?: number;
+	colCountS?: number;
+	colCountM?: number;
+	colCountL?: number;
+}
+const MasonryGrid: FC<MasonryGridProps> = ({
+	colCountXS = "var(--col-span)",
+	colCountS = colCountXS,
+	colCountM = colCountS,
+	colCountL = colCountM,
+	children,
+	...props
+}) => {
+	return (
+		<StyledMasonryGrid
+			{...props}
+			style={{
+				"--col-count-xs": colCountXS,
+				"--col-count-s": colCountS,
+				"--col-count-m": colCountM,
+				"--col-count-l": colCountL,
+			}}
+		>
+			{children}
+		</StyledMasonryGrid>
+	);
+};
+
+export default MasonryGrid;

src/molecules/masonry/styled.ts

@@ -0,0 +1,34 @@
+import Box from "@/atoms/box";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { CSSProperties } from "react";
+
+export const StyledMasonryGrid = styled.div<{
+	style?: CSSProperties & {
+		"--col-count-xs"?: number | string;
+		"--col-count-s"?: number | string;
+		"--col-count-m"?: number | string;
+		"--col-count-l"?: number | string;
+	};
+}>`
+	--col-count: var(--col-count-xs);
+
+	column-gap: var(--gap-x);
+	column-count: var(--col-count);
+	${({ theme }) => css`
+		${theme.mq.s} {
+			--col-count: var(--col-count-s);
+		}
+		${theme.mq.m} {
+			--col-count: var(--col-count-m);
+		}
+		${theme.mq.l} {
+			--col-count: var(--col-count-l);
+		}
+	`};
+`;
+
+export const StyledMasonryBox = styled(Box)`
+	margin-bottom: var(--gap-x);
+	break-inside: avoid;
+`;

src/pages/design-system/masonry/index.tsx

@@ -0,0 +1,22 @@
+import { addApolloState, initializeApollo } from "@/ions/services/apollo/client";
+import Examples from "@/templates/design-system/pages/masonry";
+import { PageProps, StaticPageProps } from "@/types";
+import { GetStaticProps, NextPage } from "next";
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import React from "react";
+
+const Page: NextPage<PageProps> = () => {
+	return <Examples />;
+};
+
+export const getStaticProps: GetStaticProps<StaticPageProps> = async context => {
+	const apolloClient = initializeApollo();
+	return addApolloState<StaticPageProps>(apolloClient, {
+		props: {
+			...(await serverSideTranslations(context.locale)),
+			locale: context.locale,
+		},
+	});
+};
+
+export default Page;

src/templates/design-system/index.tsx

@@ -42,6 +42,9 @@ const DesignSystem = () => {
 						<li>
 							<I18nLink href="/design-system/grid">Grid</I18nLink>
 						</li>
+						<li>
+							<I18nLink href="/design-system/masonry">Masonry</I18nLink>
+						</li>
 						<li>
 							<I18nLink href="/design-system/snackbar">Snackbar</I18nLink>
 						</li>

src/templates/design-system/pages/masonry.tsx

@@ -0,0 +1,78 @@
+import Typography from "@/atoms/typography";
+import Layout from "@/groups/layout";
+import { RawBreadcrumb } from "@/ions/contexts/breadcrumbs/types";
+import { Column, Grid } from "@/molecules/grid";
+import MasonryColumn from "@/molecules/masonry/column";
+import MasonryGrid from "@/molecules/masonry/grid";
+import Breadcrumbs from "@/organisms/breadcrumbs";
+import OverlayGrid from "@/organisms/grid-overlay";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import { useTranslation } from "next-i18next";
+import process from "process";
+import React, { useMemo } from "react";
+
+const aspectRatios = [1, 16 / 9, 3 / 4, 9 / 16, 4 / 3];
+const demoItems = Array.from({ length: 15 }).map((item, index) => ({
+	id: index + 1,
+	color: `hsl(${index * 129}, 60%, 80%)`,
+	aspectRatio:
+		aspectRatios[
+			Math.round(index + (index + 1.1424) * 1.1315 + (index + 1.1358) * 1.1372) %
+				aspectRatios.length
+		],
+}));
+
+const StyledColoredBox = styled.div`
+	width: 100%;
+	height: 100%;
+	${({ theme }) => css`
+		border-radius: ${theme.shapes.s};
+		box-shadow: ${theme.shadows.s};
+	`}
+`;
+
+const MasonryExamples = () => {
+	const { t } = useTranslation(["navigation"]);
+	const breadcrumbs: RawBreadcrumb[] = useMemo(
+		() => [
+			{
+				href: "/",
+				title: t("navigation:home"),
+			},
+			{
+				href: "/design-system",
+				title: "Design System",
+			},
+			{
+				href: "/design-system/masonry",
+				title: "Masonry",
+			},
+		],
+		[t]
+	);
+	return (
+		<Layout title="Masonry | Design System" breadcrumbs={breadcrumbs} robots="noindex,nofollow">
+			<Grid>
+				<Column>
+					<Breadcrumbs />
+					<Typography variant="h1">Masonry</Typography>
+				</Column>
+				<Column>
+					<MasonryGrid colCountS={1} colCountM={3} colCountL={4}>
+						{demoItems.map(item => {
+							return (
+								<MasonryColumn key={item.id} aspectRatio={item.aspectRatio}>
+									<StyledColoredBox style={{ backgroundColor: item.color }} />
+								</MasonryColumn>
+							);
+						})}
+					</MasonryGrid>
+				</Column>
+			</Grid>
+			{process.env.NODE_ENV === "production" && <OverlayGrid />}
+		</Layout>
+	);
+};
+
+export default MasonryExamples;