Modern CSS Mastery 2025: Flexbox, Grid, Container Queries, and Tailwind CSS

Introduction
1. CSS in 2025: New Features Overview
2. Flexbox Mastery
3. Grid Mastery
4. Flexbox vs Grid Decision Guide
- 4.1 Comparison Table
- 4.2 When to Use Which
5. Container Queries Deep Dive
6. Modern CSS Selectors
7. CSS Animations Complete Guide
8. Tailwind CSS v4
9. CSS-in-JS Comparison
10. Responsive Design Patterns
11. CSS Architecture
12. Interview Questions and Quiz
- Top 10 Interview Questions
- 5 Quiz Questions
References

Introduction

CSS in 2025 is more powerful than ever. Container Queries, CSS Nesting, the :has() selector, View Transitions API, Scroll-Driven Animations, and other long-awaited features are now supported across all major browsers.

The scope of what pure CSS can accomplish without JavaScript has exploded, and Tailwind CSS v4, rewritten with its Oxide engine, has improved build speeds by 10x, evolving the utility-first paradigm to its next stage.

This guide covers everything in modern CSS systematically -- from Flexbox and Grid to Container Queries, modern selectors, animations, Tailwind CSS v4, CSS-in-JS comparisons, responsive patterns, and CSS architecture.

1. CSS in 2025: New Features Overview

1.1 CSS Nesting (Native)

You can now nest selectors directly in CSS without Sass.

/* Native CSS Nesting */
.card {
  background: white;
  border-radius: 8px;

  & .title {
    font-size: 1.5rem;
    font-weight: bold;
  }

  & .body {
    padding: 1rem;

    & p {
      line-height: 1.6;
    }
  }

  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  @media (width >= 768px) {
    display: grid;
    grid-template-columns: 1fr 2fr;
  }
}

1.2 :has() Relational Selector

A revolutionary selector that lets you select parents based on their children.

/* Style cards differently when they contain images */
.card:has(img) {
  grid-template-rows: 200px 1fr;
}

/* Disable submit when form has invalid inputs */
form:has(:invalid) .submit-btn {
  opacity: 0.5;
  pointer-events: none;
}

/* Style label when checkbox is checked */
input:checked + label {
  color: green;
}

1.3 Container Queries Preview

While media queries are based on viewport size, Container Queries are based on parent container size.

.card-container {
  container-type: inline-size;
  container-name: card;
}

@container card (min-width: 400px) {
  .card {
    display: grid;
    grid-template-columns: 200px 1fr;
  }
}

@container card (max-width: 399px) {
  .card {
    display: flex;
    flex-direction: column;
  }
}

1.4 CSS Layers (@layer)

Explicitly control cascade priority.

/* Declare layer order (later = higher priority) */
@layer reset, base, components, utilities;

@layer reset {
  * { margin: 0; padding: 0; box-sizing: border-box; }
}

@layer base {
  body { font-family: system-ui; line-height: 1.6; }
}

@layer components {
  .btn { padding: 0.5rem 1rem; border-radius: 4px; }
}

@layer utilities {
  .mt-4 { margin-top: 1rem; }
}

2. Flexbox Mastery

2.1 Core Concepts

Flexbox is a one-dimensional layout system based on main axis and cross axis.

.flex-container {
  display: flex;

  /* Direction */
  flex-direction: row;          /* Default: horizontal */
  flex-direction: column;       /* Vertical */
  flex-direction: row-reverse;  /* Reverse horizontal */

  /* Wrapping */
  flex-wrap: nowrap;    /* Default: single line */
  flex-wrap: wrap;      /* Allow multiple lines */

  /* Shorthand */
  flex-flow: row wrap;
}

2.2 Complete Alignment Properties

.flex-container {
  /* Main axis alignment */
  justify-content: flex-start;    /* Start */
  justify-content: center;        /* Center */
  justify-content: space-between; /* Ends + equal spacing */
  justify-content: space-around;  /* Equal spacing (half at edges) */
  justify-content: space-evenly;  /* Perfectly equal spacing */

  /* Cross axis alignment */
  align-items: stretch;     /* Default: stretch */
  align-items: center;      /* Center */
  align-items: flex-start;  /* Start */
  align-items: baseline;    /* Text baseline */

  /* Multi-line cross axis */
  align-content: center;
  align-content: space-between;

  /* Gaps */
  gap: 1rem;
  row-gap: 1rem;
  column-gap: 2rem;
}

