NS
Guest Mode:

BCA Student Stories & UpdatesLive

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

CSS Grid System 1: Templates, Columns & Fractional Units

CSS Grid is a 2-dimensional layout engine designed for organizing content into precise rows and columns simultaneously, making complex multi-column layouts effortless.

Interactive Learning Roadmap

Day 16 Step-by-Step Practical Flow

🎯1. What You Will Learn Today

✔Understand the 2-dimensional CSS Grid layout model (rows AND columns simultaneously).
✔Use `display: grid` on container parents.
✔Master `grid-template-columns` with fractional units (`1fr`) and `repeat()` notation.
✔Control column and row spacing using `gap: 24px`.
Day 16 MasterclassCSS Layouts

CSS Grid System 1: Templates, Columns & Fractional Units — Comprehensive Practical Guide

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

Real-World Purpose Aur Zaroorat

CSS Grid is a 2-dimensional layout engine designed for organizing content into precise rows and columns simultaneously, making complex multi-column layouts effortless.

display: grid: Enables the 2D grid formatting context.
1fr (Fractional Unit): Represents a fraction of the available free space in the grid container.
grid-template-columns: repeat(3, 1fr) creates 3 equal-width responsive columns.
Unlike Flexbox (1-directional), Grid aligns items across both horizontal and vertical axes simultaneously.
Dimaag Mein Bithane Ka Model

"Flexbox is like stringing beads on a necklace (1D line). CSS Grid is like an Excel spreadsheet or graph paper with defined rows and columns (2D grid)."

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

👨‍🏫3. Teacher Demonstration Code

Equal 3-column dashboard using repeat(3, 1fr) and 20px gap.

3-Column Grid with Fractional Unitshtml
<style>
  .dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 24px;
    background: #000000;
  }
  .metric-card {
    background: #111827;
    color: #ffffff;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid #1f2937;
  }
</style>
<div class="dashboard-grid">
  <div class="metric-card"><h2>90 Days</h2><p>Sprint 1 Completed</p></div>
  <div class="metric-card"><h2>100%</h2><p>Viva Verified</p></div>
  <div class="metric-card"><h2>10 Stars</h2><p>GitHub Projects</p></div>
</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.

2 Coding Tasks
Interactive Coding TestAuto-Evaluates as you type

Day 16 Practical Task Test Studio

Test Score:0 / 2 Passed
1. Practical Task Specifications & Live Test Checklist:Type code below to pass tests
Task 1Activate Grid with repeat(3, 1fr)

Add `display: grid;` and `grid-template-columns: repeat(3, 1fr);` to .stats-grid.

⏳ WAITING
Task 2Add Grid Gap

Add `gap: 20px;` to .stats-grid.

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

Spot the Bug: Fixed Pixel Columns Overflowing on Mobile

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

Click any code line
⚠️ Broken Code Inspector
Tap buggy line
1
.container {
2
display: grid;
3
grid-template-columns: 400px 400px 400px; /* Total 1200px breaks on mobile screens! */
4
}
Stuck? Need a detective clue before checking the solution?

Senior Developer Forensic Analysis:

Using fixed pixel widths prevents columns from shrinking to fit smaller screens. Fractional units (1fr) scale dynamically to container bounds.

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

📝Independent Practice: Assignment

📄 project-gallery.html

Homework Task: Student Portfolio Project Gallery

  • •Create folder `day-16` with `index.html`.
  • •Create a 6-item project showcase gallery.
  • •Use `display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;`.
  • •Style each project card with title, tech stack badge, and a GitHub view button.
Submission Evaluation Criteria: Inspect grid track lines in Chrome DevTools Grid Inspector overlay.
Exact Assignment Solution Code: project-gallery.html

