Learn Multi-Level Layouts by Building a Visit Va | AI/ML with Champak Roy, Varanasi

Lesson Goal

A multi-level layout means a layout inside another layout. For example:

Main idea

The whole page may use Grid.
The hero inside it may also use Grid.
The toolbar inside a section may use Flexbox.
The attraction cards inside the content may use Grid again.

Travel page reason

A travel page is a very good practice project because it naturally has many layout levels: hero, highlights, attraction cards, itinerary, travel notes, and sidebar information.

Full runnable HTML for this goal section

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visit Varanasi Layout Goal</title>
  <style>
    body{margin:0;font-family:Arial,sans-serif;background:#fffaf0;color:#2b2112;line-height:1.7}
    .wrap{max-width:980px;margin:auto;padding:32px 16px}
    .card{background:white;border:1px solid #efdfb2;border-radius:22px;padding:24px;box-shadow:0 18px 50px rgba(128,81,0,.12)}
    h1{margin-top:0;color:#d97706}.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .box{background:#fff7ea;border:1px solid #efdfb2;border-radius:16px;padding:16px;font-weight:700}
    @media(max-width:700px){.grid{grid-template-columns:1fr}}
  </style>
</head>
<body>
  <main class="wrap">
    <section class="card">
      <h1>Lesson Goal: Multi-Level Layout</h1>
      <p>A multi-level layout means a layout inside another layout. We will build a Visit Varanasi page section by section.</p>
      <div class="grid">
        <div class="box">Outer page layout: Grid</div>
        <div class="box">Hero layout: Grid</div>
        <div class="box">Toolbar: Flexbox</div>
        <div class="box">Cards: Grid again</div>
      </div>
    </section>
  </main>
</body>
</html>

0

Level 0 — Start with the page sections

First think in page parts, not in tiny boxes.

Before writing Grid or Flexbox, decide the main content blocks. Our Visit Varanasi page will have: hero, highlights, attractions, trip plan, and final travel dashboard.

Main page blocks

Hero Section

Quick Highlights

Attractions Grid

Trip Plan

Final Visit Varanasi Page Shell

Basic HTML section structure

<main class="page">
  <section class="hero"></section>
  <section class="highlights"></section>
  <section class="attractions"></section>
  <section class="trip-plan"></section>
  <section class="visit-shell"></section>
</main>

Full runnable HTML for Level 0 section

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visit Varanasi Page Sections</title>
  <style>
    body{margin:0;font-family:Arial,sans-serif;background:#fffaf0;color:#2b2112}
    .page{max-width:960px;margin:auto;padding:28px 16px;display:grid;gap:14px}
    section{background:white;border:1px solid #efdfb2;border-radius:18px;padding:22px;box-shadow:0 12px 34px rgba(128,81,0,.1)}
    h1{color:#d97706}.label{font-weight:800;color:#92400e}
  </style>
</head>
<body>
  <main class="page">
    <h1>Visit Varanasi Page Blocks</h1>
    <section><span class="label">1.</span> Hero Section</section>
    <section><span class="label">2.</span> Quick Highlights</section>
    <section><span class="label">3.</span> Attractions Grid</section>
    <section><span class="label">4.</span> Trip Plan</section>
    <section><span class="label">5.</span> Final Visit Varanasi Page Shell</section>
  </main>
</body>
</html>

1

Level 1 — Build the hero using nested Grid

The hero is our first multi-level layout.

The outer hero section uses Grid with two columns: the left side for title and text, and the right side for a travel summary card. Inside the left side, we stack smaller pieces vertically.

Visit Varanasi hero layout

Small Eyebrow + Heading

Short Intro Text

Buttons Row

Side Travel Card
Best Time • Ghats • Temples • Food

Why Grid here?

Because we want two main zones together: a big content area and a side card. That is a two-dimensional section layout, so Grid fits very well.

Hero layout code

.hero-layout{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:16px;
}

.hero-left{
  display:grid;
  gap:12px;
}

.hero-side{
  padding:20px;
  border-radius:18px;
  background:#fff7ea;
  border:1px solid #efdfb2;
}

Full runnable HTML for Level 1 section

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visit Varanasi Hero Layout</title>
  <style>
    body{margin:0;font-family:Arial,sans-serif;background:#fffaf0;color:#2b2112;line-height:1.7}
    .hero-layout{max-width:1100px;margin:auto;padding:36px 16px;display:grid;grid-template-columns:1.15fr .85fr;gap:16px}
    .hero-left{display:grid;gap:12px}.card{background:white;border:1px solid #efdfb2;border-radius:22px;padding:24px;box-shadow:0 18px 50px rgba(128,81,0,.12)}
    .eyebrow{color:#d97706;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.btn{display:inline-block;background:#d97706;color:white;padding:12px 16px;border-radius:14px;text-decoration:none;font-weight:800}
    .hero-side{background:#fff7ea}h1{font-size:clamp(2rem,5vw,3.7rem);line-height:1.05;margin:.2rem 0}
    @media(max-width:800px){.hero-layout{grid-template-columns:1fr}}
  </style>
</head>
<body>
  <section class="hero-layout">
    <div class="hero-left">
      <div class="card">
        <p class="eyebrow">Visit Varanasi</p>
        <h1>Experience ghats, temples, food and timeless lanes.</h1>
        <p>Build this hero with a two-column Grid and a stacked inner layout.</p>
        <a class="btn" href="#">Plan My Trip</a>
      </div>
    </div>
    <aside class="card hero-side">
      <h2>Travel Summary</h2>
      <p><strong>Best time:</strong> October to March</p>
      <p><strong>Must see:</strong> Ganga Aarti, Kashi Vishwanath, Sarnath</p>
      <p><strong>Food:</strong> Kachori, chaat, lassi, malaiyo</p>
    </aside>
  </section>
</body>
</html>

2

Level 2 — Add quick highlights and attractions

Now we create inner grids inside the page.

A travel page usually has quick information like best time, major experiences, and key places. These small information blocks are perfect for a repeatable Grid layout.

Quick highlights grid

Ganga Aarti

Kashi Vishwanath

Banarasi Food

Attractions cards grid

Dashashwamedh Ghat

Sarnath

Assi Ghat

Kashi Vishwanath Temple

Banaras Hindu University

Local Street Food

Layout lesson

A page can contain many different grids. One grid does not control everything. Each section can get its own layout rules depending on its purpose.

Cards grid code

.quick-info{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

.attractions-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}

@media (max-width: 900px){
  .quick-info,
  .attractions-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width: 640px){
  .quick-info,
  .attractions-grid{
    grid-template-columns:1fr;
  }
}

Full runnable HTML for Level 2 section

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visit Varanasi Highlights and Attractions</title>
  <style>
    body{margin:0;font-family:Arial,sans-serif;background:#fffaf0;color:#2b2112;line-height:1.7}.wrap{max-width:1100px;margin:auto;padding:32px 16px}
    h1{color:#d97706}.quick-info,.attractions-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:18px 0}
    .card{background:white;border:1px solid #efdfb2;border-radius:18px;padding:20px;box-shadow:0 12px 34px rgba(128,81,0,.1)}
    .card h3{margin-top:0;color:#92400e}@media(max-width:900px){.quick-info,.attractions-grid{grid-template-columns:1fr 1fr}}@media(max-width:640px){.quick-info,.attractions-grid{grid-template-columns:1fr}}
  </style>
</head>
<body>
  <main class="wrap">
    <h1>Varanasi Highlights and Attractions</h1>
    <section class="quick-info">
      <article class="card"><h3>Ganga Aarti</h3><p>Evening ceremony at Dashashwamedh Ghat.</p></article>
      <article class="card"><h3>Kashi Vishwanath</h3><p>One of the most important temple visits.</p></article>
      <article class="card"><h3>Banarasi Food</h3><p>Try kachori, chaat, lassi and sweets.</p></article>
    </section>
    <section class="attractions-grid">
      <article class="card">Dashashwamedh Ghat</article><article class="card">Sarnath</article><article class="card">Assi Ghat</article>
      <article class="card">Kashi Vishwanath Temple</article><article class="card">Banaras Hindu University</article><article class="card">Street Food Walk</article>
    </section>
  </main>
</body>
</html>

3

Level 3 — Build a trip plan with main area + side info

This section shows another layout inside the same page.

The trip planner is a very natural two-column layout: the left side can show day-wise itinerary, and the right side can show quick travel notes, weather reminders, or transport tips.

Trip planner layout

Trip Planner Heading

Day 1 — Ghats + Temple

Day 2 — Sarnath + BHU

Day 3 — Food + Walks

Day 4 — Shopping + Sunrise Boat Ride

Why not use one long column?

Because the user can understand the travel plan faster when the main content and supporting notes are visually separated.

Trip planner layout code

.trip-plan-layout{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:16px;
}

.trip-main{
  display:grid;
  gap:16px;
}

.day-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:16px;
}

.side-notes{
  display:grid;
  gap:16px;
}

Full runnable HTML for Level 3 section

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visit Varanasi Trip Planner</title>
  <style>
    body{margin:0;font-family:Arial,sans-serif;background:#fffaf0;color:#2b2112;line-height:1.7}.wrap{max-width:1120px;margin:auto;padding:32px 16px}
    .trip-plan-layout{display:grid;grid-template-columns:1.25fr .75fr;gap:16px}.trip-main,.side-notes{display:grid;gap:16px}.day-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
    .card{background:white;border:1px solid #efdfb2;border-radius:18px;padding:20px;box-shadow:0 12px 34px rgba(128,81,0,.1)}h1,h3{color:#d97706;margin-top:0}
    @media(max-width:850px){.trip-plan-layout,.day-grid{grid-template-columns:1fr}}
  </style>
</head>
<body>
  <main class="wrap">
    <section class="trip-plan-layout">
      <div class="trip-main">
        <div class="card"><h1>4-Day Varanasi Trip Plan</h1><p>Use Grid for the main plan and a separate sidebar for travel notes.</p></div>
        <div class="day-grid">
          <article class="card"><h3>Day 1</h3><p>Ghats, Kashi Vishwanath and evening Ganga Aarti.</p></article>
          <article class="card"><h3>Day 2</h3><p>Sarnath, museum and Banaras Hindu University.</p></article>
          <article class="card"><h3>Day 3</h3><p>Food walk, lanes, saree shopping and local markets.</p></article>
          <article class="card"><h3>Day 4</h3><p>Sunrise boat ride and relaxed photography walk.</p></article>
        </div>
      </div>
      <aside class="side-notes"><div class="card">Travel Tips</div><div class="card">Best Time</div><div class="card">What to Carry</div></aside>
    </section>
  </main>
</body>
</html>

4

Level 4 — Final multi-level Visit Varanasi page shell

Now we combine everything into one final layout.

This final design uses: Grid for the outer page shell, Flexbox for the toolbar, and more Grid sections inside the main content. This is exactly what multi-level layout means in real projects.

Final Visit Varanasi layout map

Left Sidebar
Overview
Places
Itinerary
Food
Tips

Temples

Ghats

Food Stops

Heritage Walks

Main Attraction Story / Featured Place

Assi Ghat

Dashashwamedh

Sarnath

Temple Corridor

Street Food

Banarasi Sarees

Use Grid for

whole page shell
hero columns
card collections
featured content sections

Use Flexbox for

toolbar rows
button groups
small control groups
horizontal action sections

Final shell CSS

.visit-page{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
}

.visit-main{
  display:grid;
  gap:16px;
}

.toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.toolbar-group{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.summary-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}

.content-split{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:16px;
}

.side-widget-stack{
  display:grid;
  gap:16px;
}

Full runnable HTML for Level 4 section

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Final Visit Varanasi Page Shell</title>
  <style>
    body{margin:0;font-family:Arial,sans-serif;background:#fffaf0;color:#2b2112;line-height:1.7}.wrap{max-width:1220px;margin:auto;padding:24px 16px}
    .visit-page{display:grid;grid-template-columns:220px 1fr;gap:16px}.visit-main{display:grid;gap:16px}.toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.toolbar-group{display:flex;gap:10px;flex-wrap:wrap}.summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.content-split{display:grid;grid-template-columns:1.35fr .65fr;gap:16px}.side-widget-stack,.attractions-grid{display:grid;gap:16px}.attractions-grid{grid-template-columns:repeat(3,1fr)}
    .card,.sidebar{background:white;border:1px solid #efdfb2;border-radius:18px;padding:18px;box-shadow:0 12px 34px rgba(128,81,0,.1)}.sidebar a{display:block;padding:10px;border-radius:12px;color:#92400e;text-decoration:none;font-weight:800}.sidebar a:hover{background:#fff7ea}.btn{background:#d97706;color:white;border-radius:12px;padding:10px 14px;text-decoration:none;font-weight:800}
    @media(max-width:950px){.visit-page,.content-split{grid-template-columns:1fr}.summary-grid,.attractions-grid{grid-template-columns:1fr 1fr}}@media(max-width:650px){.summary-grid,.attractions-grid{grid-template-columns:1fr}}
  </style>
</head>
<body>
  <main class="wrap visit-page">
    <aside class="sidebar"><h2>Visit Menu</h2><a href="#">Overview</a><a href="#">Places</a><a href="#">Itinerary</a><a href="#">Food</a><a href="#">Tips</a></aside>
    <section class="visit-main">
      <div class="card toolbar"><div class="toolbar-group"><strong>Visit Varanasi</strong><span>4 Day Plan</span></div><div class="toolbar-group"><a class="btn" href="#">Search</a><a class="btn" href="#">Map</a><a class="btn" href="#">Book</a></div></div>
      <div class="summary-grid"><div class="card">Temples</div><div class="card">Ghats</div><div class="card">Food Stops</div><div class="card">Heritage Walks</div></div>
      <div class="content-split"><article class="card"><h1>Featured: Sunrise at the Ghats</h1><p>Use this large area for the main attraction story, image or route explanation.</p></article><aside class="side-widget-stack"><div class="card">Sunrise Boat Ride</div><div class="card">Evening Aarti</div></aside></div>
      <div class="attractions-grid"><div class="card">Assi Ghat</div><div class="card">Dashashwamedh</div><div class="card">Sarnath</div><div class="card">Temple Corridor</div><div class="card">Street Food</div><div class="card">Banarasi Sarees</div></div>
    </section>
  </main>
</body>
</html>

Practice Challenge

Try improving this Visit Varanasi page yourself.

Challenge 1: Add a “Best Food in Varanasi” section using a 3-card grid.

Show idea

Create a new section and use display:grid with grid-template-columns:repeat(3,1fr).

Challenge 2: Add a sidebar box for “Travel Essentials”.

Show idea

Place a new card inside the sidebar widget stack so it aligns with the other support cards.

Challenge 3: Make the attraction cards responsive.

Show idea

Use media queries to reduce 3 columns to 2 columns and then 1 column on small screens.

Full runnable HTML for the practice challenge

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Visit Varanasi Practice Challenge</title>
  <style>
    body{margin:0;font-family:Arial,sans-serif;background:#fffaf0;color:#2b2112;line-height:1.7}.wrap{max-width:1050px;margin:auto;padding:32px 16px}.food-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.card{background:white;border:1px solid #efdfb2;border-radius:18px;padding:20px;box-shadow:0 12px 34px rgba(128,81,0,.1)}h1,h2{color:#d97706}@media(max-width:760px){.food-grid{grid-template-columns:1fr}}
  </style>
</head>
<body>
  <main class="wrap">
    <h1>Practice: Best Food in Varanasi</h1>
    <section class="food-grid">
      <article class="card"><h2>Kachori Sabzi</h2><p>A classic morning breakfast experience.</p></article>
      <article class="card"><h2>Chaat</h2><p>Try tomato chaat and tamatar chaat in famous lanes.</p></article>
      <article class="card"><h2>Lassi</h2><p>A cooling drink after walking through the city.</p></article>
    </section>
  </main>
</body>
</html>

Final Summary

You used a real “Visit Varanasi” page to understand multi-level layouts.

What you learned

Think in large page sections first.
Use Grid for outer and section-level structure.
Use Flexbox for smaller horizontal control rows.
Nest layouts inside layouts for real-world pages.
Travel pages are excellent practice for layout mastery.

Best next step

Convert this lesson into a real tourism page with images, maps, day-wise itinerary, local food guide, and booking/contact sections.

Full runnable HTML for the final summary

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Multi-Level Layout Summary</title>
  <style>
    body{margin:0;font-family:Arial,sans-serif;background:#fffaf0;color:#2b2112;line-height:1.7}.wrap{max-width:900px;margin:auto;padding:32px 16px}.card{background:white;border:1px solid #efdfb2;border-radius:22px;padding:24px;box-shadow:0 18px 50px rgba(128,81,0,.12)}h1{color:#d97706}.step{background:#fff7ea;border:1px solid #efdfb2;border-radius:14px;padding:12px;margin:10px 0;font-weight:700}
  </style>
</head>
<body>
  <main class="wrap">
    <section class="card">
      <h1>Final Summary</h1>
      <p>You used a real Visit Varanasi page to understand nested layouts.</p>
      <div class="step">1. Think in large page sections first.</div>
      <div class="step">2. Use Grid for outer and section-level structure.</div>
      <div class="step">3. Use Flexbox for smaller horizontal control rows.</div>
      <div class="step">4. Nest layouts inside layouts for real-world pages.</div>
      <div class="step">5. Convert the lesson into a real tourism page next.</div>
    </section>
  </main>
</body>
</html>

Learn Multi-Level Layouts by Building a Visit Varanasi Page

Lesson Goal

Main idea

Travel page reason

Level 0 — Start with the page sections

Level 1 — Build the hero using nested Grid

Why Grid here?

Level 2 — Add quick highlights and attractions

Layout lesson

Level 3 — Build a trip plan with main area + side info

Why not use one long column?

Level 4 — Final multi-level Visit Varanasi page shell

Use Grid for

Use Flexbox for

Practice Challenge

Final Summary

What you learned

Best next step