CSS Responsive Grid Layout Demo - Modern CSS Techniques

CSS Grid provides powerful two-dimensional layout capabilities, allowing precise control over both rows and columns simultaneously.

Auto-fit columns

Gap control

Responsive design

Alignment options

Flexbox excels at distributing space and aligning items in one dimension, perfect for navigation bars and component layouts.

Flexible sizing

Perfect centering

Direction control

Wrap behavior

Modern responsive design uses fluid typography, flexible layouts, and container queries for optimal viewing across all devices.

Fluid typography

Media queries

Flexible images

Mobile-first

CSS animations and transitions create engaging user experiences while respecting user preferences like reduced motion.

Keyframe animations

Smooth transitions

Performance optimized

Accessibility aware

CSS custom properties enable dynamic theming, consistent design systems, and runtime style modifications.

Dynamic values

Theme switching

Inheritance

Runtime updates

Latest CSS features including aspect-ratio, clamp(), logical properties, and container queries for future-ready designs.

Aspect ratio

Clamp function

Logical properties

Future-ready

Interactive CSS Grid & Flexbox Demo

Use the controls below to see how CSS Grid and Flexbox respond to different settings.

Grid Controls:

Grid Item 1

Grid Item 2

Grid Item 3

Grid Item 4

Grid Item 5

Grid Item 6

Flexbox Demo

Flex Controls:

Flex 1

Flex 2

Flex 3

Modern CSS Features Demo

Aspect Ratio Property

16:9 Aspect Ratio Box

Clamp() Function for Responsive Typography

Responsive Text Size

CSS Custom Properties in Action

Theme Item 1

Theme Item 2

Theme Item 3

Theme Item 4

Assignment Information

This page demonstrates my understanding of CSS for the CET138 Full Stack Development module assignment.

Student Details

Name: Sagar Thapa

Student ID: BI95SS

University: University of Sunderland

College: ISMT College, Butwal

Assignment Details

Module: CET138 Full Stack Development

Tutor: Sandip Dhakal

Submission Date: 29 August 2025 (12:00 Midnight UK Time)

Weighting: 30% of module mark

CSS Techniques Demonstrated

CSS Grid Layout
Flexbox Layout
Responsive Design
CSS Animations & Transitions
CSS Custom Properties (Variables)
Modern CSS Features
Accessibility Best Practices

Browser Compatibility

This page has been tested and works correctly in:

Chrome 90+
Firefox 88+
Safari 14+
Edge 90+

CSS Layout Techniques Gallery