NS
Guest Mode:

BCA Student Stories & UpdatesLive

Live GitHub Pages
You
Your StorySign in & share
Er. Manoj Kumar
D5
Er. ManojActive nowPages
Day 17CSS Layouts2 Hours Practical
Push to GitHub to Complete

CSS Grid System 2: Spanning & Newspaper Magazine Layout

Grid items do not have to be uniform squares. Using column and row spanning, individual grid items can stretch across multiple tracks to create captivating editorial designs.

Interactive Learning Roadmap

Day 17 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Master track spanning using `grid-column: span 2` and `grid-row: span 2`.
✔Build asymmetrical hero grids with featured large articles.
✔Understand grid line numbering (line 1, line 2, line -1).
✔Create a classic newspaper / tech magazine editorial layout.
Day 17 MasterclassCSS Layouts

CSS Grid System 2: Spanning & Newspaper Magazine Layout — Comprehensive Practical Guide

Har concept ko visual mental models, code anatomy aur practical industry tips ke sath samjhein.

Real-World Purpose Aur Zaroorat

Grid items do not have to be uniform squares. Using column and row spanning, individual grid items can stretch across multiple tracks to create captivating editorial designs.

grid-column: span 2: Makes the item occupy 2 horizontal column tracks.
grid-row: span 2: Makes the item stretch across 2 vertical row tracks.
grid-column: 1 / -1: Spans full width from first grid line to the very last.
Asymmetric grid layouts draw visual attention to lead stories or primary calls to action.
Dimaag Mein Bithane Ka Model

"Look at the front page of a newspaper: The lead headline spans across 4 columns, while smaller side stories occupy single columns."

💡 Pro Tip: Code ko ratta mat maaro; imagine karo ki browser har tag ko visually kaise draw karta hai.

👨‍🏫3. Teacher Demonstration Code

First item spans 2 columns to dominate visual hierarchy.

Magazine Editorial Grid with Featured Hero Itemhtml
<style>
  .magazine-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
  .featured-story {
    grid-column: span 2;
    background: #000000;
    color: #ffffff;
    padding: 30px;
    border-radius: 16px;
  }
  .side-story {
    background: #f8fafc;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
  }
</style>
<div class="magazine-grid">
  <article class="featured-story">
    <h2>Lead Story: Artificial Intelligence in BCA</h2>
    <p>How modern full-stack students build production systems.</p>
  </article>
  <article class="side-story">
    <h3>Linux CLI</h3>
    <p>Essential bash scripts.</p>
  </article>
</div>

2. Hands-On Practical Lab: Follow Instructions in VS Code

Code like a professional software engineer! Follow the step-by-step instructions below in Visual Studio Code (VS Code) on your PC, test your output locally, and push to GitHub.

1 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 17 Practical Task Test Studio

Test Score:1 / 1 Passed
100% Correct • All Practical Tasks Passed!
Advancing to Day 18: Responsive Design & Media Queries: Mobile-First Strategy in 2s...
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Span 2 Columns on Hero Card

Add `grid-column: span 2;` to .hero-card.

✔ PASSED
2. Type HTML & CSS Code:index.html
index.html
⚡ Real-Time Testing Active
Tab inserts 2 spaces • Live DOM refresh498 chars
Live Browser Output:
🔒 http://localhost:5500/index.html
Live
Renders live HTML & CSS typed on the left.
Interactive Bug Detective

Spot the Bug: Column Span Exceeding Total Grid Tracks

Tap or click on the exact line below that contains the error:

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
.grid-wrapper {
2
display: grid;
3
grid-template-columns: repeat(2, 1fr); /* Container only has 2 columns! */
4
}
5
.banner {
6
grid-column: span 4; /* Spanning 4 columns on a 2-column grid creates empty ghost tracks */
7
}
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Spanning more columns than defined in grid-template-columns forces the browser into implicit grid creation, breaking the intended layout.

