styled-components で視覚的にわかりやすい Grid Layout を生成する - Qiita

https://mizchi-sandbox.github.io/grid-generator/ でやってることを、視覚的に指定できるように styled-components のヘルパ作ったら個人的に便利だったので紹介。 実装 こういうヘルパを書いた import styled from 'styled-components' export const Grid = styled.div` display: grid; grid-template-columns: ${({ columns }) => columns.join(" ")}; grid-template-rows: ${({ rows }) => rows.join(" ")}; grid-template-areas: ${({ areas }) => areas.map(r => `'${r.join(" ")}'`)

[mizchi]

適当作ったコンポーネントがいい感じだったのでおすすめです