Building Modern Page Layouts with CSS Grid: The Full Application Dashboard0%

Min-Width and Max-Width Media Queries: Modern Range Syntax and Logic

Building Modern Page Layouts with CSS Grid: The Full Application Dashboard

Intermediate14 min read•Updated: 2026-09-10

Study Materials Cheatsheet

Building Modern Page Layouts with CSS Grid: The Full Application Dashboard

Picture the central administrative office of a modern school or university. On the wall is a massive digital dashboard:

Across the top: The School Header & Session Ticker ("Session 2026-27 • Term 1").
On the left: The Navigation Command Sidebar ("Students", "Attendance", "Fee Counter", "Examinations").
In the center: The Analytics Deck (Total Enrolled Students, Teacher-to-Student Ratio, Fee Collection Meter).
On the right: The Live Activity Log (Bus route alerts, today's student birthdays, circular drafts).

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE SCHOOL ADMIN ERP DASHBOARD BLUEPRINT               |
|                                                                         |
|  +-------------------------------------------------------------------+  |
|  | [🏫 DPS Admin ERP]                [Search]     [Principal Profile] |  | < Header (60px)
|  +-------------------------------------------------------------------+  |
|  | [Sidebar] | [ Metric 1 ] [ Metric 2 ] [ Metric 3 ] | [Calendar]   |  |
|  | (240px)   |----------------------------------------| (220px)      |  |
|  |           |                                        |              |  |
|  | Classes   |       Recent Student Admissions        | Daily        |  |
|  | Exams     |       Data Table with CSS Grid         | Birthdays    |  |
|  | Fees      |                                        |              |  |
|  | Transport |                                        | Bus Alerts   |  |
|  +-------------------------------------------------------------------+  |
|  |                            Footer Bar                             |  | < Footer (40px)
|  +-------------------------------------------------------------------+  |
+-------------------------------------------------------------------------+

Before CSS Grid, building this kind of multi-column enterprise dashboard required messy nested floats, absolute positioning hacks, and hundreds of lines of brittle JavaScript. With modern CSS Grid, you can construct this robust, scalable application architecture in clean, maintainable code.

In this capstone tutorial for CSS Grid, you will combine grid-template-areas, minmax(), and nested Flexbox to build a complete school management dashboard.

1. Macro Layout: The Parent Grid Blueprint

The top-level page wrapper establishes the main structural skeleton:

admin-dashboard {
display: grid;
/* Columns: Fixed Sidebar (240px), Fluid Center (1fr), Right Panel (240px) */
grid-template-columns: 240px 1fr 240px;
/* Rows: Sticky Header (64px), Main Workspace (1fr), Footer (44px) */
grid-template-rows: 64px 1fr 44px;
/* Visual Named Areas */
grid-template-areas:
  "header  header  header"
  "sidebar main    panel"
  "footer  footer  footer";
min-height: 100vh;
gap: 16px;
background-color: #0f172a;
color: #f8fafc;
16}

2. Micro Layout: The Metrics Deck (Grid Inside Grid)

Inside the main workspace area, we need a 3-card analytics deck. Rather than hardcoding fixed columns, we use the Holy Grail formula so the metric cards wrap smoothly:

metrics-deck {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
6}
7 
metric-card {
background-color: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
padding: 20px;
display: flex; /* Nested Flexbox inside the Grid Item! */
justify-content: space-between;
align-items: center;
16}

The Hybrid Architecture: Notice how the macro page is arranged using CSS Grid, while the micro metric card (number on left, icon on right) is arranged using Flexbox! This is the exact pattern used in professional software engineering.

3. Responsive Collapse: The Mobile Transformation

On mobile viewports (<= 900px), our 3-column dashboard folds into a streamlined, touch-friendly single column:

1@media (max-width: 900px) {
.admin-dashboard {
  grid-template-columns: 1fr; /* Single column */
  grid-template-rows: auto;
  grid-template-areas:
    "header"
    "main"
    "panel"
    "sidebar"
    "footer";
}
12 
/* Optional: Hide auxiliary sidebars on compact view */
.dashboard-sidebar,
.activity-panel {
  display: none;
}
18}

4. Common Mistakes to Avoid (Do's and Don'ts)

Bad Practice (Don't)	Good Practice (Do)	Why?
Trying to build the entire dashboard using only Flexbox	Use CSS Grid for the 2D page skeleton, Flexbox for micro-widgets	Grid manages columns and rows simultaneously with zero wrapping glitches.
Forgetting `min-height: 100vh` on the full page wrapper	Set `min-height: 100vh;` on `.admin-dashboard`	Prevents the page from shrinking awkwardly if content is short.
Setting hardcoded heights on the `main` content area	Let row heights be `1fr` or `auto`	Prevents content tables from clipping or spilling out of bounds.
Hardcoding `margin-left: 240px` to offset the sidebar	Let `grid-template-columns: 240px 1fr` handle tracks naturally	Margin offsets are a legacy hack; CSS Grid tracks are mathematically isolated.

5. Quick Revision Summary (Cheat Sheet)

Macro vs Micro: Use CSS Grid for the master 2D page layout (Header, Sidebars, Main, Footer), and Flexbox for the 1D UI elements inside each card.
Master Template: grid-template-columns: 240px 1fr 240px; creates a stable three-column application skeleton.
Fluid Workspace: Using 1fr for the central column allows tables and data charts to expand to fit any widescreen monitor.
Auto-Fit Metrics: Use repeat(auto-fit, minmax(200px, 1fr)) inside the workspace for auto-wrapping KPI metric cards.
Single Column Mobile: Redefining grid-template-areas inside @media stacks the application cleanly without altering the HTML structure.

Interactive Quiz• Knowledge Check

Multiple Choice Questions

Question 1

What is the recommended architectural relationship between CSS Grid and Flexbox in modern web design?

Question 2

In an admin dashboard layout, why is 1fr preferred for the main content area between two fixed 240px sidebars?

Question 3

What does setting min-height: 100vh; on a dashboard grid container prevent?

Question 4

How can the order of dashboard sections be reshuffled on mobile devices without modifying HTML code?

Question 5

Why is overflow: hidden; or minmax(0, 1fr) often used on dashboard grid tracks containing wide data tables?

6. Hands-on Practice Challenge: The Complete DPS Admin ERP Portal

Build a complete, production-grade School Administrative Portal:

1
Master Grid scaffolding: Sticky Header (60px), Left Nav (220px), Main Workspace (1fr), Right Activity Log (240px), and Footer (40px).
2
Inside the main area, construct a 3-card KPI Metrics Deck using auto-fit and nested Flexbox.
3
Include an admissions recent registrations data table with clean zebra striping and status pills!

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>DPS Central Admin ERP - CSS Grid Page</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
12 
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #090d16;
    color: #f1f5f9;
    min-height: 100vh;
  }
19 
  /* 1. MASTER 2D GRID SCAFFOLDING */
  .dashboard-grid {
    display: grid;
    grid-template-columns: 220px 1fr 240px;
    grid-template-rows: 60px 1fr 40px;
    grid-template-areas:
      "header  header  header"
      "sidebar main    activity"
      "footer  footer  footer";
    min-height: 100vh;
    gap: 12px;
    padding: 12px;
  }
33 
  /* HEADER */
  .dash-header {
    grid-area: header;
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
45 
  .brand-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #38bdf8;
  }
51 
  /* SIDEBAR */
  .dash-sidebar {
    grid-area: sidebar;
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;
  }
60 
  .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
67 
  .nav-list li a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    display: block;
    transition: all 0.2s;
  }
