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) {
  return (
    
      
        {children}
      
    
  );
}

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!