Website Layout in CSS
Website Layout in CSS — Structuring Pages Visually
CSS layouts define how different parts of a webpage (header, sidebar, content, footer, etc.) are arranged and sized on the screen.
Common CSS Layout Techniques
1. Block Layout (Normal Flow)
Default layout mode.
Elements stack vertically in the order they appear.
header, main, footer { display: block;}2. Flexbox
Great for one-dimensional layouts (either row or column).
.container { display: flex; /* activates flexbox */ flex-direction: row; /* horizontal layout */ justify-content: space-between; /* space between items */ align-items: center; /* vertical alignment */}Example:
header { display: flex; justify-content: space-between; padding: 20px;}3. CSS Grid
Perfect for two-dimensional layouts (rows and columns).
.container { display: grid; grid-template-columns: 200px 1fr 200px; /* sidebar, main, sidebar */ grid-gap: 20px;}Example:
body { display: grid; grid-template-rows: 60px 1fr 40px; grid-template-areas: "header" "main" "footer";}header { grid-area: header;}main { grid-area: main;}footer { grid-area: footer;}4. Positioning
Control exact placement using position: relative, absolute, fixed, or sticky.
nav { position: fixed; top: 0; width: 100%; background-color: #333;}Example: Simple Website Layout Using Flexbox
body { margin: 0; display: flex; flex-direction: column; min-height: 100vh;}header, footer { background-color: #222; color: white; padding: 1rem;}main { flex: 1; padding: 1rem;}.container { display: flex;}.sidebar { width: 200px; background-color: #eee; padding: 1rem;}.content { flex: 1; padding: 1rem;}HTML:
<body> <header>Header</header> <div class="container"> <aside class="sidebar">Sidebar</aside> <main class="content">Main Content</main> </div> <footer>Footer</footer></body>Summary
Use Flexbox for simple horizontal or vertical layouts.
Use Grid for complex page structures with rows and columns.
Use positioning for fixed or sticky elements.
Combine techniques for best results!
Want me to generate a complete layout template or explain responsive layouts next?
