Flexbox: Creating a Responsive Pricing Grid

Topics Covered in This Web Development Tutorial:

Advanced Flexbox Nesting Techniques, Strategic Application of Flexbox Concepts to Modern Pricing Grid Layouts

Exercise Preview

Exercise Overview

In this hands-on exercise, you'll leverage advanced flexbox techniques to construct a professional pricing grid layout. This tutorial specifically focuses on nested flexbox containers—a powerful pattern that's become essential for modern web development. You'll discover how strategic nesting creates flexible, maintainable layouts that adapt seamlessly across devices while maintaining perfect alignment and spacing.

By the end of this exercise, you'll understand why nested flexbox has largely replaced complex CSS Grid scenarios for component-level layouts, and you'll have practical experience implementing the techniques used by leading web applications today.

Getting Started

1. In your code editor, close any files you may have open to start with a clean workspace.
2. For this exercise we'll be working with the Flexbox Pricing Grid folder located in Desktop > Class Files > yourname-Flexbox Grid Class. If you're using a modern editor like Visual Studio Code, WebStorm, or Sublime Text, open the entire folder to enable better IntelliSense and file navigation.
3. Open hikes.html from the Flexbox Pricing Grid folder.

4. Preview hikes.html in Firefox—we'll be leveraging its superior DevTools for flexbox debugging throughout this exercise.

   • The current layout renders beautifully on mobile devices, but desktop users deserve a more sophisticated three-column presentation. We'll transform the stacked Morning or Afternoon, Quick Getaway, and All Day Adventure options into an elegant columnar grid.

5. Keep hikes.html open in Firefox as your live preview window—you'll reload frequently to observe your code changes in real-time.

Using Flexbox to Create Columns

Now we'll transform the mobile-first layout into a responsive desktop experience using flexbox's powerful column creation capabilities.

1. Switch back to your code editor and examine the document structure.
2. In hikes.html, locate the main tag containing three section elements—these will become our flexbox columns. This semantic structure provides excellent accessibility and SEO benefits.
3. Open main.css from the css folder within the Flexbox Pricing Grid directory.

4. Within the min-width: 1000px media query, add the flex container properties:

   main {
      display: flex;
      max-width: 1310px;
      margin: 30px auto;
   }

5. Save the file and reload the page in Firefox.

   • Expand the browser window beyond 1000px to observe the three-column transformation.
   • Notice the columns have unequal widths—flexbox is using content-based sizing by default. We'll establish uniform column widths next.
   • Also observe that the outer columns don't align with the header above. This margin inconsistency will be our next target for improvement.
6. Return to your code editor to implement equal-width columns.

7. In the min-width: 1000px media query, add this section rule below the main rule:

   section {
      flex-basis: 33.33%;
      margin: 0;
   }

8. Save the file and reload the page in Firefox.

   • All three columns now maintain equal width—each occupying exactly one-third of the available space.
   • The outer columns now align perfectly with the header above, creating visual harmony. We'll add appropriate spacing between columns next.
9. Return to your code editor to implement professional column spacing.

10. In the min-width: 1000px media query, add this sophisticated selector below the section rule:

    section:not(:last-child) {
       margin-right: 30px;
    }

    NOTE: This CSS pseudo-selector targets all sections except the final one, applying right margin only to the first and second columns. This technique prevents unwanted margin on the rightmost column.

11. Save the file and reload the page in Firefox.

    • The column spacing now achieves professional-grade visual balance.
    • Here's a crucial flexbox insight: despite each column having a 33.33% flex-basis plus margins, all three still fit on one line. This demonstrates that flex-basis represents an ideal size rather than a rigid constraint. Flexbox automatically adjusts item sizes to accommodate margins while maintaining single-line layout (since flex-wrap isn't enabled). For deeper understanding of flex-basis versus width behavior, explore: tinyurl.com/fb-width
    • Next, we'll reposition the Most Popular column to the center for maximum visual impact.

Reordering the Columns

Flexbox's ordering capabilities allow us to separate visual presentation from HTML structure, maintaining semantic markup while optimizing user experience.

1. Return to your code editor.

2. In the min-width: 1000px media query, add this reordering rule below the section:not(:last-child) rule:

   section.secondary {
      order: -1;
   }

3. Save the file and reload the page in Firefox.

   • The Most Popular column should now occupy the prominent center position, creating a classic pricing table layout that drives conversions.
   • Now we'll implement bottom-alignment for the pricing and call-to-action buttons—a crucial UX pattern that ensures visual consistency regardless of content length variations.
4. Ctrl+click (Mac) or Right-click (Windows) on the Quick Getaway heading in the left column and select Inspect Element.
5. In the DevTools, locate the highlighted <h2>Quick Getaway</h2> element and click on its parent <div class="text-wrapper"> container.

6. As you hover over <div class="text-wrapper"> in the DevTools, observe the highlighted area on the page.

   • Notice that this text-wrapper div doesn't extend to the bottom of its column container, leaving the pricing and button elements floating in the upper portion.
   • To achieve bottom-alignment, we need this div to fill the entire available vertical space. By converting the parent section into a flex container, the text-wrapper becomes a flex item capable of growth.
   • Keep DevTools open for continued inspection as we implement these changes.

