CSS Layout & Positioning

Master modern CSS layout systems including Grid Layout Level 2, Flexbox, Multi-column Layout, and cutting-edge Anchor Positioning. Build responsive, flexible layouts with the latest CSS specifications.

CSS Grid Layout Level 2

CSS Grid Layout provides a two-dimensional layout system with powerful alignment and sizing capabilities, including subgrids.

Advanced Grid Layout Patterns

Modern grid layout techniques from CSS Grid Level 2

<!-- Basic Grid Layout -->
<div class="grid-container">
  <header class="header">Page Header</header>
  <main class="main">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

<!-- Named Grid Areas Layout -->
<div class="layout-grid">
  <header class="header">Header Section</header>
  <nav class="sidebar">
    <ul>
      <li><a href="#">Navigation 1</a></li>
      <li><a href="#">Navigation 2</a></li>
      <li><a href="#">Navigation 3</a></li>
    </ul>
  </nav>
  <main class="main">
    <h1>Main Content Area</h1>
    <p>This is the primary content area using CSS Grid named areas.</p>
  </main>
  <footer class="footer">Footer Content</footer>
</div>

<!-- Subgrid Example (CSS Grid Level 2) -->
<div class="card-grid">
  <article class="card">
    <h2 class="card-title">Card Title 1</h2>
    <div class="card-content">
      <p>This card uses subgrid to align with other cards in the same row.</p>
    </div>
    <div class="card-footer">
      <button>Read More</button>
    </div>
  </article>
  
  <article class="card">
    <h2 class="card-title">Longer Card Title 2</h2>
    <div class="card-content">
      <p>Even with different content lengths, the subgrid keeps everything aligned.</p>
      <p>Multiple paragraphs are handled gracefully.</p>
    </div>
    <div class="card-footer">
      <button>Learn More</button>
    </div>
  </article>
  
  <article class="card">
    <h2 class="card-title">Card 3</h2>
    <div class="card-content">
      <p>Short content.</p>
    </div>
    <div class="card-footer">
      <button>View Details</button>
    </div>
  </article>
</div>

<!-- Masonry Grid Layout -->
<div class="masonry-grid">
  <div class="masonry-item" style="--row-span: 15">
    <h3>Gallery Item 1</h3>
    <p>This is a taller item that spans more rows.</p>
  </div>
  
  <div class="masonry-item" style="--row-span: 8">
    <h3>Gallery Item 2</h3>
    <p>Shorter content.</p>
  </div>
  
  <div class="masonry-item" style="--row-span: 12">
    <h3>Gallery Item 3</h3>
    <p>Medium length content that demonstrates the masonry layout effect.</p>
  </div>
  
  <div class="masonry-item" style="--row-span: 6">
    <h3>Gallery Item 4</h3>
    <p>Small item.</p>
  </div>
</div>

<!-- Flexible Grid with Intrinsic Sizing -->
<div class="flexible-grid">
  <div class="sidebar-content">
    <h3>Sidebar</h3>
    <p>Fits content</p>
  </div>
  
  <div class="main-content">
    <h3>Main Content</h3>
    <p>This section grows and shrinks based on available space, with a minimum width of 300px.</p>
  </div>
  
  <div class="metadata">
    <h3>Meta Info</h3>
    <p>Sizes to largest content</p>
  </div>
</div>

<!-- Dense Grid Packing -->
<div class="dense-grid">
  <div class="dense-item">Item 1</div>
  <div class="dense-item wide">Wide Item 2</div>
  <div class="dense-item">Item 3</div>
  <div class="dense-item tall">Tall Item 4</div>
  <div class="dense-item">Item 5</div>
  <div class="dense-item">Item 6</div>
  <div class="dense-item wide">Wide Item 7</div>
  <div class="dense-item">Item 8</div>
</div>

<!-- Responsive Grid Without Media Queries -->
<div class="responsive-grid">
  <div class="grid-item">Product 1</div>
  <div class="grid-item">Product 2</div>
  <div class="grid-item">Product 3</div>
  <div class="grid-item">Product 4</div>
  <div class="grid-item">Product 5</div>
  <div class="grid-item">Product 6</div>
</div>

<!-- Aligned Grid Example -->
<div class="aligned-grid">
  <div class="grid-item">Item 1</div>
  <div class="grid-item center">Centered Item</div>
  <div class="grid-item">Item 3</div>
  <div class="grid-item">Item 4</div>
  <div class="grid-item">Item 5</div>
  <div class="grid-item">Item 6</div>
  <div class="grid-item">Item 7</div>
  <div class="grid-item">Item 8</div>
  <div class="grid-item">Item 9</div>
