Grid: Laying out an Article

Topics Covered in This Web Development Tutorial:

Using CSS Grid to Lay Out a Professional Article, Creating Full-Width Visual Elements, and Strategic Placement of Sidebar Content

Exercise Preview

Exercise Overview

In this comprehensive exercise, you'll master CSS Grid by creating a sophisticated article layout that adapts seamlessly across all screen sizes. This isn't just another responsive design tutorial—you'll build the kind of advanced layout that defines modern web publishing, complete with full-width hero images and contextual sidebar notes that would be nearly impossible to achieve elegantly without Grid's powerful capabilities.

By the end of this exercise, you'll have hands-on experience with grid template columns, strategic content placement, and responsive design patterns that are essential for today's web development landscape. These techniques form the foundation of layouts you see on major publications like Medium, The New York Times, and other leading digital platforms.

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 Grid Article folder located in Desktop > Class Files > yourname-Flexbox Grid Class. If you're using Visual Studio Code or another modern editor that supports folder-based workflows, open the entire folder to take advantage of integrated file management.

3. Open index.html from the Grid Article folder.

   • Take a moment to examine the semantic HTML structure: this page uses an article tag containing properly nested headings, paragraphs, figures, blockquotes, and aside elements—exactly the kind of markup that search engines and accessibility tools expect in 2026.

4. Preview index.html in Firefox (or your preferred modern browser).

   • Scroll through the content to understand what we're working with.
   • Notice how the current layout lacks visual hierarchy—our goal is to create a narrow, readable text column while allowing images and pull quotes to break out and command attention through strategic use of space.

5. Keep index.html open in your browser throughout this exercise—live reloading will help you see the immediate impact of each CSS change you make.

Now that you're familiar with the content structure, let's begin transforming this basic layout into a professional-grade article design.

Starting the Grid

We'll begin by establishing a mobile-first grid foundation—a single-column layout with appropriate spacing that serves as the base for our responsive design.

1. Switch back to your code editor.
2. Open main.css from the css folder (in the Grid Article folder).

3. Below the a:hover rule add the following bold code:

   article {
      display: grid;
      gap: 30px;
      grid-template-columns: 1fr;
   }

4. Save the file, and reload the page in Firefox.

   • With Grid now controlling our spacing through the gap property, we need to eliminate redundant paragraph margins that would create inconsistent vertical rhythm.
5. Switch back to your code editor.

6. Above the a rule add the following bold code:

   p {
      margin: 0;
   }

7. Save the file, and reload the page in Firefox.

   • The spacing now follows a consistent 30px rhythm—this creates the clean, professional appearance that distinguishes modern web typography.
   • Next, we'll create the multi-column desktop layout that will give us the flexibility to position different types of content strategically.
8. Switch back to your code editor.

9. In the min-width: 700px media query at the bottom of the file, below the h1 rule add the following new rule:

   article {
      grid-template-columns: 1fr 4fr 1fr;
   }

10. Save the file, and reload the page in Firefox.

    • Resize the window to ensure you're viewing the 3-column layout (make it wider than 700px).
    • Don't worry that the content appears scattered across all three columns—that's expected behavior that we'll correct in the next step with precise grid placement.
11. Switch back to your code editor.

12. In the min-width: 700px media query, below the article rule add the following new rule:

    article > * {
       grid-column: 2 / -2;
    }

13. Save the file, and reload the page in Firefox.

    • Excellent! This rule places all direct children of the article into the center column (column 2), creating the focused reading experience we want.
    • Test the responsiveness by resizing the window narrower—notice how the mobile layout maintains the content flush to the browser edges, which we'll address next.
14. Switch back to your code editor.

15. Above the min-width: 700px media query, add the following new media query:

    @media (max-width: 699px) {
       article > * {
          margin: 0 20px;
       }
    }

16. Save the file, and reload the page in Firefox.

    • Perfect—mobile screens now have essential breathing room.
    • However, our images are inheriting this 20px margin on small screens, and they also have browser default figure margins on large screens. Since we want images to span the full browser width on all devices, let's override these margins and implement our full-width strategy.

With our grid foundation solid, we can now tackle the more sophisticated aspect of this layout: strategic content placement that enhances the reading experience.

Placing the Content in the Grid

1. Switch back to your code editor.

2. Below the article rule (the one NOT in a media query) add the following bold code:

   article > figure {
      margin: 0;
      grid-column: 1 / -1;
   }

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

   • Resize the window from mobile to desktop width—notice how the images now break out of the text column to command full attention. This technique, popularized by premium publishing platforms, creates visual impact while maintaining reading flow.
   • Let's apply the same principle to our pull quotes, making them span the full width for maximum visual emphasis.
4. Switch back to your code editor.

