A grid layout component in React


This layout spreads your elements evenly, horizontally, and vertically.

import * as React from "react";
type GridProps = {
children: React.ReactElement<any> | React.ReactElement<any>[];
function Grid({ children }: GridProps) {
children = Array.isArray(children) ? children : [children];
const columns = Math.ceil(Math.sqrt(children.length));
const rows = Math.ceil(children.length / columns);
return (
height: "100vh",
display: "grid",
gridTemplateColumns: `repeat(${columns}, 1fr)`,
gridTemplateRows: `repeat(${rows}, 1fr)`,

And the usage is simple:

<div>Element 1</div>
<div>Element 2</div>
<div>Element 3</div>
<div>Element 4</div>

And you should see a 2x2 grid.

Edit this page
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My second brain, by Sal Rahman.