Vertically Aligning Buttons to the Bottom (Nesting Flexbox)

This section demonstrates the power of nested flex containers—a sophisticated technique that's become fundamental to modern CSS architecture. We'll create multiple levels of flex contexts to achieve precise control over both horizontal and vertical alignment.

1. Return to your code editor to begin implementing nested flexbox.

2. In the min-width: 1000px media query's section rule, add the flex container property:

   section {
      flex-basis: 33.3333%;
      margin: 0;
      display: flex;
   }

3. Save the file and reload the page in Firefox.

   • The Most Popular label has rotated to vertical orientation. This occurs because the center section contains two direct children: the Most Popular paragraph and the .text-wrapper div. These elements have become flex items arranged in the default row direction.
   • The outer columns appear unaffected since they contain only single flex items. We'll correct the direction next.
4. Return to your code editor to establish proper column direction.

5. In the min-width: 1000px media query's section rule, specify column direction:

   section {
      flex-basis: 33.3333%;
      margin: 0;
      display: flex;
      flex-direction: column;
   }

6. Save the file and reload the page in Firefox.

   • The Most Popular label returns to its proper top position.
   • Inspect the <div class="text-wrapper"> again in DevTools—notice it still doesn't fill the full column height. We'll enable flex growth next.
7. Return to your code editor to implement flex growth.

8. In the min-width: 1000px media query, add this expansion rule below the section.secondary rule:

   .text-wrapper {
      flex-grow: 1;
   }

9. Save the file and reload the page in Firefox.

   • Inspect the <div class="text-wrapper"> in DevTools again—it now fills the entire available column height!
   • To achieve precise control over pricing element positioning, we need to create a third level of flex context. The nested structure becomes:
     main (flex container)
     → section (flex item, and flex container)
         → .text-wrapper (flex item, needs to become flex container)
             → content elements (will become flex items)
10. Return to your code editor to create the nested flex container.

11. In the min-width: 1000px media query's .text-wrapper rule, add the flex container property:

    .text-wrapper {
       flex-grow: 1;
       display: flex;
    }

12. Save the file and reload the page in Firefox.

    • The default row direction has dramatically disrupted the layout, arranging content elements horizontally. This is expected behavior that we'll correct immediately.
13. Return to your code editor to restore proper content flow.

14. In the min-width: 1000px media query's .text-wrapper rule, specify column direction:

    .text-wrapper {
       flex-grow: 1;
       display: flex;
       flex-direction: column;
    }

15. Save the file and reload the page in Firefox.

    • The layout structure is restored and improved!
    • You might notice increased spacing between paragraphs. In normal document flow, vertical margins collapse between adjacent elements (taking the larger of two margins). However, flex items don't experience margin collapse—margins accumulate instead. This is expected flexbox behavior, though it's crucial to understand for complex layouts.
    • Now we can implement the bottom-alignment technique for pricing elements.
16. Return to your code editor to implement auto-margin bottom alignment.

17. In the min-width: 1000px media query, add this powerful alignment rule below the .text-wrapper rule:

    .text-wrapper .price {
       margin-top: auto;
    }

18. Save the file and reload the page in Firefox.

    • Excellent! The pricing and Book Now buttons now align perfectly at the bottom of each column, creating a professional, conversion-optimized layout.
    • Let's enhance the visual hierarchy by offsetting the outer columns to emphasize the Most Popular designation.
19. Return to your code editor to add visual emphasis through positioning.

20. In the min-width: 1000px media query, add this positioning rule below the section.secondary rule:

    section:not(.secondary) {
       margin-top: 44px;
    }

    NOTE: We target sections that don't have the "secondary" class rather than using positional selectors, because CSS selectors reference DOM order, not visual order (which we've modified with the order property).

21. Save the file and reload the page in Firefox.

    • The outer columns now sit lower, creating a subtle but effective visual emphasis on the center "Most Popular" option—a proven technique for guiding user attention in pricing tables.

Vertically Centering the Sections

Let's explore an alternative layout approach that demonstrates flexbox's versatility in creating different visual relationships between elements.

1. Return to your code editor to simplify the layout structure.

2. In the min-width: 1000px media query, remove these rules that are no longer needed for our simplified approach:

   • section:not(.secondary)
   • .text-wrapper
   • .text-wrapper .price

3. In the section rule within the min-width: 1000px media query, remove the nested flex properties to simplify:

   section {
      flex-basis: 33.3333%;
      margin: 0;
   }

4. In the min-width: 1000px media query's main rule, add center alignment:

   main {
      display: flex;
      align-items: center;
      max-width: 1310px;
      margin: 30px auto;
   }

5. Save the file and reload the page in Firefox.

   • The outer columns now center vertically relative to the taller middle column, creating an elegant, balanced composition that feels modern and sophisticated.
   • Test the responsive behavior by resizing your browser window—notice how the layout gracefully transitions between mobile stack and desktop columns, maintaining visual integrity at every breakpoint.