CSS Grid Fundamentals Review

CSS Grid revolutionized web layout by providing native two-dimensional control over both rows and columns simultaneously. While Flexbox excels at one-dimensional flow, Grid shines when you need explicit control over both axes. This review refreshes the core Grid concepts you have used previously and prepares you for the advanced Grid techniques coming in Unit 3.

Grid Syntax Essentials

Grid uses a parent-child relationship where the grid container defines the layout structure and grid items position themselves within that structure. The container establishes tracks using grid-template-columns and grid-template-rows, while items can span multiple tracks or position themselves explicitly.

The fr Unit and repeat()

The fr unit represents a fraction of available space, similar to flex-grow but more predictable because Grid calculates track sizes before placing items. Unlike percentage-based layouts, fr units automatically account for gaps and fixed-width tracks, distributing only the remaining space proportionally.

      .grid {
          display: grid;
          grid-template-columns: 200px 1fr 2fr;
          gap: 1rem;
      }
  

In this example, the first column takes exactly 200px, then the remaining space divides among the flexible columns with the third column receiving twice as much as the second. The repeat() function reduces repetition when creating multiple identical tracks.

      .grid {
          /* Creates 4 equal columns */
          grid-template-columns: repeat(4, 1fr);
          
          /* Creates alternating pattern */
          grid-template-columns: repeat(3, 100px 1fr);
      }
  

Responsive Grids with auto-fit and auto-fill

The most powerful responsive pattern combines repeat() with auto-fit or auto-fill and minmax(). This creates grids that automatically adjust column count based on available space without any media queries.

      .grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
          gap: 1.5rem;
      }
  

This pattern creates as many columns as fit within the container, with each column having a minimum width of 250px and growing to fill available space. When the container narrows, columns automatically wrap to new rows. The difference between auto-fit and auto-fill only matters when you have fewer items than could fit: auto-fit collapses empty tracks while auto-fill preserves them.

Grid Line Positioning

Grid items can position themselves explicitly using line numbers. Grid lines are numbered starting from 1 at the start edge, with negative numbers counting from the end edge. This allows precise control over item placement and spanning.

      .header {
          grid-column: 1 / -1; /* Spans from first to last column line */
      }
      
      .sidebar {
          grid-column: 1 / 2;
          grid-row: 2 / 4; /* Spans rows 2 and 3 */
      }
      
      .main {
          grid-column: 2 / -1;
          grid-row: 2 / 3;
      }
  

The span keyword provides an alternative syntax when you know how many tracks to span but not the specific line numbers: grid-column: span 2 makes an item span two columns from its starting position.

Interactive Demo: Grid Layout Basics

Experiment with grid track definitions to see how fr units, fixed widths, and minmax() interact. Adjust the column template and observe how items reflow.

Notice how fr units automatically adjust to container size and account for gaps, while minmax() provides both flexibility and minimum size guarantees. The responsive pattern with auto-fit creates layouts that adapt without media queries.

Grid vs Flexbox: Choosing the Right Tool

Both Grid and Flexbox are powerful layout systems, but they solve different problems. Understanding when to use each tool creates more maintainable layouts with less code. The fundamental distinction: Flexbox handles one-dimensional flow while Grid manages two-dimensional structure.

When to Use Flexbox

Choose Flexbox when your layout flows in a single direction and items need flexible sizing based on content or available space. Navigation bars, button groups, form rows, and card grids where items wrap to new lines all benefit from Flexbox. If you find yourself thinking about how items flow and wrap, Flexbox is likely the right choice.

Flexbox particularly excels at vertical or horizontal centering, distributing space between items, and creating components where the number of items varies. The media object pattern, split button groups, and sticky footers all use Flexbox because they need flexible item sizing within a single row or column.

When to Use Grid

Choose Grid when you need simultaneous control over rows and columns, or when items should align across both axes. Page layouts with headers, sidebars, and main content areas benefit from Grid because you can define the entire structure at once. If you find yourself drawing boxes within boxes or thinking about areas of the page, Grid is likely the right choice.

Grid particularly excels at creating galleries where items need consistent alignment, dashboards with defined regions, and forms where labels and inputs must align vertically across multiple rows. Any time you need items in one row to align with items in other rows, Grid provides the structure you need.