78 
  .nav-list li a:hover,
  .nav-list li a.active {
    background-color: #2563eb;
    color: #ffffff;
  }
84 
  /* MAIN CONTENT */
  .dash-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: auto;
  }
93 
  /* 2. AUTO-FIT METRICS DECK */
  .metrics-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
100 
  .metric-card {
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
110 
  .metric-val {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 4px;
  }
117 
  .metric-lbl {
    font-size: 0.8rem;
    color: #94a3b8;
  }
122 
  .metric-icon {
    font-size: 1.8rem;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
  }
129 
  /* DATA TABLE CONTAINER */
  .table-container {
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 20px;
    flex: 1;
  }
138 
  .table-container h3 {
    font-size: 1.1rem;
    margin-bottom: 14px;
    color: #38bdf8;
  }
144 
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }
150 
  th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #1e293b;
  }
156 
  th {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
  }
163 
  .status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 9999px;
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
  }
172 
  /* RIGHT ACTIVITY PANEL */
  .dash-activity {
    grid-area: activity;
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;
  }
181 
  .activity-item {
    font-size: 0.85rem;
    color: #cbd5e1;
    padding: 10px 0;
    border-bottom: 1px solid #1e293b;
  }
188 
  /* FOOTER */
  .dash-footer {
    grid-area: footer;
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    color: #64748b;
  }
