Grid: Alignment, Centering, & Reordering Content

Topics Covered in This Web Development Tutorial:

Master CSS Grid alignment and ordering techniques: aligning grid items within their containers, positioning individual elements, and controlling content flow through strategic ordering.

Exercise Preview

Exercise Overview

This hands-on exercise explores CSS Grid's sophisticated alignment and ordering capabilities. While these concepts parallel Flexbox functionality, Grid's two-dimensional nature provides distinct advantages for complex layouts. You'll learn to control both individual item positioning and overall content distribution—essential skills for creating polished, professional interfaces that adapt gracefully across devices and screen sizes.

Getting Started

1. Close any open files in your code editor to maintain a clean workspace.
2. Navigate to the Grid Alignment and Order folder located in Desktop > Class Files > yourname-Flexbox Grid Class. For optimal workflow, open this entire folder in your code editor (Visual Studio Code, Sublime Text, or similar editors support folder-based project management).

3. Open index.html from the Grid Alignment and Order folder.

   • Examine the .gallery div containing brand logo images—this will serve as our grid container.
   • Note that the first image is wrapped in a .logo-wrapper div with custom background styling. This visual aid will help you understand how grid items behave differently from their content, particularly regarding sizing and positioning.

4. Preview index.html in Firefox (or Chrome with DevTools).

   • The .gallery div displays with an orange border for easy identification of container boundaries.
   • The J.Crew logo, wrapped in its styled div, currently spans the full container width due to default block-level behavior.
   • Remaining logos display inline, following standard image flow patterns.

5. Keep index.html open in your browser throughout this exercise—you'll refresh frequently to observe your code changes in real-time.

Starting the Grid

Now we'll transform this basic layout into a structured grid system, establishing the foundation for advanced alignment techniques.

1. Return to your code editor.
2. Open main.css from the css folder within the Grid Alignment and Order directory.

3. Add the following properties to the .gallery rule:

   gallery {
      border: 8px solid orange;
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(4,1fr);
   }

4. Save and refresh your browser.

   • Your logos now arrange in a clean 4×4 grid structure with consistent 30px spacing.
   • Notice how the grid automatically handles overflow to new rows—this responsive behavior is one of Grid's key advantages over traditional layout methods.
5. Right-click anywhere within the grid and select Inspect Element to access Developer Tools.
6. In DevTools, click the grid button next to <div class="gallery"> to enable the grid overlay visualization.
7. Observe how the colored J.Crew logo container fills its entire grid area—this default "stretch" behavior will change as we apply alignment properties.

8. Keep DevTools open with the grid overlay active for the next section.

Aligning Grid Items

Grid alignment operates on two axes: the inline axis (horizontal) and block axis (vertical). Understanding this distinction is crucial for precise layout control.

1. Return to your code editor.

2. Add horizontal centering to the .gallery rule:

   gallery {

   Code Omitted To Save Space

   grid-template-columns: repeat(4,1fr);
      justify-items: center;
   }

3. Save and refresh your browser.

   • All logos now center horizontally within their grid areas.
   • The J.Crew logo's colored container shrinks to content size rather than stretching—this demonstrates how alignment properties affect sizing behavior.
4. Return to your code editor.

5. Add vertical centering to complete the alignment:

   gallery {

   Code Omitted To Save Space

   justify-items: center;
      align-items: center;
   }

6. Save and refresh your browser.

   • Logos are now perfectly centered both horizontally and vertically within their grid areas, creating a balanced, professional appearance.

Aligning Within the Grid Container

While item alignment controls positioning within individual grid areas, content alignment manages the entire grid's position within its container—essential for responsive design scenarios.

1. Return to your code editor.

2. Change the flexible grid columns to fixed widths:

   gallery {
      border: 8px solid orange;
      display: grid;
      gap: 30px;
      grid-template-columns: repeat(4, 175px);
      justify-items: center;
      align-items: center;
   }

