layout web design

Layout Web Design

Layout Web Design CSS Grid Flexbox Responsive Mobile-first Typography Spacing Visual Hierarchy White Space Alignment Consistency Modern Patterns

CSS Grid Layout

# === CSS Grid Layout ===

# Holy Grail Layout
# .page {
#   display: grid;
#   grid-template-columns: 250px 1fr 250px;
#   grid-template-rows: auto 1fr auto;
#   grid-template-areas:
#     "header  header  header"
#     "sidebar content aside"
#     "footer  footer  footer";
#   min-height: 100vh;
#   gap: 1rem;
# }
#
# .header  { grid-area: header; }
# .sidebar { grid-area: sidebar; }
# .content { grid-area: content; }
# .aside   { grid-area: aside; }
# .footer  { grid-area: footer; }
#
# /* Responsive — Mobile */
# @media (max-width: 768px) {
#   .page {
#     grid-template-columns: 1fr;
#     grid-template-areas:
#       "header"
#       "content"
#       "sidebar"
#       "aside"
#       "footer";
#   }
# }

# Card Grid — Auto-responsive
# .card-grid {
#   display: grid;
#   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
#   gap: 1.5rem;
#   padding: 1.5rem;
# }
#
# .card {
#   background: white;
#   border-radius: 12px;
#   padding: 1.5rem;
#   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
#   transition: transform 0.2s, box-shadow 0.2s;
# }
#
# .card:hover {
#   transform: translateY(-4px);
#   box-shadow: 0 8px 24px rgba(0,0,0,0.15);
# }

# Dashboard Layout
# .dashboard {
#   display: grid;
#   grid-template-columns: 280px 1fr;
#   grid-template-rows: 64px 1fr;
#   grid-template-areas:
#     "nav    topbar"
#     "nav    main";
#   height: 100vh;
# }
#
# .nav    { grid-area: nav; overflow-y: auto; }
# .topbar { grid-area: topbar; }
# .main   { grid-area: main; overflow-y: auto; padding: 2rem; }

from dataclasses import dataclass

@dataclass
class GridProperty:
    property_name: str
    values: str
    use_case: str
    example: str

grid_props = [
    GridProperty("grid-template-columns", "200px 1fr 200px", "กำหนด Column", "3 Columns Layout"),
    GridProperty("grid-template-rows", "auto 1fr auto", "กำหนด Row", "Header Content Footer"),
    GridProperty("grid-template-areas", '"header header"', "ตั้งชื่อ Area", "Semantic Layout"),
    GridProperty("gap", "1rem 2rem", "ช่องว่างระหว่าง Cell", "Spacing"),
    GridProperty("auto-fill / auto-fit", "repeat(auto-fill, minmax())", "Auto Column Count", "Responsive Cards"),
    GridProperty("place-items", "center", "จัด Item ใน Cell", "Centering"),
]

print("=== CSS Grid Properties ===")
for g in grid_props:
    print(f"  [{g.property_name}]")
    print(f"    Values: {g.values}")
    print(f"    Use: {g.use_case} | Example: {g.example}")

Flexbox Layout

# === Flexbox Layout ===

# Navigation Bar
# .navbar {
#   display: flex;
#   align-items: center;
#   justify-content: space-between;
#   padding: 0 2rem;
#   height: 64px;
#   background: #1a1a2e;
# }
#
# .nav-links {
#   display: flex;
#   gap: 2rem;
#   list-style: none;
# }
#
# .nav-actions {
#   display: flex;
#   gap: 1rem;
#   align-items: center;
# }

# Centering — Flexbox
# .center-content {
#   display: flex;
#   justify-content: center;
#   align-items: center;
#   min-height: 100vh;
# }

# Responsive Flex Wrap
# .feature-grid {
#   display: flex;
#   flex-wrap: wrap;
#   gap: 1.5rem;
# }
#
# .feature-card {
#   flex: 1 1 300px;
#   max-width: 100%;
#   padding: 2rem;
#   border-radius: 12px;
#   background: #f8f9fa;
# }

# Sticky Footer
# .app {
#   display: flex;
#   flex-direction: column;
#   min-height: 100vh;
# }
#
# .main-content {
#   flex: 1;
# }
#
# .footer {
#   padding: 2rem;
#   background: #1a1a2e;
# }

# Modern Spacing System
# :root {
#   --space-xs: 0.25rem;   /* 4px */
#   --space-sm: 0.5rem;    /* 8px */
#   --space-md: 1rem;      /* 16px */
#   --space-lg: 1.5rem;    /* 24px */
#   --space-xl: 2rem;      /* 32px */
#   --space-2xl: 3rem;     /* 48px */
#   --space-3xl: 4rem;     /* 64px */
# }

@dataclass
class FlexProperty:
    property_name: str
    common_values: str
    use_case: str

flex_props = [
    FlexProperty("display: flex", "flex / inline-flex", "เปิดใช้ Flexbox"),
    FlexProperty("flex-direction", "row / column", "ทิศทาง Main Axis"),
    FlexProperty("justify-content", "center / space-between", "จัดแนว Main Axis"),
    FlexProperty("align-items", "center / stretch", "จัดแนว Cross Axis"),
    FlexProperty("flex-wrap", "wrap / nowrap", "ตัดบรรทัด"),
    FlexProperty("gap", "1rem", "ช่องว่างระหว่าง Item"),
    FlexProperty("flex: 1 1 300px", "grow shrink basis", "ขนาด Item"),
]

print("\n=== Flexbox Properties ===")
for f in flex_props:
    print(f"  [{f.property_name}]")
    print(f"    Values: {f.common_values} | Use: {f.use_case}")

Responsive Design

# === Responsive Design System ===

# Mobile-first Media Queries
# /* Mobile (default) */
# .container { padding: 1rem; }
#
# /* Tablet */
# @media (min-width: 768px) {
#   .container { padding: 2rem; max-width: 720px; margin: 0 auto; }
# }
#
# /* Desktop */
# @media (min-width: 1024px) {
#   .container { max-width: 960px; }
# }
#
# /* Large Desktop */
# @media (min-width: 1280px) {
#   .container { max-width: 1200px; }
# }

# Container Queries — Component-level Responsive
# .card-container {
#   container-type: inline-size;
#   container-name: card;
# }
#
# @container card (min-width: 400px) {
#   .card { display: flex; gap: 1rem; }
#   .card-image { width: 200px; }
# }
#
# @container card (min-width: 600px) {
#   .card-title { font-size: 1.5rem; }
# }

# Typography Scale
# :root {
#   --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
#   --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
#   --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
#   --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.25rem);
#   --text-xl: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
#   --text-2xl: clamp(1.5rem, 1rem + 2vw, 2.5rem);
#   --text-3xl: clamp(2rem, 1.2rem + 3vw, 3.5rem);
# }

@dataclass
class Breakpoint:
    name: str
    min_width: str
    columns: int
    gutter: str
    container: str
    target: str

breakpoints = [
    Breakpoint("Mobile", "0px", 4, "16px", "100%", "iPhone SE - iPhone 15"),
    Breakpoint("Tablet", "768px", 8, "24px", "720px", "iPad Mini - iPad Pro"),
    Breakpoint("Desktop", "1024px", 12, "24px", "960px", "Laptop"),
    Breakpoint("Large", "1280px", 12, "32px", "1200px", "Desktop Monitor"),
    Breakpoint("XL", "1536px", 12, "32px", "1400px", "Large Monitor"),
]

print("\n=== Responsive Breakpoints ===")
for b in breakpoints:
    print(f"  [{b.name}] min-width: {b.min_width}")
    print(f"    Columns: {b.columns} | Gutter: {b.gutter}")
    print(f"    Container: {b.container} | Target: {b.target}")

เคล็ดลับ

• Grid: ใช้ CSS Grid สำหรับ Page Layout ใหญ่
• Flexbox: ใช้ Flexbox สำหรับ Component ย่อย
• Mobile-first: เขียน CSS Mobile ก่อน ขยายด้วย Media Query
• clamp(): ใช้ clamp() สำหรับ Fluid Typography
• Spacing: ใช้ CSS Variables สำหรับ Spacing System

Layout Web Design คืออะไร

จัดวางองค์ประกอบเว็บ CSS Grid Flexbox Visual Hierarchy White Space Alignment Consistency Responsive Mobile-first Header Content Footer

สรุป

Layout Web Design CSS Grid Flexbox Responsive Mobile-first Typography Spacing Visual Hierarchy Container Queries Media Query Modern Patterns Dashboard Cards