Open Visual Studio Code on your PC (code .), create project-gallery.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 16 - CSS Grid Project Gallery</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Segoe UI', Tahoma, sans-serif;
      background: #0b1120;
      color: white;
      padding: 32px 16px;
    }
    .wrapper { max-width: 1040px; margin: 0 auto; }
    h1 { font-size: 24px; color: #38bdf8; margin-bottom: 8px; text-align: center; }
    p.lead { color: #94a3b8; font-size: 14px; text-align: center; margin-bottom: 32px; }

    /* 6-Item CSS Grid with repeat(auto-fit, minmax(280px, 1fr)) */
    .grid-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 24px;
    }

    .project-card {
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 14px;
      padding: 24px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      transition: transform 0.2s ease, border-color 0.2s ease;
    }
    .project-card:hover {
      transform: translateY(-4px);
      border-color: #38bdf8;
    }

    .day-badge {
      font-size: 11px;
      font-weight: 800;
      color: #38bdf8;
      margin-bottom: 8px;
    }
    .project-card h3 { font-size: 16px; margin-bottom: 8px; }
    .project-card p { font-size: 13px; color: #94a3b8; line-height: 1.5; margin-bottom: 16px; }

    .tag-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 18px;
    }
    .tag {
      font-size: 10px;
      background: #0f172a;
      border: 1px solid #334155;
      color: #cbd5e1;
      padding: 2px 8px;
      border-radius: 4px;
    }

    .btn-github {
      padding: 8px 14px;
      background: #2563eb;
      color: white;
      text-decoration: none;
      border-radius: 8px;
      font-size: 12px;
      font-weight: bold;
      text-align: center;
    }
    .btn-github:hover { background: #1d4ed8; }
  </style>
</head>
<body>
  <div class="wrapper">
    <h1>BCA Semester 1 Practical Project Showcase</h1>
    <p class="lead">Built using responsive CSS Grid with auto-fit fractional columns.</p>

    <div class="grid-gallery">
      <div class="project-card">
        <div>
          <div class="day-badge">DAY 01 • HTML SETUP</div>
          <h3>Student Launch Webpage</h3>
          <p>Initial HTML5 boilerplate with semantic structure and browser verification.</p>
          <div class="tag-row"><span class="tag">HTML5</span><span class="tag">VSCode</span></div>
        </div>
        <a href="https://github.com" class="btn-github">View GitHub Repository</a>
      </div>

      <div class="project-card">
        <div>
          <div class="day-badge">DAY 04 • LISTS & TABLES</div>
          <h3>Syllabus Matrix Portal</h3>
          <p>Structured table formatting with rowspan, colspan, and accessibility captions.</p>
          <div class="tag-row"><span class="tag">HTML Tables</span><span class="tag">Matrix</span></div>
        </div>
        <a href="https://github.com" class="btn-github">View GitHub Repository</a>
      </div>

      <div class="project-card">
        <div>
          <div class="day-badge">DAY 05 • FORMS</div>
          <h3>Job Application Portal</h3>
          <p>Client-side form validation with regex pattern matching and semantic fieldsets.</p>
          <div class="tag-row"><span class="tag">Forms</span><span class="tag">Validation</span></div>
        </div>
        <a href="https://github.com" class="btn-github">View GitHub Repository</a>
      </div>

      <div class="project-card">
        <div>
          <div class="day-badge">DAY 06 • SEMANTICS</div>
          <h3>College Campus Portal</h3>
          <p>Clean semantic architecture with header, nav, main, article, aside, and footer.</p>
          <div class="tag-row"><span class="tag">Semantics</span><span class="tag">SEO</span></div>
        </div>
        <a href="https://github.com" class="btn-github">View GitHub Repository</a>
      </div>

      <div class="project-card">
        <div>
          <div class="day-badge">DAY 09 • SELECTORS</div>
          <h3>Component Library</h3>
          <p>Modular button variants (.btn-success, .btn-danger) with hover states.</p>
          <div class="tag-row"><span class="tag">CSS Selectors</span><span class="tag">DRY</span></div>
        </div>
        <a href="https://github.com" class="btn-github">View GitHub Repository</a>
      </div>

      <div class="project-card">
        <div>
          <div class="day-badge">DAY 15 • FLEXBOX</div>
          <h3>Responsive Course Deck</h3>
          <p>Equal height pricing and curriculum cards with flex-wrap and alignment.</p>
          <div class="tag-row"><span class="tag">Flexbox</span><span class="tag">Layouts</span></div>
        </div>
        <a href="https://github.com" class="btn-github">View GitHub Repository</a>
      </div>
    </div>
  </div>
</body>
</html>
Verified Assignment Code Solution (100% Tested & Ready to Run)

🎓4. Viva Check: Mandatory Conceptual Test

What does 1fr mean in CSS Grid?

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

Target Repo: html-css-projects

Windows 11 Terminal / VS Code
1$
mkdir day-16
Create a new project folder (day-16)
2$
cd day-16
Change working directory to day-16
3$
git add .
Stage all modified files and new assets for commit
4$
git commit -m "Day 16: CSS Grid 2D layout, repeat syntax and fractional fr units"
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 16 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-16/ or bca-day-16/
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 16
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 16
4$
mkdir day-16
Create a new project folder (day-16)
5$
cd day-16
Change working directory to day-16
6$
# 3. Create your code file: index.html
7$
# (Write your Day 16 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 16: CSS Grid System 1: Templates, Columns & Fractional Units"
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-16/ 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/✨ CREATE THIS FOLDER FOR TODAY (Day 16)
└──index.htmlMust contain: display: grid, grid-template-columns, repeat(3, 1fr), gap
Sequential Progression Enforced

You are welcome to read all notes, inspect code snippets, and practice all exercises of Day 16 freely! To officially submit your GitHub repository and unlock subsequent days in your portfolio, please complete Day 15: Flexbox Architecture 2: Align-Items, Flex-Wrap & Responsive Cards first.

Complete Day 15 First
Day 15: Flexbox Architecture 2: Align-Items, Flex-Wrap & Responsive Cards
WhatsApp
Curriculum & Practical Systems Authored by Er. Manoj Kumar
NextSem Academy • BCA Practical Learning Portal