CSS Masonry Catness
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:
create-next-app@15.0.1 Ok to proceed? (y) y
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:
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
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?
The above is the detailed content of CSS Masonry Catness. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Vue 3
Apr 02, 2025 pm 06:32 PM
It's out! Congrats to the Vue team for getting it done, I know it was a massive effort and a long time coming. All new docs, as well.
Can you get valid CSS property values from the browser?
Apr 02, 2025 pm 06:17 PM
I had someone write in with this very legit question. Lea just blogged about how you can get valid CSS properties themselves from the browser. That's like this.
A bit on ci/cd
Apr 02, 2025 pm 06:21 PM
I'd say "website" fits better than "mobile app" but I like this framing from Max Lynch:
Stacked Cards with Sticky Positioning and a Dash of Sass
Apr 03, 2025 am 10:30 AM
The other day, I spotted this particularly lovely bit from Corey Ginnivan’s website where a collection of cards stack on top of one another as you scroll.
Using Markdown and Localization in the WordPress Block Editor
Apr 02, 2025 am 04:27 AM
If we need to show documentation to the user directly in the WordPress editor, what is the best way to do it?
Comparing Browsers for Responsive Design
Apr 02, 2025 pm 06:25 PM
There are a number of these desktop apps where the goal is showing your site at different dimensions all at the same time. So you can, for example, be writing
Why are the purple slashed areas in the Flex layout mistakenly considered 'overflow space'?
Apr 05, 2025 pm 05:51 PM
Questions about purple slash areas in Flex layouts When using Flex layouts, you may encounter some confusing phenomena, such as in the developer tools (d...
How to select a child element with the first class name item through CSS?
Apr 05, 2025 pm 11:24 PM
When the number of elements is not fixed, how to select the first child element of the specified class name through CSS. When processing HTML structure, you often encounter different elements...
