CSS Website Layout

अपनी shop के लिए एक physical display cabinet बनाने की कल्पना करें। अगर आप items को बस ढीला ढंग से stack कर दें, तो वे cluttered दिखेंगे। आप cabinet को frame करना चाहते हैं: एक top banner जोड़ना (header), directories के लिए एक side drawer (sidebar), एक main display zone (content), और legal info के लिए एक bottom compartment (footer)। एक CSS website layout वही display cabinet है। यह आपके webpage content को साफ़, structured zones में organize करने के लिए semantic containers, flex columns, और grid rows इस्तेमाल करती है।

In this page:

Semantic Page Outline
Two-Column Flexbox Layouts
Responsive Grid Cards
Persistent Header App Frames
Responsive Media Query Reflows

Syntax

css

header, nav, main, footer {
  display: block;
}
.container {
  display: grid | flex;
}

Semantic Page Outline

एक professional website एक semantic HTML structure से शुरू होती है। semantic layout tags (जैसे header, footer, main, और nav) इस्तेमाल करना search engines और assistive devices के लिए साफ़ page zones define करता है।

Note: search engines को अपना page index करने में मदद करने के लिए हमेशा अपने page के unique, core topic को एक single, साफ़ main tag में wrap करें।

Warning: validation errors रोकने के लिए एक ही webpage पर कभी भी कई main tags इस्तेमाल न करें।

उदाहरण: The Semantic Page Outline

css

<style>
header, nav, main, footer {
  padding: 12px;
  color: white;
}
header { background: steelblue; }
nav { background: seagreen; }
main { background: #555; }
footer { background: #333; }
</style>
<header>Site Header</header>
<nav>Navigation</nav>
<main>
  <p>Main content</p>
</main>
<footer>Site Footer</footer>

Two-Column Flexbox Layouts

अपने main content area और एक sidebar column को साथ-साथ arrange करने के लिए, आप एक flexible Flexbox container इस्तेमाल कर सकते हैं। यह sidebar को एक fixed width बनाए रखने देता है जबकि content area बची हुई screen space भरने के लिए expand होता है।

Note: अपने columns को align करने और उन्हें vertically और horizontally दोनों तरफ़ center करने के लिए Flexbox layouts इस्तेमाल करें।

Warning: सही alignment सुनिश्चित करने के लिए अपनी flex properties को parent container पर लागू करें, columns पर खुद नहीं।

उदाहरण: Two-Column Flexbox Layouts

css

<style>
.layout {
  display: flex;
}
.sidebar {
  width: 200px;
  background: steelblue;
  color: white;
  padding: 10px;
}
.content {
  flex: 1;
  background: #eef;
  padding: 10px;
}
</style>
<div class="layout">
  <div class="sidebar">Sidebar</div>
  <div class="content">Main content area</div>
</div>

Responsive Grid Cards

tools या content cards की lists को साफ़ तरीके से दिखाने के लिए, आप एक responsive CSS Grid इस्तेमाल कर सकते हैं। auto-fit और minmax() functions इस्तेमाल करके, आप self-responsive grids बना सकते हैं जो screen sizes छोटे होने पर automatically cards को नई lines में wrap कर देते हैं।

Note: बिना किसी media queries की ज़रूरत के self-responsive card grids बनाने के लिए repeat(), auto-fit, और minmax() को combine करें।

Warning: अगर आपकी minmax minimum value बहुत बड़ी है, तो आपके columns फिर भी छोटे mobile screens पर overflow हो सकते हैं।

उदाहरण: Responsive Grid Cards

css

<style>
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.cards div {
  background: mediumseagreen;
  color: white;
  padding: 16px;
}
</style>
<div class="cards">
  <div>Card</div>
  <div>Card</div>
  <div>Card</div>
</div>

Persistent Header App Frames

अपने web applications को native mobile apps जैसा महसूस कराने के लिए, आप अपने header bar को screen के top पर और अपने footer navigation menu को bottom पर lock करने के लिए fixed positioning इस्तेमाल कर सकते हैं, users के scroll करते समय उन्हें visible रखते हुए।

Note: fixed bars को आपके content को cover करने से रोकने के लिए अपने body container में matching top और bottom padding जोड़ें।

Warning: सुनिश्चित करें कि आपके fixed headers responsive हैं ताकि वे mobile devices पर बहुत ज़्यादा screen space cover न करें।

उदाहरण: Persistent Header App Frames

css

<style>
header {
  position: fixed;
  top: 0;
  width: 100%;
  background: steelblue;
  color: white;
  padding: 10px;
  text-align: center;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #333;
  color: white;
  padding: 10px;
  text-align: center;
}
body {
  padding-top: 50px;
  padding-bottom: 50px;
}
.content p {
  background: #f0f0f0;
  padding: 12px;
  margin: 10px 0;
}
</style>
<header>Fixed Header</header>
<div class="content">
  <p>Scroll to see the header and footer stay fixed. Paragraph 1.</p>
  <p>Paragraph 2.</p>
  <p>Paragraph 3.</p>
  <p>Paragraph 4.</p>
  <p>Paragraph 5.</p>
  <p>Paragraph 6.</p>
  <p>Paragraph 7.</p>
  <p>Paragraph 8.</p>
</div>
<footer>Fixed Footer</footer>

Responsive Media Query Reflows

यह सुनिश्चित करने के लिए कि आपकी website layout responsive है, CSS media queries इस्तेमाल करें ताकि छोटे mobile displays पर देखे जाने पर elements automatically adapt और stack हों, side-by-side columns को single vertical columns में बदलते हुए।

Note: छोटे mobile screens के लिए default styles लिखकर, फिर बड़े monitors के लिए adapt करने के लिए min-width queries इस्तेमाल करके एक mobile-first design workflow इस्तेमाल करें।

Warning: सुनिश्चित करें कि आपके breakpoints ऐसे visual layout gaps न छोड़ें जहाँ unusual screen sizes पर elements overlap हों।

उदाहरण: Responsive Media Query Reflows

css

<style>
.columns {
  display: flex;
  gap: 8px;
}
@media (max-width: 600px) {
  .columns {
    flex-direction: column;
  }
}
.columns div {
  background: steelblue;
  color: white;
  padding: 10px;
  flex: 1;
}
</style>
<div class="columns">
  <div>Column A</div>
  <div>Column B</div>
</div>

Live Example

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson CSS Outline Next Lesson → CSS Gap