2.3 Child Element Properties

.flex-item {
  /* Growth ratio (distributes remaining space) */
  flex-grow: 1;

  /* Shrink ratio */
  flex-shrink: 0;  /* Prevent shrinking */

  /* Base size */
  flex-basis: 200px;

  /* Shorthand: grow shrink basis */
  flex: 1 0 200px;
  flex: 1;         /* = 1 1 0% */
  flex: auto;      /* = 1 1 auto */
  flex: none;      /* = 0 0 auto */

  /* Individual alignment */
  align-self: center;

  /* Order */
  order: -1;  /* Move to front */
}

2.4 Practical Flexbox Patterns

/* Pattern 1: Perfect centering */
.center-everything {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Pattern 2: Sticky Footer */
.page-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-layout main {
  flex: 1;
}

/* Pattern 3: Equal-height cards */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card-grid .card {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
}
.card-grid .card .content {
  flex: 1;
}

/* Pattern 4: Navigation bar */
.navbar {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar .logo { margin-right: auto; }
.navbar .actions { display: flex; gap: 0.5rem; }

3. Grid Mastery

3.1 Grid Fundamentals

CSS Grid is a two-dimensional layout system that controls rows and columns simultaneously.

.grid-container {
  display: grid;

  /* Column definitions */
  grid-template-columns: 200px 1fr 200px;       /* Fixed-fluid-fixed */
  grid-template-columns: repeat(3, 1fr);         /* 3 equal parts */
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));  /* Responsive */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));   /* Responsive + stretch */

  /* Row definitions */
  grid-template-rows: auto 1fr auto;

  /* Gaps */
  gap: 1rem;
  row-gap: 1rem;
  column-gap: 2rem;
}

3.2 Grid Template Areas

A visually intuitive way to define layouts.

.page-layout {
  display: grid;
  grid-template-areas:
    "header  header  header"
    "sidebar content aside"
    "footer  footer  footer";
  grid-template-columns: 200px 1fr 200px;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }
.aside   { grid-area: aside; }
.footer  { grid-area: footer; }