Golden Rule: Always validate code syntax and security attributes before pushing to GitHub!

📝Independent Practice: Assignment

📄 magazine-layout.html

Homework Task: Tech News Editorial Dashboard

  • •Create folder `day-17` with `index.html`.
  • •Build a 4-column news magazine layout.
  • •Lead story: Spans 2 columns and 2 rows (`grid-column: span 2; grid-row: span 2;`).
  • •Add 4 regular news cards filling the remaining grid slots.
  • •Add a full-width footer spanning all 4 columns (`grid-column: 1 / -1;`).
Submission Evaluation Criteria: Inspect in Chrome DevTools to verify exact grid line coordinates.
Exact Assignment Solution Code: magazine-layout.html

Open Visual Studio Code on your PC (code .), create magazine-layout.html, paste this complete step-by-step verified code, test in your browser, and push to your GitHub repo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BCA Day 17 - CSS Grid Newspaper Magazine Layout</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #0f172a;
      color: white;
      padding: 32px 16px;
    }
    .magazine-container {
      max-width: 1080px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    /* Lead Story spans 2 columns and 2 rows */
    .lead-story {
      grid-column: span 2;
      grid-row: span 2;
      background: #1e293b;
      border: 1px solid #3b82f6;
      border-radius: 16px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .lead-story h2 { font-size: 26px; color: #38bdf8; margin: 12px 0; }
    .lead-story p { color: #cbd5e1; font-size: 15px; line-height: 1.6; }

    /* Regular News Cards */
    .news-card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 20px;
    }
    .news-card h3 { font-size: 15px; color: white; margin-bottom: 8px; }
    .news-card p { font-size: 12px; color: #94a3b8; line-height: 1.5; }

    /* Footer spans full width (all 4 columns) */
    .magazine-footer {
      grid-column: 1 / -1;
      background: #0f172a;
      border-top: 1px solid #334155;
      padding: 20px 0;
      text-align: center;
      font-size: 13px;
      color: #64748b;
    }
    .badge {
      display: inline-block;
      padding: 3px 8px;
      border-radius: 4px;
      background: #2563eb;
      font-size: 10px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <div class="magazine-container">
    <article class="lead-story">
      <div>
        <span class="badge">BREAKING • TECH</span>
        <h2>NextSem Launches 360-Day BCA Practical Curriculum</h2>
        <p>A ground-breaking interactive engineering curriculum allowing students to study on their mobile phone while simultaneously building verified software in Visual Studio Code on their PC.</p>
      </div>
      <div style="font-size: 12px; color: #64748b; margin-top: 20px;">By Er. Manoj Kumar • 5 min read</div>
    </article>

    <article class="news-card">
      <span class="badge" style="background: #10b981;">CLOUD</span>
      <h3>Firebase Hosting Deployed</h3>
      <p>Instant static assets delivered through global CDN endpoints with 0ms hydration.</p>
    </article>

    <article class="news-card">
      <span class="badge" style="background: #7c3aed;">GITHUB</span>
      <h3>CI/CD Pipeline Verification</h3>
      <p>Automated repository checks verify student code pushes line-by-line.</p>
    </article>

    <article class="news-card">
      <span class="badge" style="background: #f59e0b;">UI/UX</span>
      <h3>CSS Grid 2 Spanning Rules</h3>
      <p>Mastering grid-column: span 2 and grid-row: span 2 for responsive dashboards.</p>
    </article>

    <article class="news-card">
      <span class="badge" style="background: #ef4444;">VIVA</span>
      <h3>100% Viva Voce Pass Rate</h3>
      <p>All active students scored 100% on their Day 17 technical inspection questions.</p>
    </article>

    <footer class="magazine-footer">
      NextSem BCA Computer Science Gazette • All 4 Columns Spanned via grid-column: 1 / -1
    </footer>
  </div>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What does `grid-column: 1 / -1` accomplish on a CSS Grid item?

5. Mandatory Step: Push to GitHub to Unlock Next Lesson

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-17
Create a new project folder (day-17)
2$
cd day-17
Change working directory to day-17
3$
git add .
Stage all modified files and new assets for commit
4$
git commit -m "Day 17: CSS Grid spanning, asymmetric editorial layouts and line indexing"
Commit staged changes with a descriptive message
5$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
Completion Prerequisites VerificationIncomplete Steps
Google Login
✔ Required
VS Code Implementation
Step 4 Viva Check
Own GitHub Project
Required

Exact GitHub Setup Guide & Expected Structure

Day 17 Requirements

Follow these exact folder and file names to prevent verification errors.

1. GitHub Repository
html-css-projects
Must be set to Public
2. Exact FolderNEW
day-17/ or bca-day-17/
Create inside repo root
3. Exact File NameREQUIRED
index.html
⚠️ No spaces or custom names
4. What to Submit Below
https://github.com/YOU/html-css-projects
Or direct link to index.html
Terminal Commands to Create & Push Day 17
1$
# 1. Enter your repository directory
2$
cd html-css-projects
Change working directory to html-css-projects
3$
# 2. Create the exact folder for Day 17
4$
mkdir day-17
Create a new project folder (day-17)
5$
cd day-17
Change working directory to day-17
6$
# 3. Create your code file: index.html
7$
# (Write your Day 17 homework code inside index.html)
8$
# 4. Save, stage, commit and push to GitHub:
9$
git add .
Stage all modified files and new assets for commit
10$
git commit -m "Day 17: CSS Grid System 2: Spanning & Newspaper Magazine Layout"
Commit staged changes with a descriptive message
11$
git push origin main
Push local commits directly to your remote GitHub repository
⌨️ Paste into terminal:Ctrl + V✨ Word wrap active (no horizontal cutoff)
How to Avoid "Could not find your practical code file" Errors:
1.Use Lowercase index.html: Avoid spaces or custom names like Alan Turing..html or Index.HTML. Linux/GitHub servers are strictly case-sensitive.
2.Separate Day Folders: Create a new folder day-17/ for today so you don't overwrite previous days.
3.Ensure Public Visibility: If your GitHub repo is Private, automated validation cannot inspect your code. Set it to Public.
4.Check on GitHub Website: Before clicking "Verify", open your repo in Google Chrome to confirm your files were pushed to branch main.
📁 github.com/YOUR_USERNAME/html-css-projects
Branch: main
README.md# BCA Practical Portfolio overview
day-01/Day 1 Prior Lesson
└──index.html
day-02/Day 2 Prior Lesson
└──index.html
day-03/Day 3 Prior Lesson
└──index.html
day-04/Day 4 Prior Lesson
└──index.html
day-05/Day 5 Prior Lesson
└──index.html
day-06/Day 6 Prior Lesson
└──index.html
day-07/Day 7 Prior Lesson
└──index.html
day-08/Day 8 Prior Lesson
└──index.html
day-09/Day 9 Prior Lesson
└──index.html
day-10/Day 10 Prior Lesson
└──index.html
└──styles.css
day-11/Day 11 Prior Lesson
└──index.html
day-12/Day 12 Prior Lesson
└──index.html
day-13/Day 13 Prior Lesson
└──index.html
day-14/Day 14 Prior Lesson
└──index.html
day-15/Day 15 Prior Lesson
└──index.html
day-16/Day 16 Prior Lesson
└──index.html
day-17/✨ CREATE THIS FOLDER FOR TODAY (Day 17)
└──index.htmlMust contain: grid-column: span 2, grid-row: span 2, grid-template-areas, grid-area
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 17 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 16: CSS Grid System 1: Templates, Columns & Fractional Units first.

Complete Day 16 First
Day 16: CSS Grid System 1: Templates, Columns & Fractional Units
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal