Layout Web Design

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

Layout Tool	มิติ	เหมาะกับ	Browser Support	ความยาก
CSS Grid	2D	Page Layout	97%+	ปานกลาง
Flexbox	1D	Component	99%+	ง่าย
Float	1D	Legacy	100%	ยาก (hack)
Container Query	Component	Responsive Component	90%+	ปานกลาง
Subgrid	2D Nested	Nested Grid	85%+	สูง

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