/* Single column on mobile */
@media (max-width: 768px) {
  .page-layout {
    grid-template-areas:
      "header"
      "content"
      "sidebar"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

3.3 auto-fill vs auto-fit

/* auto-fill: Keeps empty tracks (creates empty columns at minimum size) */
.grid-fill {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/* auto-fit: Collapses empty tracks (items stretch to fill space) */
.grid-fit {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

The difference shows when items are few. auto-fill leaves empty columns, while auto-fit stretches existing items to fill available space.

3.4 Subgrid

Inherit parent Grid tracks in child elements.

.parent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.child-grid {
  grid-column: span 3;
  display: grid;
  grid-template-columns: subgrid;  /* Inherit parent column tracks */
  gap: 1rem;
}

3.5 Responsive Grid Without Media Queries

/* Perfect responsive card grid - no media queries */
.responsive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.5rem;
}

The min() function ensures no overflow when the container is narrower than 300px.

4. Flexbox vs Grid Decision Guide

4.1 Comparison Table

Criteria	Flexbox	Grid
Dimensions	1D (row or column)	2D (rows and columns)
Content vs Layout	Content-first	Layout-first
Alignment	Main/cross axis	Independent row/column control
Item placement	Source-order based	Free placement
Best for	Navigation, card internals	Page layouts, dashboards
Gap support	Yes	Yes
Wrapping	flex-wrap	Automatic track placement

4.2 When to Use Which

Choose Flexbox when:

Laying out items in one direction (horizontal or vertical)
Layout should be driven by content size
Navigation bars, button groups, card internals
Even spacing between items

Choose Grid when:

You need to control both rows and columns
Clear layout structure (header, sidebar, main)
Overlapping items or free placement
Dashboards, galleries, full page layouts

Use both together:

Grid for overall page structure, Flexbox for component internals

/* Grid + Flexbox combination */
.dashboard {
  display: grid;
  grid-template-columns: 250px 1fr;
  grid-template-rows: 60px 1fr;
  min-height: 100vh;
}

.dashboard .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
}

.dashboard .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

5. Container Queries Deep Dive

5.1 Basic Syntax

/* Declare container */
.widget-container {
  container-type: inline-size;  /* Query based on inline axis (usually width) */
  container-name: widget;       /* Optional name */
}

/* Container query */
@container widget (min-width: 500px) {
  .widget {
    flex-direction: row;
  }
}

@container widget (max-width: 499px) {
  .widget {
    flex-direction: column;
  }
}

5.2 container-type Options

/* inline-size: Query only inline axis (usually width) */
.container { container-type: inline-size; }

/* size: Query both width and height (more expensive) */
.container { container-type: size; }

/* normal: No query capability, name only (for style queries) */
.container { container-type: normal; }

5.3 @container vs @media

/* @media: Viewport-based - entire screen width */
@media (min-width: 768px) {
  .card { flex-direction: row; }
}

/* @container: Parent container-based - reusable */
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

The key advantage of Container Queries is component reusability. The same card component automatically switches between vertical in a sidebar and horizontal in the main area.

5.4 Container Query Units

.widget {
  /* cqw: 1% of container width */
  font-size: clamp(0.875rem, 3cqw, 1.25rem);

  /* cqh: 1% of container height */
  padding: 2cqw;

  /* cqi: 1% of container inline size */
  /* cqb: 1% of container block size */
  margin-inline: 5cqi;
}

6. Modern CSS Selectors

6.1 :has() Deep Dive

/* Change form border when text input is focused */
form:has(input[type="text"]:focus) {
  border-color: blue;
}

/* Empty state handling */
.list:has(> :first-child) {
  /* Applied only when list has children */
}
.list:not(:has(> *)) {
  /* When list is empty */
  display: grid;
  place-items: center;
}
.list:not(:has(> *))::after {
  content: "No items found";
}

/* Dark mode toggle with pure CSS */
html:has(#dark-mode:checked) {
  color-scheme: dark;
  --bg: #1a1a1a;
  --text: #e0e0e0;
}

6.2 :is() and :where()

/* :is() - inherits highest specificity from arguments */
:is(h1, h2, h3, h4) {
  line-height: 1.2;
  margin-block: 1em 0.5em;
}

/* :where() - specificity always 0 (easily overridden) */
:where(h1, h2, h3, h4) {
  line-height: 1.2;
}

/* Practical: use :where() for reset styles */
:where(ul, ol) { list-style: none; padding: 0; }
:where(a) { color: inherit; text-decoration: none; }

/* Simplify deeply nested selectors */
:is(.article, .blog-post, .docs) :is(h1, h2, h3) {
  color: var(--heading-color);
}

6.3 Advanced :not()

/* Border on all items except last */
.list-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

/* Combine multiple conditions */
input:not([type="submit"]):not([type="button"]) {
  border: 1px solid #ccc;
  padding: 0.5rem;
}

/* Exclude disabled items */
.nav-link:not(.disabled):hover {
  background: #f0f0f0;
}

6.4 CSS Nesting Deep Dive

.card {
  background: white;
  border-radius: 8px;

  /* Child selection */
  & .title { font-weight: bold; }

  /* Modifiers */
  &.featured { border: 2px solid gold; }
  &:hover { transform: translateY(-2px); }
  &::before { content: ""; }

  /* Nested media queries */
  @media (prefers-color-scheme: dark) {
    background: #2a2a2a;
    color: white;
  }

  /* Nested container queries */
  @container card (min-width: 400px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

7. CSS Animations Complete Guide

7.1 View Transitions API

Provides smooth animations during page transitions or DOM changes.

/* Default View Transition styles */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

/* Assign names to individual elements */
.hero-image {
  view-transition-name: hero;
}

/* Customize transition for that element */
::view-transition-old(hero) {
  animation: scale-down 0.4s ease-out;
}
::view-transition-new(hero) {
  animation: scale-up 0.4s ease-in;
}

@keyframes scale-down {
  from { transform: scale(1); }
  to { transform: scale(0.8); opacity: 0; }
}
@keyframes scale-up {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); }
}

// Trigger View Transition from JavaScript
document.startViewTransition(() => {
  updateDOM(); // Perform DOM changes
});

7.2 Scroll-Driven Animations

Animations that progress based on scroll position.

/* Scroll progress indicator */
.scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(to right, #3b82f6, #8b5cf6);
  transform-origin: left;
  animation: grow-width linear;
  animation-timeline: scroll();
}

@keyframes grow-width {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* Fade in when element enters viewport */
.fade-in-section {
  animation: fade-in linear both;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(50px); }
  to { opacity: 1; transform: translateY(0); }
}

7.3 @keyframes vs transition

/* transition: Best for state changes (A to B) */
.button {
  background: #3b82f6;
  transition: background 0.3s ease, transform 0.2s ease;
}
.button:hover {
  background: #2563eb;
  transform: scale(1.05);
}

/* @keyframes: For complex multi-step animations */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-20px); }
  50% { transform: translateY(0); }
  75% { transform: translateY(-10px); }
}