5. In the article > blockquote rule, add the following bold code:

   article > blockquote {
       grid-column: 1 / -1;
       font-family: Vollkorn, serif;

   Code Omitted To Save Space

   }

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

   • The full-width quote creates a dramatic pause in the reading experience—exactly what we want.
   • However, on very wide screens, both the quote and main text can become uncomfortably wide, hurting readability. Let's implement optimal line lengths based on typography best practices.

Now we'll refine our layout with maximum widths that ensure optimal reading comfort across all screen sizes—a crucial consideration for user experience that many developers overlook.

Adding Max Widths for the Text

1. Switch back to your code editor.

2. Below the min-width: 700px media query, add the following new media query:

   @media (min-width: 950px) {
      article {
         grid-template-columns: 1fr 58ch 1fr;
      }
   }

   NOTE: 58ch means 58 characters wide—this follows typography research showing that 50-75 characters per line provides optimal reading speed and comprehension. The 'ch' unit, supported by all modern browsers in 2026, is perfect for controlling text measure.

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

   • Test across different window sizes—the text column now maintains professional readability standards while the sidebar columns provide space for our upcoming marginal content.
   • Our pull quotes still need width constraints to prevent them from becoming uncomfortably wide on large displays.
4. Switch back to your code editor.

5. Let's implement optimal quote width and centering. In the article > blockquote rule, add the following bold code:

   article > blockquote {
       grid-column: 1 / -1;
       max-width: 50ch;
       margin: auto;
       padding: 20px;
       font-family: Vollkorn, serif;

   NOTE: The auto margins center the blockquote horizontally when its content width is less than the available space—a reliable centering technique that works across all browsers.

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

   • The pull quotes now maintain readable line lengths while staying visually prominent.
   • Scroll to the area above the second photo—you'll see smaller text with a thin gray border that's currently in the main content flow. These aside elements (marked with classes of "left" or "right") represent contextual information that we want to move into the margins on larger screens, mimicking the sophisticated layouts found in academic journals and premium magazines.

The final step will transform our layout from good to exceptional by utilizing the sidebar space for contextual content—a advanced technique that showcases Grid's true power.

Putting Notes in the Margins on Large Screens

1. Switch back to your code editor.

2. In the min-width: 700px media query, below the article >* rule add the following new rule:

   article > aside.right {
      grid-column: span 1 / -1;
   }

   NOTE: This syntax tells the element to span 1 column width, ending at the last grid line (-1). This approach is more flexible than hard-coding column numbers and adapts better to grid changes.

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

   • Scroll to above the second photo—the Information about Hawaiian Shield Volcanoes aside now appears elegantly in the right margin, exactly where readers expect to find supplementary information.
   • The gray border currently stretches to match the height of adjacent content. For a cleaner appearance, let's align it to the natural height of its content.
4. Switch back to your code editor.

5. In the min-width: 700px media query's article > aside.right rule add the following bold code:

   article > aside.right {
      grid-column: span 1 / -1;
      align-self: start;
   }

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

   • Much cleaner—the border now wraps tightly around the content rather than stretching unnecessarily.
7. Switch back to your code editor.

8. In the min-width: 700px media query, below the article > aside.right rule add the following new rule:

   article > aside.left {
      grid-column: 1 / span 1;
      align-self: start;
   }

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

   • Scroll to the bottom to find the Learn more about Haleakalā and Hawaii Volcanoes National Parks aside—it's now positioned in the left column, but we need to refine its presentation to match the right-column aside.
10. Switch back to your code editor.

11. In the min-width: 700px media query's article > aside.left rule add the following bold code:

    article > aside.left {
       grid-column: 1 / span 1;
       align-self: start;
       text-align: right;
       border-left-width: 0;
       border-right-width: 1px;
    }

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

    • Perfect—the left aside now mirrors the right aside's design with appropriate text alignment and border placement.
    • On ultra-wide screens, these asides can become too wide, reducing their effectiveness as quick-reference content. Let's set optimal widths.

13. In the min-width: 700px media query, below the article >* rule add the following new rule:

    article > aside {
       max-width: 30ch;
    }

14. Save the file, and reload the page in Firefox.

    • The right aside looks excellent, but the left aside needs to be positioned on the right side of its column for proper visual balance.
15. Switch back to your code editor.

16. In the min-width: 700px media query's article > aside.left rule add the following bold code:

    article > aside.left {
       grid-column: 1 / span 1;
       align-self: start;
       justify-self: end;
       text-align: right;
       border-left-width: 0;
       border-right-width: 1px;
    }

17. Save the file, and reload the page in Firefox.

    • Excellent—both asides now have optimal positioning and sizing.
    • Take time to scroll through the entire article and appreciate the sophisticated layout you've created. Test it across multiple screen sizes to see how each breakpoint enhances the reading experience.
    • This layout demonstrates Grid's power to create publication-quality designs that would have required complex JavaScript or fragile positioning hacks in previous eras of web development.