Container Queries

11 snippets

Browse Container Queries examples — animations, layouts, typography, and visual effects. Filter the directory below.

css-container-queries

Snippets(11)

Tailwind Fluid Grid
A tailwind fluid grid built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Always Great Grid
A always great grid built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
CSS List Filtering with :has()
A css list filtering with :has() built with modern frontend techniques for responsive and reusable UI.
Frontend Ui Modern Design Web Components
Demo Code
Responsive Speech Bubbles using CSS Container Queries
A responsive speech bubbles using css container queries built with modern frontend techniques for responsive and reusable UI.
Text Formatting Semantic Html Html Frontend Ui+3 more
Demo Code
Technologies
CSS Container Queries, CSS Clip-path, Flexbox
Difficulty
Intermediate
Features
Responsive design, Pure CSS
Responsive
Yes
Pure CSS Responsive Hex Grid
A pure css responsive hex grid built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
CSS, Container Queries
Difficulty
advanced
Features
No Media Queries, Dynamic Calculation, Hexagonal Shapes
Responsive
Yes
Modern Container Query Product Cards
A modern container query product cards built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+4 more
Demo Code
Technologies
HTML, CSS
Difficulty
Advanced
Browser support
Chrome 118+, Edge 118+, Firefox 128+, Safari 17.4+
Features
Container Queries, CSS Scope, OKLCH Colors, Fluid Typography
Responsive
Yes
Container Query Bookstore
A container query bookstore built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Features
container queries, responsive design
Responsive
Yes
CSS @container scroll-state() Faux PiP Video
A css @container scroll-state() faux pip video built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+1 more
Demo Code
Technologies
CSS Container Queries, scroll-state()
Difficulty
advanced
Features
Faux Picture-in-Picture, Scroll-driven animations
Responsive
Yes
RGB Mechanical Keyboard Grid
A rgb mechanical keyboard grid built with modern frontend techniques for responsive and reusable UI.
Html Frontend Ui Modern Design Text Styling+1 more
Demo Code
Technologies
HTML, SCSS, Babel
Difficulty
Intermediate
Browser support
Chrome 105+, Edge 105+, Firefox 110+, Safari 16+
Features
Container Queries, Procedural Coloring, Realistic Lighting, Theme Switching
Responsive
Yes
Open Props Bento Grid
A open props bento grid built with modern frontend techniques for responsive and reusable UI.
Semantic Html Html Frontend Ui Modern Design+2 more
Demo Code
Technologies
Open Props, CSS Grid
Features
Bento Grid, Scroll Animations, Responsive Layout
Responsive
Yes
Scroll-Snap Grid Navigation with Intersection Observer
A scroll-snap grid navigation with intersection observer built with modern frontend techniques for responsive and reusable UI.
Accessibility Semantic Html Html Frontend Ui+2 more
Demo Code
Technologies
Intersection Observer API, CSS Scroll Snap, Container Queries
Difficulty
intermediate
Features
Keyboard Navigation, Snap-to-grid, Responsive Typography
Responsive
Yes

Snippets(11)

related hubs