201 
  /* 3. MOBILE RESPONSIVE COLLAPSE */
  @media (max-width: 900px) {
    .dashboard-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        "header"
        "main"
        "activity"
        "sidebar"
        "footer";
    }
214 
    .dash-activity,
    .dash-sidebar {
      display: none; /* Streamlined mobile view */
    }
  }
</style>
221</head>
222<body>
223 
<div class="dashboard-grid">
  
  <!-- Header -->
  <header class="dash-header">
    <div class="brand-title">DPS Central ERP Platform</div>
    <div style="font-size: 0.85rem; color: #94a3b8;">Principal: Dr. S. N. Mukherjee</div>
  </header>
231 
  <!-- Sidebar -->
  <aside class="dash-sidebar">
    <ul class="nav-list">
      <li><a href="#" class="active">Overview Deck</a></li>
      <li><a href="#">Student Records</a></li>
      <li><a href="#">Faculty Rosters</a></li>
      <li><a href="#">Fee Accounts</a></li>
      <li><a href="#">Examinations</a></li>
      <li><a href="#">Transport Fleet</a></li>
    </ul>
  </aside>
243 
  <!-- Main Workspace -->
  <main class="dash-main">
    <!-- 3-Card Metrics Deck -->
    <div class="metrics-deck">
      <div class="metric-card">
        <div>
          <div class="metric-lbl">Total Students</div>
          <div class="metric-val">2,480</div>
        </div>
        <div class="metric-icon">🎓</div>
      </div>
255 
      <div class="metric-card">
        <div>
          <div class="metric-lbl">Faculty Staff</div>
          <div class="metric-val">142</div>
        </div>
        <div class="metric-icon">👩‍🏫</div>
      </div>
263 
      <div class="metric-card">
        <div>
          <div class="metric-lbl">Attendance Rate</div>
          <div class="metric-val">96.4%</div>
        </div>
        <div class="metric-icon">📈</div>
      </div>
    </div>
272 
    <!-- Admissions Table -->
    <div class="table-container">
      <h3>Recent Class 11 Admissions (Science Stream)</h3>
      <table>
        <thead>
          <tr>
            <th>App ID</th>
            <th>Student Name</th>
            <th>Previous School</th>
            <th>10th Grade</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>#ADM-2026-01</td>
            <td>Aryavart Dixit</td>
            <td>St. Xavier's High School</td>
            <td>95.4%</td>
            <td><span class="status-badge">Confirmed</span></td>
          </tr>
          <tr>
            <td>#ADM-2026-02</td>
            <td>Kavya Rathi</td>
            <td>Modern Vidya Niketan</td>
            <td>92.8%</td>
            <td><span class="status-badge">Confirmed</span></td>
          </tr>
          <tr>
            <td>#ADM-2026-03</td>
            <td>Pranav Chawla</td>
            <td>Army Public School</td>
            <td>94.2%</td>
            <td><span class="status-badge">Confirmed</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
312 
  <!-- Activity Panel -->
  <aside class="dash-activity">
    <h3 style="font-size: 0.95rem; color: #38bdf8; margin-bottom: 12px;">Live Alerts</h3>
    <div class="activity-item">🚍 Bus Route 7 arrived on campus (07:48 AM)</div>
    <div class="activity-item">🎂 4 student birthdays celebrated today</div>
    <div class="activity-item">📄 Term-1 circular published to parents</div>
  </aside>
320 
  <!-- Footer -->
  <footer class="dash-footer">
    DPS Enterprise Portal &bull; System Status: Operational 100%
  </footer>
325 
</div>
327 
328</body>
329</html>

Next Lesson

Min-Width and Max-Width Media Queries: Modern Range Syntax and Logic

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Auto-fit vs Auto-fill with minmax(): The Zero-Media-Query Responsive Formula	Min-Width and Max-Width Media Queries: Modern Range Syntax and Logic

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next

PreviousPrevNext

MSK Institute • Shikohabad

Loading Page Content...

Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...

Connecting serverPlease wait...

💻 Practical Labs🚀 Free Demo📜 Verified Certificates