</div>

Explanation:

CSS Grid Layout Level 2 introduces subgrids and enhanced features for creating sophisticated, responsive layouts without complex calculations or media queries.

Accessibility Tips:

Use logical order in grid-template-areas for screen reader navigation
Ensure grid items maintain readable tab order
Test grid layouts with zoom up to 200%
Provide fallbacks for older browsers that don't support subgrid

CSS Flexible Box Layout

Flexbox provides a one-dimensional layout method for arranging items in rows or columns with powerful alignment and distribution capabilities.

Advanced Flexbox Patterns

Sophisticated flexbox layouts for modern web design

<!-- Advanced Flexbox Layout Examples -->
<div class="flexbox-showcase">
  <!-- Basic flex layout -->
  <section class="flex-container">
    <div class="flex-item">Item 1</div>
    <div class="flex-item">Item 2</div>
    <div class="flex-item">Item 3</div>
  </section>

  <!-- Holy Grail Layout -->
  <div class="holy-grail">
    <header class="header">Header</header>
    <div class="content-wrap">
      <nav class="sidebar">Sidebar</nav>
      <main class="main-content">Main Content</main>
      <aside class="aside">Aside</aside>
    </div>
    <footer class="footer">Footer</footer>
  </div>

  <!-- Card layout -->
  <section class="card-layout">
    <article class="card">
      <header class="card-header">Card 1</header>
      <div class="card-content">Content goes here</div>
      <footer class="card-footer">
        <button>Action</button>
      </footer>
    </article>
    <article class="card">
      <header class="card-header">Card 2</header>
      <div class="card-content">More content here</div>
      <footer class="card-footer">
        <button>Action</button>
      </footer>
    </article>
  </section>

  <!-- Media object -->
  <div class="media-object">
    <img src="avatar.jpg" alt="Avatar" class="media-image">
    <div class="media-body">
      <h3>Media Object</h3>
      <p>This is a flexible media object pattern.</p>
    </div>
  </div>
</div>

Explanation:

Flexbox excels at one-dimensional layouts, providing intuitive alignment, distribution, and sizing of elements within containers.

Accessibility Tips:

Be careful with flex order - it changes visual order but not DOM order
Test keyboard navigation when using order property
Use min-width: 0 on flex items to prevent overflow issues
Ensure flex layouts work at different zoom levels

CSS Multi-column Layout

Multi-column layout enables flowing content across multiple columns like newspapers and magazines, perfect for text-heavy content.

Multi-column Layout Techniques

Creating newspaper-style layouts with CSS columns

<!-- Multi-column Layout Examples -->
<div class="multi-column-demo">
  <!-- Basic multi-column text -->
  <article class="multi-column-text">
    <h2>Multi-Column Article</h2>
    <p>This is a long article that will be automatically flowed into multiple columns. The text flows from one column to the next, creating a newspaper-like layout that's perfect for reading long-form content.</p>
    <p>CSS Multi-column Layout allows content to flow naturally across multiple columns while maintaining readability. The browser automatically handles the column breaks and balances the content.</p>
    <p>You can control various aspects like column width, gap between columns, and rules (lines) between columns to create professional layouts.</p>
  </article>

  <!-- Magazine-style layout -->
  <article class="magazine-layout">
    <h2>Magazine Style Layout</h2>
    <p>This layout demonstrates more advanced multi-column features including column spans and breaks.</p>
    
    <h3 class="column-span">Full Width Heading</h3>
    
    <p>After the spanning heading, the text continues to flow in columns. This is useful for subheadings and other elements that need to span across all columns.</p>
    <p>The multi-column layout automatically adjusts to the available space and creates balanced columns.</p>
    
    <div class="break-inside-avoid">
      <h4>Sidebar Box</h4>
      <p>This content box is set to avoid breaking across columns.</p>
    </div>
    
    <p>Additional content continues here, flowing around the unbreakable elements.</p>
  </article>

  <!-- News layout -->
  <section class="news-layout">
    <header class="news-header">
      <h1>Daily News</h1>
      <time>November 16, 2025</time>
    </header>
    
    <article class="news-article">
      <h2>Breaking: CSS Multi-column Gains New Features</h2>
      <p class="lead">The latest CSS specification introduces enhanced multi-column capabilities for better web typography.</p>
      <p>Web developers now have more control over column layouts with improved break controls and spanning options. This development represents a significant step forward in web layout capabilities.</p>
      <p>The new features include better handling of images, improved column balancing algorithms, and enhanced support for complex layouts that combine multiple layout methods.</p>
    </article>
    
    <aside class="news-sidebar">
      <h3>Related Stories</h3>
      <ul>
        <li><a href="#">CSS Grid Updates</a></li>
        <li><a href="#">Flexbox Best Practices</a></li>
        <li><a href="#">Modern Layout Techniques</a></li>
      </ul>
    </aside>
  </section>
