CSS is like anything else in tech-it's always changing and evolving. An ongoing development in the space is CSS Grid Layout Module Level 3 aka CSS Masonry Layout. Theo made a video about how it's developing and the debate Apple and Google are having about how it gets implemented.
All of that got me excited to give CSS masonry a try! The WebKit photo demos inspired me to make a similar view with pics of cats! Who doesn't love cats?
Prerequisites
To view what we're going to build you'll need the Safari Technology Preview, or to make the feature flag layout.css.grid-template-masonry-value.enabled true in Firefox.
To access the feature flags in Firefox, type about:config in your address bar. Hit enter and you can search grid or the string mentioned above. Toggle it to true and you're good to go!
Basic familiarity with TypeScript/JavaScript, React, and Next.
Setup a new project
Create a new Next project in the terminal.
Run this command: npx create-next-app@latest
Then you may need to install the following package:
create-next-app@15.0.1
Ok to proceed? (y) y
Name your project. I call mine cat-pics-waterfall
Continue setting up the Next project in the terminal (be sure to not use Tailwind):
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? No
Would you like your code inside a 'src/' directory? No
Would you like to use App Router? (recommended) Yes
Would you like to use Turbopack for next dev? No
Would you like to customize the import alias (@/* by default)? No
When your project is done setting up:
Change directories into your project by running this command in your terminal
cd your-project-name.Open it in VSCode by then running this command
code .(setup this command if you haven't)
Remove the boilerplate
Inside the app folder there is a file called page.tsx This has all the code that is rendered in the boilerplate.
Remove that code and keep a div or fragment for now. Here's an example:
// app/page.tsx
export default function Home() {
return <div></div>;
}
There's also a stylesheet for the page within the app folder. It's called page.module.css and you can open that up, select all the styles in it, and delete them.
Let's change our metadata and make it more clear what our app does. Update layout.tsx like so:
// app/layout.tsx
import type { Metadata } from "next";
import "./globals.css";
export const metadata: Metadata = {
title: "Cat Pics",
description: "Bringing cats your way with experimental CSS",
};
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<html lang="en">
<body>
{children}
</body>
</html>
);
}
Add a cat favicon if you'd like too (how to add a favicon in Next)!
Create .env file
Create a .env file at the root of the project. This is where we'll store the API key from The Cat API.
Signup for The Cat API
Signup for a free API key from The Cat API. After the initial signup, you'll receive an email with your API key. Copy that API key and make a new variable in .env. I call my key CAT_KEY.
Your local .env should look like this: CAT_KEY=your_api_key. If you deploy this make sure to add this wherever it's deployed too.
Bring in the cat pics!
I glean from the aforementioned WebKit demos to create the page and styles for the cat pics. Here we call our API, map through the results, and render the pics that get returned:
// app/page.tsx
import styles from "./page.module.css";
const url = "https://api.thecatapi.com/v1/images/search?limit=50";
const api_key = process.env.CAT_KEY || '';
interface CatImage {
id: string;
url: string;
}
async function getCatPics() {
try {
const res = await fetch(url, {
headers: {"x-api-key": api_key},
});
const result = await res.json();
return result;
} catch (error) {
throw new Error(`Unable to get the cute cats! ${error}`);
}
}
export default async function Home() {
const cats = await getCatPics();
return (
<main className={styles.page}>
{cats.map((cat: CatImage, index: number) => (
<figure className={styles.card} key={cat.id}>
<img
className={styles.catPic}
src={cat.url}
alt={`Cat ${index + 1}`}
/>
</figure>
))}
</main>
);
}
Style the pics
Now that we've brought in the pics, let's see CSS masonry in action! Taking a page out of WebKit's book, here is page.module.css:
.page {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(14rem, 2fr)) minmax(8rem, 1fr);
grid-template-rows: masonry;
gap: 1rem;
}
.card {
position: relative;
counter-increment: item-counter;
}
.catPic {
width: 100%;
height: auto;
display: block;
border-radius: 1ch;
}
If you save your files and run npm run dev in your terminal, it should give you a page like this (with images selected at random):
There's a lot of potential to build on top of this! The images maintain their quality and without media queries the page feels responsive. You can use what's coming here to CSS in other ways, Theo showcased them in his video and the demos from WebKit and Google do too.
It's sweet to be a developer right now. Lots of amazing tooling, features, runtimes, and more are being built. Time will tell exactly how this gets implemented in CSS. However it gets decided upon, the takeaway is that CSS is getting cooler.
Have a look at the repo I made for this project. I deployed it on Vercel too, if you use one of the two browser setups mentioned in the prerequisites, you can check it out here.
You can build a page that renders pictures of cats for the heck of it, or get stuff done at work. What do you think of these features coming to CSS? How are you going to use them?
Top comments (0)