.bounce-element {
  animation: bounce 1s ease-in-out infinite;
}

7.4 Performance Optimization Tips

/* Properties using GPU compositing: transform, opacity */
.good-animation {
  /* Uses GPU composite layer - fast */
  transition: transform 0.3s, opacity 0.3s;
}

.bad-animation {
  /* Triggers reflow/repaint - slow */
  transition: width 0.3s, height 0.3s, top 0.3s;
}

/* Hint to browser with will-change */
.will-animate {
  will-change: transform;
}
/* Warning: overuse wastes memory. Use only right before animation */

8. Tailwind CSS v4

8.1 The Oxide Engine Revolution

Tailwind CSS v4 was completely rewritten with the Rust-based Oxide engine.

Key changes:

Build speed improved by 10x or more
CSS-first configuration (no tailwind.config.js needed)
Native Container Queries support
CSS variable-based theming system
Automatic content detection (no content config needed)

8.2 CSS-first Configuration

/* app.css - Configure with CSS instead of tailwind.config.js */
@import "tailwindcss";

@theme {
  --color-primary: #3b82f6;
  --color-secondary: #8b5cf6;
  --font-family-display: "Inter", sans-serif;
  --breakpoint-3xl: 1920px;
}

8.3 Container Queries in Tailwind v4

<!-- Declare container -->
<div class="@container">
  <!-- Container size-based responsive -->
  <div class="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
    <div class="p-4">Item 1</div>
    <div class="p-4">Item 2</div>
    <div class="p-4">Item 3</div>
  </div>
</div>

8.4 Key Tailwind v4 Utilities

<!-- New gradients -->
<div class="bg-linear-to-r from-blue-500 to-purple-500">
  Gradient background
</div>

<!-- 3D transforms -->
<div class="rotate-x-12 rotate-y-6 perspective-800">
  3D effect
</div>

<!-- New variant combinations -->
<button class="hover:not-disabled:bg-blue-600 disabled:opacity-50">
  Smart button
</button>

<!-- Improved group variants -->
<div class="group">
  <p class="group-has-[img]:text-sm">
    Smaller text when group has image
  </p>
</div>

8.5 Migration Guide

# Auto-migrate from v3 to v4
npx @tailwindcss/upgrade

Key changes:

Move tailwind.config.js to CSS @theme block
Use bg-blue-500/50 instead of bg-opacity-*
dark: variant now uses CSS prefers-color-scheme by default
Vite plugin recommended over PostCSS plugin

9. CSS-in-JS Comparison

9.1 Major Libraries Compared

Feature	styled-components	Emotion	Panda CSS	vanilla-extract
Runtime	Yes	Yes	Zero-runtime	Zero-runtime
Bundle size	~12KB	~11KB	~0KB	~0KB
SSR support	Config needed	Config needed	Native	Native
TypeScript	Supported	Supported	Type-safe	Type-safe
React 19	Limited	Limited	Full	Full
Server Components	No	No	Yes	Yes

9.2 2025 Trend: Zero-Runtime

With React Server Components and streaming SSR, runtime CSS-in-JS is declining.

// Panda CSS - Zero-runtime
import { css } from '../styled-system/css'

function Button() {
  return (
    <button className={css({
      bg: 'blue.500',
      color: 'white',
      padding: '8px 16px',
      borderRadius: 'md',
      _hover: { bg: 'blue.600' }
    })}>
      Click
    </button>
  )
}

// vanilla-extract - Build-time CSS
// styles.css.ts
import { style } from '@vanilla-extract/css'

export const button = style({
  background: 'blue',
  color: 'white',
  padding: '8px 16px',
  borderRadius: '4px',
  ':hover': {
    background: 'darkblue',
  },
})

9.3 Selection Guide

New project + React 19: Panda CSS or vanilla-extract
Existing styled-components project: Consider gradual migration
Utility-first preference: Tailwind CSS v4
CSS Modules preference: vanilla-extract (type-safe CSS Modules)

10. Responsive Design Patterns

10.1 Fluid Typography