</div>

Explanation:

Multi-column layout is perfect for text-heavy content, providing automatic text flow across columns with fine control over breaks and spanning.

Accessibility Tips:

Be mindful of reading flow - columns should read naturally
Avoid too many narrow columns that are hard to read
Test with increased font sizes to ensure readability
Consider single-column layouts for mobile devices

CSS Anchor Positioning

CSS Anchor Positioning allows elements to be positioned relative to other elements anywhere on the page, enabling sophisticated UI components like tooltips and popups.

Modern Anchor Positioning

Position elements relative to anchor points anywhere on the page

<!-- Anchor Positioning Examples -->
<div class="anchor-demo">
  <!-- Button with tooltip -->
  <section class="tooltip-demo">
    <button id="help-button" class="anchor-button">
      Help ?
    </button>
    <div class="tooltip" id="help-tooltip">
      This is a tooltip positioned relative to the button
    </div>
  </section>

  <!-- Card with popup -->
  <section class="card-popup-demo">
    <article id="article-card" class="demo-card">
      <h3>Article Title</h3>
      <p>This card has a popup that appears when hovered.</p>
    </article>
    
    <div class="card-popup">
      <h4>Additional Information</h4>
      <p>This popup is positioned relative to the card using anchor positioning.</p>
    </div>
  </section>

  <!-- Navigation with dropdown -->
  <nav class="anchor-nav">
    <ul class="nav-list">
      <li>
        <button id="products-nav" class="nav-button">Products</button>
        <ul class="dropdown-menu">
          <li><a href="#">Web Design</a></li>
          <li><a href="#">Development</a></li>
          <li><a href="#">Consulting</a></li>
        </ul>
      </li>
      <li>
        <button id="services-nav" class="nav-button">Services</button>
        <ul class="dropdown-menu">
          <li><a href="#">Support</a></li>
          <li><a href="#">Training</a></li>
          <li><a href="#">Maintenance</a></li>
        </ul>
      </li>
    </ul>
  </nav>

  <!-- Content with side annotations -->
  <article class="annotated-content">
    <h2>Annotated Article</h2>
    <p id="paragraph-1">
      This is the first paragraph of content. It has an annotation 
      positioned to its side using anchor positioning.
    </p>
    
    <aside class="annotation annotation-1">
      Note: This annotation is anchored to paragraph 1
    </aside>
    
    <p id="paragraph-2">
      This is another paragraph with its own annotation that follows
      it as the content flows and reflows.
    </p>
    
    <aside class="annotation annotation-2">
      Important: This note relates to paragraph 2
    </aside>
  </article>

  <!-- Interactive elements -->
  <section class="interactive-demo">
    <div id="draggable-item" class="draggable">
      Drag me around
    </div>
    
    <div class="follower">
      I follow the draggable item
    </div>
    
    <div class="status-indicator">
      Status updates based on position
    </div>
  </section>
</div>

Explanation:

CSS Anchor Positioning provides a powerful way to position elements relative to other elements, making it much easier to create tooltips, dropdowns, and other positioned UI components.

Accessibility Tips:

Ensure tooltips are accessible via keyboard navigation
Provide fallback positioning for browsers without anchor support
Test anchor positioning with different viewport sizes
Consider using ARIA attributes for tooltip relationships

Layout & Positioning Best Practices

Layout Strategy

• Use Grid for two-dimensional layouts
• Use Flexbox for one-dimensional layouts
• Consider multi-column for text-heavy content
• Test anchor positioning support before production use
• Provide fallbacks for modern layout features

Accessibility & Performance

• Maintain logical tab order with visual layout
• Test layouts at 200% zoom for accessibility
• Use semantic HTML structure regardless of layout
• Optimize for mobile-first responsive design
• Consider reduced motion preferences