More than 1 year has passed since last update.

CSS Gridでオシャレタイル型レイアウト🐈

Posted at 2023-11-15

祝！IEの呪縛から解き放たれて使えるCSS
といえばGrid、それとobject-fitも
その辺を使ったお手軽でフレキシブルで凝った雰囲気になるレイアウトを紹介します

作ったもの

ランダムなサイズの画像を、ある程度元の画像の比率を反映して良い感じに並べてみた。
画像はunsplushというフォトギャラリーAPIを使って持ってきています。

↓スクロールした動画あります
https://x.com/herishiro/status/1724651582065909835

こういうのを作るのに必要なコード

JavaScript : 8行
CSS property : 12行

今回はNext.js使ってるけどJQueryでもVanila JSでも多分何でもできます。

CSS Gridとは？

今更の説明ですが…

縦と横のラインを引いて画面上に行と列を作り、そこにHTML要素を配置出来るやつ
Flexと違い、レスポンシブで要素の位置を複雑に入れ替えるなど自由度の高いレイアウトが可能

実際のコード

Next.js + Emotion

import { css } from "@emotion/react";
import Image from "next/image";
import { useEffect, useState } from "react";
import { PhotoRes } from "../../../pages/api/unsplash";

export const ImageTileScreen = () => {
	const style = styler();
	// APIから取得した画像データ
	const [photos, setPhotos] = useState<PhotoRes["results"]>([]);

	useEffect(() => {
		const fetchImages = async () => {
			const res = await fetch("/api/unsplash");
			const photoRes: PhotoRes = await res.json();
			setPhotos(photoRes.results);
		};
		fetchImages();
	}, []);

	const getGridSpan = (width: number, height: number) => {
		const ratio = width / height;
		const isLandscape = ratio > 1;
		const isRect = ratio > 1.3;
		const column = isLandscape ? Math.ceil(ratio) : 1;
		const row = isLandscape ? (isRect ? 2 : 1) : Math.ceil(1.8 / ratio);

		return { gridColumn: `span ${column}`, gridRow: `span ${row}` };
	};

	return (
		<div css={style.container}>
			{photos.map((photo) => {
				return (
					<div
						key={photo.urls.regular}
						css={[style.card, getGridSpan(photo.width, photo.height)]}
					>
						<Image
							src={photo.urls.regular}
							alt={photo.alt_description}
							width={photo.width}
							height={photo.height}
						/>
					</div>
				);
			})}
		</div>
	);
};

const styler = () => {
	return {
		container: css({
			position: "relative",
			display: "grid",
			gap: 10,
			gridTemplateColumns: `repeat(3, 1fr)`,
			gridAutoRows: "1fr",
			gridAutoFlow: "dense",
			padding: "0 5%",
		}),
		card: css({
			position: "relative",
			borderRadius: 10,
			overflow: "hidden",
			span: {
				height: "100% !important",
				img: {
					objectFit: "cover",
				},
			},
		}),
	};
};

仕組み

画面全体にGrid layoutで３列のgridを引く
各画像の縦横サイズを比較して、横長の画像なら１行×縦比率分のn列、縦長の場合は横比率分のn行×１列のグリッドを割り当てるcssを追加する。
（一定以上正方形に近い場合は2行×2列にする）
隙間を上手いこと埋めるのはCSSが勝手にやってくれる！