Project 2: Blog Layout using CSS Grid

Think of your school's printed annual magazine or a national Indian science journal (Vigyan Patrika). On page 1, there isn't just a boring single list of paragraphs. Instead, you see a masterfully composed two-dimensional editorial spread: a large, striking Featured Article commanding the top-left, a pair of secondary stories stacked on the right, and an editorial sidebar with author notes running down the side.

While Flexbox is the undisputed champion of one-dimensional distribution (laying out items along a single row or column), CSS Grid is the ultimate power tool for two-dimensional magazine layouts. In this project, we will build a responsive, modern Educational Science Journal Blog Layout purely using CSS Grid.

1. Editorial Magazine Wireframe and Grid Architecture

Here is the architectural blueprint for our science journal magazine page:

+-------------------------------------------------------------------------+
|                  DESKTOP EDITORIAL GRID (min-width: 992px)              |
+-------------------------------------------------------------------------+

  [HEADER] The Indian Science & Tech Chronicle (School Edition)
  +-----------------------------------------------------------------------+

  [MAIN GRID CONTAINER: 3 Columns (2fr 1fr 1fr) or Template Areas]
  +-----------------------------------+-----------------+-----------------+
  | FEATURED HERO ARTICLE             | SECONDARY #1    | SIDEBAR         |
  | (grid-column: span 2;             |                 | (grid-row: 1/4; |
  |  grid-row: span 2;)               +-----------------+  sticky top)    |
  |                                   | SECONDARY #2    |                 |
  |  - Full bleed thumbnail           |                 |  - Editor Note  |
  |  - Category Tag (ISRO Mission)    +-----------------+  - Trending Tags|
  |  - Lead Title & Summary           | SECONDARY #3    |  - Newsletter   |
  |                                   |                 |                 |
  +-----------------------------------+-----------------+-----------------+

  [RECENT DISPATCHES: repeat(auto-fill, minmax(280px, 1fr))]
  +---------------------+ +---------------------+ +---------------------+
  | Article Card 1      | | Article Card 2      | | Article Card 3      |
  +---------------------+ +---------------------+ +---------------------+

+-------------------------------------------------------------------------+
|                  MOBILE RESPONSIVE COLLAPSE (max-width: 767px)          |
+-------------------------------------------------------------------------+

  - Every article reverts to a natural single-column stream (1fr).
  - Featured article spans 1 column.
  - Sidebar moves below the primary articles feed.

2. Key CSS Grid Techniques Showcased

1. 1
   Cell Spanning with grid-column and grid-row: Making the lead article twice as wide and twice as tall as ordinary story cards.
2. 2
   Fractional Units & Gaps: Combining grid-template-columns: 2fr 1fr 1fr with gap: 24px for mathematical layout precision without margin hacks.
3. 3
   Sticky Editorial Sidebar: Using position: sticky; top: 24px inside a grid column so the editor's widget remains visible as readers scroll.
4. 4
   Auto-Responsive Recent Posts Grid: Using grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) to render subsequent cards without needing individual media queries.
5. 5
   Overlay Card Art: Using CSS Grid inside the featured card itself to overlay high-contrast title typography directly onto dark gradient image covers.

3. Step-by-Step Layout Construction

Step 1: The Multi-Column Editorial Showcase

On desktop screens, our magazine hero section is divided into 3 distinct column tracks:

• Track 1 & 2 (span 2): The grand featured story.
• Track 3: Secondary quick-read stories.
• Track 4 / Beside: The sticky author and category sidebar.

Step 2: Spanning the Featured Lead Card

We instruct the .featured-post element to span 2 rows vertically so it balances nicely against multiple secondary cards stacked beside it:

Step 3: Sticky Editorial Aside

Inside a CSS Grid container, grid items do not collapse when scrolled if their track height accommodates them. By setting align-self: start and position: sticky, our sidebar glides alongside long article content:

Step 4: Responsive Breakpoint Strategy

At tablet widths (max-width: 991px), the sidebar drops below the stories. At mobile widths (max-width: 640px), all spanning rules reset to single-column streams:

4. Complete, Runnable Project Code

Here is the complete, self-contained HTML and CSS code. Save it as blog.html and preview it in your browser:

5. Do's and Don'ts

6. Quick Revision Summary Cheat Sheet

• Two-Dimensional Power: CSS Grid controls both rows and columns simultaneously, making complex magazine layouts simple.
• grid-column: span X / grid-row: span Y: Expands an editorial card across multiple tracks.
• Sticky Column: Set position: sticky; top: ...; and align-self: start; on the sidebar card to make it glide smoothly as the user reads.
• Auto-Fill Responsive Grid: repeat(auto-fill, minmax(280px, 1fr)) creates a self-adapting responsive grid without writing separate media queries.

Multiple Choice Questions

1. In CSS Grid, how do you configure a featured card to span across 2 rows vertically?

A. row-span: 2; B. grid-row: span 2; C. flex-direction: vertical; D. grid-template-rows: double; Answer: B Explanation: grid-row: span 2; (or grid-row: 1 / 3;) instructs the browser to stretch the element across two row tracks in the grid container.

2. Why is align-self: start beneficial when applying position: sticky to a grid sidebar?

A. It changes the sidebar font color to black B. It prevents the sidebar from stretching to the full height of the row, enabling it to float and stick cleanly within the remaining space C. It moves the sidebar to the top of the HTML DOM D. It hides the sidebar on mobile browsers Answer: B Explanation: By default, grid items stretch to fill the entire row track (align-self: stretch). Setting align-self: start keeps the element at its natural content height so position: sticky has room to scroll.

3. What does grid-template-columns: 2fr 1.2fr 1fr; accomplish in our magazine layout?

A. It creates 3 equal columns of 100px each B. It creates 3 columns where column 1 receives twice the available remaining space of column 3, and column 2 receives 1.2 times C. It divides the screen into 3 rows D. It rotates the layout by 90 degrees Answer: B Explanation: The fr (fractional) unit allocates portions of available free space. The total shares are 2 + 1.2 + 1 = 4.2fr, distributing space proportionally.

4. Which CSS Grid rule automatically creates as many 280px columns as will fit on any screen without media queries?

A. grid-template-columns: 280px 280px 280px; B. grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); C. display: flex; flex-direction: row; D. grid-columns: automatic-fit; Answer: B Explanation: repeat(auto-fill, minmax(280px, 1fr)) dynamically fits as many 280px tracks as the viewport permits, expanding them proportionally to fill remaining space.

5. On mobile screens (max-width: 720px), what is the best way to collapse a 3-column grid into a single readable column?

A. Set display: none on columns 2 and 3 B. Set grid-template-columns: 1fr; on the container and reset item spans to grid-column: 1 / -1; C. Float all elements to the left D. Decrease the font size to 6px Answer: B Explanation: Defining grid-template-columns: 1fr transforms the grid into a single full-width column, allowing all stories to stack cleanly down the screen.

Hands-on Practice Challenge

Add an interactive "Trending Authors" gallery beneath the sidebar that uses an internal 2-column micro-grid.

Requirements:

1. 1
   Inside the sidebar, create an author widget titled "Contributing Mentors".
2. 2
   Use an internal CSS Grid with grid-template-columns: 48px 1fr; and gap: 12px; for each mentor row.
3. 3
   Place a circular avatar photo on the left track and author name with article count on the right track.
4. 4
   Add a subtle hover background highlight when hovering over an author.

Complete Solution: