❮ Previous Next ❯

Layout Sections

  • Design structured website layout sections.

  • A modern website or application is not a single page -
    it is a collection of layout sections that must work on:

    • Mobile

    • Tablet

    • Laptop

    • Large screens

    This lesson focuses on how to design and structure responsive layout sections using Tailwind CSS.

    What Are Layout Sections ?

    Layout sections are large structural blocks of a UI, such as:

    • Header

    • Hero section

    • Content sections

    • Sidebar layouts

    • Footer

    They define how content is arranged, not how individual components look.

    Why Responsive Layout Sections Matter

    Users access apps on:

    • Phones

    • Tablets

    • Laptops

    • Wide monitors

    If layout sections are not responsive:

    • Content breaks

    • Scrolling becomes painful

    • UX feels unprofessional

    Responsive layout sections ensure:

    • Readability

    • Proper spacing

    • Logical flow

    • Consistent experience

    Mobile-First Layout Philosophy 

    Tailwind follows mobile-first design.

    This means:

    • Default styles → mobile

    • Breakpoints → enhance for larger screens

    Don’t design desktop first
    Always start from mobile

Basic Responsive Section Layout

This section uses padding and max-width container to create a responsive and centered layout. 

<section class="px-4 py-10">
  <div class="max-w-7xl mx-auto">
    <!-- Section content -->
  </div>
</section>

  • Why This Structure is Used

    • px-* → horizontal padding

    • py-* → vertical spacing

    • max-w-* → readable content width

    • mx-auto → centered layout

    This pattern is used across almost every professional project.

Responsive Padding Spacing

This section adjusts padding based on screen size using Tailwind’s responsive spacing utilities. 

<section class="px-4 sm:px-6 lg:px-12 py-10"></section>

  • Meaning:

    • Mobile → compact

    • Desktop → spacious

    Spacing is part of responsive design, not decoration.

    Single-Column → Multi-Column Layout

    Mobile (Default)

    • One column

    • Vertical stacking

    Desktop

    • Multiple columns

    • Horizontal layout

Responsive Two-Column Layout

This section uses a responsive grid to switch from single column to two columns on medium screens. 

<section class="px-4 py-10">
  <div
    class="max-w-7xl mx-auto
           grid grid-cols-1
           md:grid-cols-2
           gap-6"
  >
    <div class="bg-gray-100 p-6 rounded">
      Left content
    </div>
    <div class="bg-gray-100 p-6 rounded">
      Right content
    </div>
  </div>
</section>

  • What This Achieves

    • Mobile → stacked blocks

    • Tablet/Desktop → side-by-side

    • Consistent spacing

    • Clean structure

    This is core responsive layout behavior.

    Using Flex for Layout Sections

    Flex is useful for:

    • Alignment

    • Distribution

    • Navigation layouts

Responsive Flex Layout Section

This layout switches from column to row on large screens using Tailwind’s responsive flex utilities. 

<section class="px-4 py-8">
  <div
    class="max-w-7xl mx-auto
           flex flex-col
           lg:flex-row
           items-center
           gap-6"
  >
    <div class="flex-1">
      Content A
    </div>

    <div class="flex-1">
      Content B
    </div>
  </div>
</section>

  • Grid vs Flex

    Use CasePreferred
    Equal columnsGrid
    Complex layoutsGrid
    Alignment-based layoutsFlex
    Navbar / headerFlex
    Choose layout tool based on structure, not habit.

    Responsive Section Width Control

    Avoid full-width text on large screens.

    Use:

    max-w-6xl

    max-w-7xl

    This improves:

    • Readability

    • Visual balance

    • UX comfort

      Responsive Order Change

      Sometimes order must change across screens.

      <div class="order-2 md:order-1">

      This allows:

      • Content priority on mobile

      • Visual balance on desktop

      Use sparingly.

    ❮ Previous Next ❯