Combining Grid and Flexbox

Real-world layouts often use both tools together. Grid defines the overall page structure while Flexbox handles individual component internals. A dashboard might use Grid to position widgets in a defined layout, while each widget uses Flexbox internally for its header, content, and actions. This combination leverages each tool's strengths without forcing either into inappropriate roles.

Common Grid Patterns

Several grid patterns appear repeatedly in web layouts. Mastering these fundamental patterns prepares you to build complex layouts efficiently. Each pattern addresses specific layout needs while remaining responsive and maintainable.

The Holy Grail Layout

The classic page layout includes a header, footer, sidebar, and main content area. Grid makes this trivial compared to older techniques that required complex float-based or flexbox workarounds.

      .page {
          display: grid;
          grid-template-columns: 250px 1fr;
          grid-template-rows: auto 1fr auto;
          min-height: 100vh;
          gap: 0;
      }
      
      .header {
          grid-column: 1 / -1;
      }
      
      .sidebar {
          grid-column: 1 / 2;
      }
      
      .main {
          grid-column: 2 / 3;
      }
      
      .footer {
          grid-column: 1 / -1;
      }
  

The header and footer span all columns, the sidebar takes a fixed width, and the main content fills remaining space. The middle row uses 1fr to expand and fill viewport height, pushing the footer to the bottom.

Responsive Card Grid

While Flexbox can create card grids, Grid provides more control when you need consistent column widths and gap sizes across wrapping rows.

      .card-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 2rem;
      }
  

This pattern creates as many equal-width columns as fit within the container. Unlike Flexbox, the last row items maintain the same width as items in previous rows, preventing the stretched appearance that Flexbox produces with partial rows.

Asymmetric Gallery

Grid excels at creating galleries where some items span multiple tracks, creating visual interest without breaking alignment.

      .gallery {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 1rem;
      }
      
      .gallery-item:nth-child(3n + 1) {
          grid-column: span 2;
      }
  

Every third item starting from the first spans two columns, creating an interesting rhythm while maintaining the underlying grid structure. Items automatically reflow as the grid adjusts to different viewport sizes.

Grid Alignment Properties

Grid provides fine-grained control over alignment on both axes. Understanding the distinction between item alignment and content alignment prevents confusion when positioning grid items.

The justify-items and align-items properties control how items align within their grid areas, similar to Flexbox alignment. These properties apply to all items at once from the container. Individual items can override this with justify-self and align-self.

The justify-content and align-content properties control how the entire grid aligns within the container when the grid is smaller than the container. This typically occurs with fixed-size tracks that do not fill the container width or height. These properties work identically to their Flexbox counterparts but operate on grid tracks rather than flex items.

      .grid {
          display: grid;
          grid-template-columns: repeat(3, 200px);
          gap: 1rem;
          
          /* Aligns items within their areas */
          justify-items: start;
          align-items: center;
          
          /* Aligns the grid within the container */
          justify-content: center;
      }
  

Preparing for Advanced Grid Techniques

This review covered the foundational Grid concepts you will build upon in Unit 3. The advanced techniques coming next include named grid areas for semantic layouts, subgrid for nested alignment, advanced responsive patterns without media queries, and complex asymmetric layouts that would be difficult with any other CSS layout system.

The combination of Grid and Flexbox provides complete control over modern web layouts. Grid handles the macro-level page structure and two-dimensional alignment requirements, while Flexbox manages micro-level component layouts and one-dimensional flow. Understanding when to apply each tool and how to combine them effectively separates proficient developers from those still fighting their layout systems.

Practice with Grid Garden and Flexbox Froggy

Now that we have reviewed Flexbox and Grid, you might want to brush up with some hands-on practice. If you used them earlier in your studies, Flexbox Froggy and Grid Garden are excellent, gamified ways to reinforce the concepts. Replaying through the levels can solidify properties like justify-content, align-items, grid-template-columns, and grid-column in a low-pressure setting.

Spend a few minutes on Flexbox Froggy for one-dimensional layout practice and Grid Garden for two-dimensional Grid. You may find that concepts from this review click even more once you apply them in the games.