This repository contains hands-on CSS layout exercises focused on Flexbox, CSS Grid, and transitions. The labs demonstrate how modern CSS is used to build responsive navigation, multi-column layouts, centered components, and structured page designs without modifying HTML structure.
- CSS Flexbox fundamentals
- Horizontal navigation layouts
- Equal-width column layouts and reordering
- Centering content horizontally and vertically
- Tag-style UI elements using Flexbox
- CSS Grid auto-placement and explicit positioning
- Grid-based page layouts
- CSS transitions and hover effects
- CSS Flexbox
- CSS Grid
- Responsive layout techniques
- Separation of structure (HTML) and presentation (CSS)
- UI interaction using CSS transitions
- Front-end problem solving
The lab is divided into multiple sections:
- Flexbox – Part 1: Horizontal navigation with equal spacing
- Flexbox – Part 2: Three-column layout with reordering using CSS only
- Flexbox – Part 3: Centered card layout with tag-style elements
- Grid – Part 1: Auto-placed grid with equal columns and row gaps
- Grid – Part 2: Layered grid positioning with overlapping elements
- Grid – Part 3: Page-style grid layout using fractional units
- Transitions: Smooth hover effects using CSS transitions
All layout behavior is achieved only through CSS, without modifying the HTML structure.
├── index.html ├── styles.css ├── assets/ │ ├── images/ │ ├── grid-p1.png │ ├── grid-p2.png │ ├── grid-p3.png │ ├── flex-p1.png │ ├── flex-p2.png │ └── flex-p3.png └── README.md