Min-Width and Max-Width Media Queries: Modern Range Syntax and Logic

Building Modern Page Layouts with CSS Grid: The Full Application Dashboard

Intermediate14 min read•Updated: 2026-09-10

Study Materials Cheatsheet

Building Modern Page Layouts with CSS Grid: The Full Application Dashboard

Picture the central administrative office of a modern school or university. On the wall is a massive digital dashboard:

Across the top: The School Header & Session Ticker ("Session 2026-27 • Term 1").
On the left: The Navigation Command Sidebar ("Students", "Attendance", "Fee Counter", "Examinations").
In the center: The Analytics Deck (Total Enrolled Students, Teacher-to-Student Ratio, Fee Collection Meter).
On the right: The Live Activity Log (Bus route alerts, today's student birthdays, circular drafts).

Visual Architecture Blueprint

+-------------------------------------------------------------------------+
|                  THE SCHOOL ADMIN ERP DASHBOARD BLUEPRINT               |
|                                                                         |
|  +-------------------------------------------------------------------+  |
|  | [🏫 DPS Admin ERP]                [Search]     [Principal Profile] |  | < Header (60px)
|  +-------------------------------------------------------------------+  |
|  | [Sidebar] | [ Metric 1 ] [ Metric 2 ] [ Metric 3 ] | [Calendar]   |  |
|  | (240px)   |----------------------------------------| (220px)      |  |
|  |           |                                        |              |  |
|  | Classes   |       Recent Student Admissions        | Daily        |  |
|  | Exams     |       Data Table with CSS Grid         | Birthdays    |  |
|  | Fees      |                                        |              |  |
|  | Transport |                                        | Bus Alerts   |  |
|  +-------------------------------------------------------------------+  |
|  |                            Footer Bar                             |  | < Footer (40px)
|  +-------------------------------------------------------------------+  |
+-------------------------------------------------------------------------+

In this capstone tutorial for CSS Grid, you will combine grid-template-areas, minmax(), and nested Flexbox to build a complete school management dashboard.

1. Macro Layout: The Parent Grid Blueprint

The top-level page wrapper establishes the main structural skeleton:

admin-dashboard {
display: grid;
/* Columns: Fixed Sidebar (240px), Fluid Center (1fr), Right Panel (240px) */
grid-template-columns: 240px 1fr 240px;
/* Rows: Sticky Header (64px), Main Workspace (1fr), Footer (44px) */
grid-template-rows: 64px 1fr 44px;
/* Visual Named Areas */
grid-template-areas:
  "header  header  header"
  "sidebar main    panel"
  "footer  footer  footer";
min-height: 100vh;
gap: 16px;
background-color: #0f172a;
color: #f8fafc;
16}

2. Micro Layout: The Metrics Deck (Grid Inside Grid)

Inside the main workspace area, we need a 3-card analytics deck. Rather than hardcoding fixed columns, we use the Holy Grail formula so the metric cards wrap smoothly:

metrics-deck {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
6}
7 
metric-card {
background-color: #1e293b;
border: 1px solid #334155;
border-radius: 12px;
padding: 20px;
display: flex; /* Nested Flexbox inside the Grid Item! */
justify-content: space-between;
align-items: center;
16}

3. Responsive Collapse: The Mobile Transformation

On mobile viewports (<= 900px), our 3-column dashboard folds into a streamlined, touch-friendly single column:

1@media (max-width: 900px) {
.admin-dashboard {
  grid-template-columns: 1fr; /* Single column */
  grid-template-rows: auto;
  grid-template-areas:
    "header"
    "main"
    "panel"
    "sidebar"
    "footer";
}
12 
/* Optional: Hide auxiliary sidebars on compact view */
.dashboard-sidebar,
.activity-panel {
  display: none;
}
18}

4. Common Mistakes to Avoid (Do's and Don'ts)

Bad Practice (Don't)	Good Practice (Do)	Why?
Trying to build the entire dashboard using only Flexbox	Use CSS Grid for the 2D page skeleton, Flexbox for micro-widgets	Grid manages columns and rows simultaneously with zero wrapping glitches.
Forgetting `min-height: 100vh` on the full page wrapper	Set `min-height: 100vh;` on `.admin-dashboard`	Prevents the page from shrinking awkwardly if content is short.
Setting hardcoded heights on the `main` content area	Let row heights be `1fr` or `auto`	Prevents content tables from clipping or spilling out of bounds.
Hardcoding `margin-left: 240px` to offset the sidebar	Let `grid-template-columns: 240px 1fr` handle tracks naturally	Margin offsets are a legacy hack; CSS Grid tracks are mathematically isolated.

5. Quick Revision Summary (Cheat Sheet)

Macro vs Micro: Use CSS Grid for the master 2D page layout (Header, Sidebars, Main, Footer), and Flexbox for the 1D UI elements inside each card.
Master Template: grid-template-columns: 240px 1fr 240px; creates a stable three-column application skeleton.
Fluid Workspace: Using 1fr for the central column allows tables and data charts to expand to fit any widescreen monitor.
Auto-Fit Metrics: Use repeat(auto-fit, minmax(200px, 1fr)) inside the workspace for auto-wrapping KPI metric cards.
Single Column Mobile: Redefining grid-template-areas inside @media stacks the application cleanly without altering the HTML structure.

Interactive Quiz• Knowledge Check

Multiple Choice Questions

Question 1

What is the recommended architectural relationship between CSS Grid and Flexbox in modern web design?

Question 2

In an admin dashboard layout, why is 1fr preferred for the main content area between two fixed 240px sidebars?

Question 3

What does setting min-height: 100vh; on a dashboard grid container prevent?

Question 4

How can the order of dashboard sections be reshuffled on mobile devices without modifying HTML code?

Question 5

Why is overflow: hidden; or minmax(0, 1fr) often used on dashboard grid tracks containing wide data tables?

6. Hands-on Practice Challenge: The Complete DPS Admin ERP Portal

Build a complete, production-grade School Administrative Portal:

1
Master Grid scaffolding: Sticky Header (60px), Left Nav (220px), Main Workspace (1fr), Right Activity Log (240px), and Footer (40px).
2
Inside the main area, construct a 3-card KPI Metrics Deck using auto-fit and nested Flexbox.
3
Include an admissions recent registrations data table with clean zebra striping and status pills!

1<!DOCTYPE html>
2<html lang="en">
3<head>
<meta charset="UTF-8">
<title>DPS Central Admin ERP - CSS Grid Page</title>
<style>
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }
12 
  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #090d16;
    color: #f1f5f9;
    min-height: 100vh;
  }
