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
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
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
What is 'render-blocking CSS'?
Jun 24, 2025 am 12:42 AM
CSS blocks page rendering because browsers view inline and external CSS as key resources by default, especially with imported stylesheets, header large amounts of inline CSS, and unoptimized media query styles. 1. Extract critical CSS and embed it into HTML; 2. Delay loading non-critical CSS through JavaScript; 3. Use media attributes to optimize loading such as print styles; 4. Compress and merge CSS to reduce requests. It is recommended to use tools to extract key CSS, combine rel="preload" asynchronous loading, and use media delayed loading reasonably to avoid excessive splitting and complex script control.
External vs. Internal CSS: What's the Best Approach?
Jun 20, 2025 am 12:45 AM
ThebestapproachforCSSdependsontheproject'sspecificneeds.Forlargerprojects,externalCSSisbetterduetomaintainabilityandreusability;forsmallerprojectsorsingle-pageapplications,internalCSSmightbemoresuitable.It'scrucialtobalanceprojectsize,performanceneed
Does my CSS must be on lower case?
Jun 19, 2025 am 12:29 AM
No,CSSdoesnothavetobeinlowercase.However,usinglowercaseisrecommendedfor:1)Consistencyandreadability,2)Avoidingerrorsinrelatedtechnologies,3)Potentialperformancebenefits,and4)Improvedcollaborationwithinteams.
CSS Case Sensitivity: Understanding What Matters
Jun 20, 2025 am 12:09 AM
CSSismostlycase-insensitive,butURLsandfontfamilynamesarecase-sensitive.1)Propertiesandvalueslikecolor:red;arenotcase-sensitive.2)URLsmustmatchtheserver'scase,e.g.,/images/Logo.png.3)Fontfamilynameslike'OpenSans'mustbeexact.
What is Autoprefixer and how does it work?
Jul 02, 2025 am 01:15 AM
Autoprefixer is a tool that automatically adds vendor prefixes to CSS attributes based on the target browser scope. 1. It solves the problem of manually maintaining prefixes with errors; 2. Work through the PostCSS plug-in form, parse CSS, analyze attributes that need to be prefixed, and generate code according to configuration; 3. The usage steps include installing plug-ins, setting browserslist, and enabling them in the build process; 4. Notes include not manually adding prefixes, keeping configuration updates, prefixes not all attributes, and it is recommended to use them with the preprocessor.
What are CSS counters?
Jun 19, 2025 am 12:34 AM
CSScounterscanautomaticallynumbersectionsandlists.1)Usecounter-resettoinitialize,counter-incrementtoincrease,andcounter()orcounters()todisplayvalues.2)CombinewithJavaScriptfordynamiccontenttoensureaccurateupdates.
CSS: When Does Case Matter (and When Doesn't)?
Jun 19, 2025 am 12:27 AM
In CSS, selector and attribute names are case-sensitive, while values, named colors, URLs, and custom attributes are case-sensitive. 1. The selector and attribute names are case-insensitive, such as background-color and background-Color are the same. 2. The hexadecimal color in the value is case-sensitive, but the named color is case-sensitive, such as red and Red is invalid. 3. URLs are case sensitive and may cause file loading problems. 4. Custom properties (variables) are case sensitive, and you need to pay attention to the consistency of case when using them.
What is the conic-gradient() function?
Jul 01, 2025 am 01:16 AM
Theconic-gradient()functioninCSScreatescirculargradientsthatrotatecolorstopsaroundacentralpoint.1.Itisidealforpiecharts,progressindicators,colorwheels,anddecorativebackgrounds.2.Itworksbydefiningcolorstopsatspecificangles,optionallystartingfromadefin
