CSS Layout Labs – Flexbox & Grid

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.

What this repository covers

• 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

Skills demonstrated

• CSS Flexbox
• CSS Grid
• Responsive layout techniques
• Separation of structure (HTML) and presentation (CSS)
• UI interaction using CSS transitions
• Front-end problem solving

Lab overview

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.

Project 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