3. Save and refresh your browser.

   • Widen your browser window until you see empty space to the right of the logos within the orange border. This space occurs because our grid is now smaller than its container.
4. Return to your code editor.

5. Center the entire grid horizontally:

   gallery {

   Code Omitted To Save Space

   justify-items: center;
      align-items: center;
      justify-content: center;
   }

6. Save and refresh your browser.

   • The grid columns now center within the container, distributing empty space evenly on both sides.

7. Experiment with different justify-content values in DevTools:

   • start, end, center, space-around, space-between, and space-evenly. Each provides different spacing strategies for responsive layouts.
8. Return to your code editor.

9. Add height to demonstrate vertical content alignment:

   gallery {

   Code Omitted To Save Space

   justify-content: center;
      height: 700px;
   }

10. Save and refresh your browser.

    • The increased height creates vertical space, setting up our next alignment demonstration.
11. Return to your code editor.

12. Center the grid vertically within its container:

    gallery {

    Code Omitted To Save Space

    justify-items: center;
       align-items: center;
       justify-content: center;
       align-content: center;
       height: 700px;
    }

13. Save and refresh your browser.

    • The entire grid now centers vertically, with equal space above and below.

14. In DevTools, experiment with align-content values:

    • start, end, center, space-around, space-between, and space-evenly. These mirror justify-content behavior but operate on the vertical axis.
    • Understanding both axes gives you complete control over grid positioning in any layout scenario.

15. Refresh the page to reset any experimental changes.

Aligning Individual Grid Items

Sometimes specific grid items need unique positioning while others follow the default alignment. This granular control distinguishes professional layouts from basic grid implementations.

1. Return to your code editor.

2. Add a rule targeting the Zara logo specifically:

   .gallery.zara {
      justify-self: end;
      align-self: start;
   }

3. Save and refresh your browser.

   • The Zara logo now positions at the top-right of its grid area, overriding the global centering rules.
   • Right-click the Zara logo and select Inspect Element.
   • In DevTools, experiment with different justify-self and align-self values: start, end, center, and stretch. This technique is invaluable for creating visual hierarchy and emphasis in complex layouts.
4. Return to your code editor.

5. Remove the .gallery.zara rule—this was purely educational to understand the capability.

Ordering Grid Items

Visual order independence from source order is a powerful feature shared between Grid and Flexbox, enabling accessibility-friendly markup while achieving any desired visual presentation.

1. Add ordering to move Nike to the beginning:

   .gallery.nike {
      order: -1;
   }

2. Save and refresh your browser.

   • Nike now appears first because negative order values precede the default order of 0.
3. Return to your code editor.

4. Change Nike's order to move it to the end:

   .gallery.nike {
      order: 1;
   }

5. Save and refresh your browser.

   • Nike now appears last, demonstrating how positive order values work.
6. Return to your code editor.
7. Switch to index.html.
8. Remove the .logo-wrapper div around the first image, deleting both opening and closing tags while preserving the image itself.
9. Save the HTML file.
10. Switch back to main.css.

11. Create a comprehensive ordering system:

    .gallery img {
       order: 3;
    }

12. Add specific ordering for Hermes:

    .gallery.hermes {
       order: 2;
    }

13. Save and refresh your browser.

    • Your logos now display in the custom order: Nike (order: 1), Hermes (order: 2), J.Crew (default: 0), then remaining images (order: 3). This demonstrates how to create sophisticated content hierarchies that differ from markup order.

Optional Bonus: Cleaning up the Appearance

Professional implementations require clean, production-ready code. Let's remove our development aids and polish the final result.

1. Return to your code editor.
2. Remove the height property from the .gallery rule.
3. Remove the border property from the .gallery rule.

4. Save and refresh your browser.

   • In DevTools, click the grid button to hide the overlay.
   • You now have a clean, professional logo grid that demonstrates advanced CSS Grid capabilities while maintaining visual elegance.