19 
  /* 1. MASTER 2D GRID SCAFFOLDING */
  .dashboard-grid {
    display: grid;
    grid-template-columns: 220px 1fr 240px;
    grid-template-rows: 60px 1fr 40px;
    grid-template-areas:
      "header  header  header"
      "sidebar main    activity"
      "footer  footer  footer";
    min-height: 100vh;
    gap: 12px;
    padding: 12px;
  }
33 
  /* HEADER */
  .dash-header {
    grid-area: header;
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
45 
  .brand-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #38bdf8;
  }
51 
  /* SIDEBAR */
  .dash-sidebar {
    grid-area: sidebar;
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;
  }
60 
  .nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
67 
  .nav-list li a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px;
    display: block;
    transition: all 0.2s;
  }
78 
  .nav-list li a:hover,
  .nav-list li a.active {
    background-color: #2563eb;
    color: #ffffff;
  }
84 
  /* MAIN CONTENT */
  .dash-main {
    grid-area: main;
    display: flex;
    flex-direction: column;
    gap: 16px;
    overflow-x: auto;
  }
93 
  /* 2. AUTO-FIT METRICS DECK */
  .metrics-deck {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
  }
100 
  .metric-card {
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
110 
  .metric-val {
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    margin-top: 4px;
  }
117 
  .metric-lbl {
    font-size: 0.8rem;
    color: #94a3b8;
  }
122 
  .metric-icon {
    font-size: 1.8rem;
    padding: 8px;
    background-color: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
  }
129 
  /* DATA TABLE CONTAINER */
  .table-container {
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 20px;
    flex: 1;
  }
138 
  .table-container h3 {
    font-size: 1.1rem;
    margin-bottom: 14px;
    color: #38bdf8;
  }
144 
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }
150 
  th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #1e293b;
  }
156 
  th {
    color: #94a3b8;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
  }
163 
  .status-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 9999px;
    background-color: rgba(34, 197, 94, 0.15);
    color: #4ade80;
  }
172 
  /* RIGHT ACTIVITY PANEL */
  .dash-activity {
    grid-area: activity;
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 16px;
  }