/* Fluid font sizes with clamp() */
h1 {
  /* Min 2rem, max 4rem, fluid in between */
  font-size: clamp(2rem, 5vw + 1rem, 4rem);
}

p {
  font-size: clamp(1rem, 0.5vw + 0.875rem, 1.25rem);
  line-height: clamp(1.5, 1.2 + 0.5vw, 1.8);
}

/* Fluid spacing */
.section {
  padding: clamp(1rem, 3vw, 3rem);
  gap: clamp(0.5rem, 2vw, 2rem);
}

10.2 aspect-ratio

/* Responsive images/videos that maintain aspect ratio */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.square-avatar {
  aspect-ratio: 1;
  width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.card-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

10.3 Logical Properties

Logical properties for internationalization (RTL/LTR) support.

/* Physical properties (fixed direction) */
.old-way {
  margin-left: 1rem;
  margin-right: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-left: 3px solid blue;
  width: 200px;
  height: 100px;
}

/* Logical properties (direction-adaptive) */
.new-way {
  margin-inline: 1rem;       /* Left+right (or right+left in RTL) */
  padding-block: 2rem;       /* Top+bottom */
  border-inline-start: 3px solid blue;  /* Start direction */
  inline-size: 200px;        /* Width */
  block-size: 100px;         /* Height */
}

10.4 Responsive Image Strategy

<!-- Serve optimal images with srcset and sizes -->
<img
  srcset="image-400.webp 400w,
          image-800.webp 800w,
          image-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1200px) 50vw,
         33vw"
  src="image-800.webp"
  alt="Responsive image"
  loading="lazy"
  decoding="async"
/>

11. CSS Architecture

11.1 BEM (Block Element Modifier)

/* Block */
.card {}

/* Element (part of block) */
.card__title {}
.card__body {}
.card__footer {}

/* Modifier (variation) */
.card--featured {}
.card--compact {}
.card__title--large {}

11.2 Utility-First

<!-- Tailwind style: compose utility classes -->
<div class="flex items-center gap-4 p-4 rounded-lg bg-white shadow-md
            hover:shadow-lg transition-shadow">
  <img class="w-12 h-12 rounded-full object-cover" src="..." alt="..." />
  <div>
    <h3 class="text-lg font-semibold text-gray-900">Username</h3>
    <p class="text-sm text-gray-500">Description text</p>
  </div>
</div>

11.3 CSS Modules

/* Button.module.css */
.button {
  padding: 0.5rem 1rem;
  border-radius: 4px;
  font-weight: 600;
}

.primary {
  background: #3b82f6;
  color: white;
}

.secondary {
  background: #e5e7eb;
  color: #374151;
}

// Automatically generates unique class names
import styles from './Button.module.css'

function Button({ variant = 'primary', children }) {
  return (
    <button className={`${styles.button} ${styles[variant]}`}>
      {children}
    </button>
  )
}

11.4 CSS Layers (@layer) Architecture

/* Layer priority: later declared = higher priority */
@layer reset, base, tokens, components, utilities, overrides;

@layer tokens {
  :root {
    --color-primary: #3b82f6;
    --color-surface: #ffffff;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --radius-md: 8px;
  }
}

@layer components {
  .btn {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-primary);
    color: white;
  }
}

@layer utilities {
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
  }
}

12. Interview Questions and Quiz

5 Quiz Questions

Q1: What is the actual width of .item in the following code?

.container { display: flex; width: 600px; }
.item { flex: 0 1 200px; }
/* With 3 .item elements */

Answer: 200px each. Since flex-grow: 0, remaining space is not distributed, and flex-basis: 200px sets the initial size. Three items fit exactly in 600px.

Q2: What is the key difference between :is() and :where()?

Answer: Specificity. :is() inherits the highest specificity from its arguments, while :where() always has zero specificity. :where() is ideal for resets and default styles.

Q3: What property must the parent have to use Container Queries?

Answer: The parent element must declare container-type: inline-size (or size). Optionally, you can specify container-name to give it a name.

Q4: Which of the following is NOT a GPU-accelerated animation property?

a) transform: translateX(100px) b) opacity: 0.5 c) width: 200px d) filter: blur(5px)

Answer: c) Changing width triggers reflow. transform, opacity, and filter are handled by GPU compositing.

Q5: How has the configuration file changed in Tailwind CSS v4?

Answer: Instead of tailwind.config.js, configuration is done in @theme blocks within CSS files. Themes are defined using CSS variables, and content paths are automatically detected.