HTML & CSS - lesson 4 | HackIndia Skills

Key point

Grid is for areas

Use Grid when the page needs rows and columns at the same time. A dashboard, portfolio home page, event page, or project landing page usually fits this.

Keep HTML semantic first. Your header, main, aside, section, and footer should mean something before CSS places them.

Grid versus Flexbox

Flexbox is best for one direction at a time. A navbar, button row, or card actions row is usually Flexbox.

Grid is best for the page skeleton. It lets you define columns, rows, gaps, and named areas, then place direct children into them.

Common mistake

Only direct children

Only direct children of a display: grid container become grid items. If you set .page to grid, then .page > header, main, aside, and footer are grid items.

A card inside main does not join the page grid automatically. Use another grid inside main if that card list needs columns.

Example

Page shell

This is a clean starter layout for a HackIndia project page. It uses semantic HTML and named grid areas, so the CSS is easy to read.

Do not use tables, floats, or absolute positioning for normal page layout. Older tutorials may show that, but Grid and Flexbox are the current everyday tools.

<body>
  <div class="page">
    <header class="site-header">
      <h1>Campus Budget Splitter</h1>
      <nav aria-label="Main navigation">
        <a href="#features">Features</a>
        <a href="#demo">Demo</a>
      </nav>
    </header>

    <main class="content" id="main">
      <section id="features">
        <h2>Split hostel and trip expenses</h2>
        <p>Track shared costs and settle using UPI.</p>
      </section>
    </main>

    <aside class="sidebar">
      <h2>Project details</h2>
      <p>Built for a college hackathon.</p>
    </aside>

    <footer class="site-footer">
      <p>Public repo linked in the README.</p>
    </footer>
  </div>
</body>

<style>
  .page {
    /* dvh, not vh: on a phone the browser bar makes 100vh taller than
       the screen, so the page scrolls when it should not */
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "header header"
      "content sidebar"
      "footer footer";
    gap: 1rem;
    padding: 1rem;
  }

  .site-header { grid-area: header; }
  .content { grid-area: content; }
  .sidebar { grid-area: sidebar; }
  .site-footer { grid-area: footer; }

  .site-header,
  .content,
  .sidebar,
  .site-footer {
    padding: 1rem;
    border: 1px solid #d0d7de;
    border-radius: 0.75rem;
  }
</style>

Your to-do

Build the grid

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Choose the parent that owns the layout, such as .page or .dashboard.
Set display: grid on that parent.
Define columns with grid-template-columns.
Name the page zones with grid-template-areas.
Assign each direct child to an area with grid-area.
Use gap for spacing between grid items instead of margins everywhere.

0 of 6 done

Tip

Keep order logical

Grid can move things visually, but your HTML order still matters. Keyboard and screen reader users follow the document order, not your design screenshot.

Write the HTML in a sensible reading order first: header, main content, supporting aside, footer. Then use Grid to place it.

Example

Nested card grid

If your main section contains cards, make main or a card wrapper its own grid. This is separate from the page grid.

This works well for project features, team members, pricing cards, or event sessions.

.feature-list {
  display: grid;
  /* As many columns as fit, each at least 16rem wide: three on a
     laptop, one on a phone, and no media query needed */
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
}

.feature-card {
  padding: 1rem;
  border: 1px solid #d0d7de;
  border-radius: 0.75rem;
}