181 
  .activity-item {
    font-size: 0.85rem;
    color: #cbd5e1;
    padding: 10px 0;
    border-bottom: 1px solid #1e293b;
  }
188 
  /* FOOTER */
  .dash-footer {
    grid-area: footer;
    background-color: #131b2e;
    border: 1px solid #1e293b;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    color: #64748b;
  }
201 
  /* 3. MOBILE RESPONSIVE COLLAPSE */
  @media (max-width: 900px) {
    .dashboard-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas:
        "header"
        "main"
        "activity"
        "sidebar"
        "footer";
    }
214 
    .dash-activity,
    .dash-sidebar {
      display: none; /* Streamlined mobile view */
    }
  }
</style>
221</head>
222<body>
223 
<div class="dashboard-grid">
  
  <!-- Header -->
  <header class="dash-header">
    <div class="brand-title">DPS Central ERP Platform</div>
    <div style="font-size: 0.85rem; color: #94a3b8;">Principal: Dr. S. N. Mukherjee</div>
  </header>
231 
  <!-- Sidebar -->
  <aside class="dash-sidebar">
    <ul class="nav-list">
      <li><a href="#" class="active">Overview Deck</a></li>
      <li><a href="#">Student Records</a></li>
      <li><a href="#">Faculty Rosters</a></li>
      <li><a href="#">Fee Accounts</a></li>
      <li><a href="#">Examinations</a></li>
      <li><a href="#">Transport Fleet</a></li>
    </ul>
  </aside>
243 
  <!-- Main Workspace -->
  <main class="dash-main">
    <!-- 3-Card Metrics Deck -->
    <div class="metrics-deck">
      <div class="metric-card">
        <div>
          <div class="metric-lbl">Total Students</div>
          <div class="metric-val">2,480</div>
        </div>
        <div class="metric-icon">🎓</div>
      </div>
255 
      <div class="metric-card">
        <div>
          <div class="metric-lbl">Faculty Staff</div>
          <div class="metric-val">142</div>
        </div>
        <div class="metric-icon">👩‍🏫</div>
      </div>
263 
      <div class="metric-card">
        <div>
          <div class="metric-lbl">Attendance Rate</div>
          <div class="metric-val">96.4%</div>
        </div>
        <div class="metric-icon">📈</div>
      </div>
    </div>
272 
    <!-- Admissions Table -->
    <div class="table-container">
      <h3>Recent Class 11 Admissions (Science Stream)</h3>
      <table>
        <thead>
          <tr>
            <th>App ID</th>
            <th>Student Name</th>
            <th>Previous School</th>
            <th>10th Grade</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>#ADM-2026-01</td>
            <td>Aryavart Dixit</td>
            <td>St. Xavier's High School</td>
            <td>95.4%</td>
            <td><span class="status-badge">Confirmed</span></td>
          </tr>
          <tr>
            <td>#ADM-2026-02</td>
            <td>Kavya Rathi</td>
            <td>Modern Vidya Niketan</td>
            <td>92.8%</td>
            <td><span class="status-badge">Confirmed</span></td>
          </tr>
          <tr>
            <td>#ADM-2026-03</td>
            <td>Pranav Chawla</td>
            <td>Army Public School</td>
            <td>94.2%</td>
            <td><span class="status-badge">Confirmed</span></td>
          </tr>
        </tbody>
      </table>
    </div>
  </main>
312 
  <!-- Activity Panel -->
  <aside class="dash-activity">
    <h3 style="font-size: 0.95rem; color: #38bdf8; margin-bottom: 12px;">Live Alerts</h3>
    <div class="activity-item">🚍 Bus Route 7 arrived on campus (07:48 AM)</div>
    <div class="activity-item">🎂 4 student birthdays celebrated today</div>
    <div class="activity-item">📄 Term-1 circular published to parents</div>
  </aside>
320 
  <!-- Footer -->
  <footer class="dash-footer">
    DPS Enterprise Portal &bull; System Status: Operational 100%
  </footer>
325 
</div>
327 
328</body>
329</html>

Next Lesson

Min-Width and Max-Width Media Queries: Modern Range Syntax and Logic

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous Lesson	Next Lesson
Auto-fit vs Auto-fill with minmax(): The Zero-Media-Query Responsive Formula	Min-Width and Max-Width Media Queries: Modern Range Syntax and Logic

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

Previous Next