Introduction
When building a webpage, understanding layouts is key to creating a visually appealing and functional design. In this lesson, we will cover how to work with layouts, and how to ensure designs adapt to different screen sizes.
Layout Types
There are different approaches to structuring a webpage:
Fixed-Width Layout
A fixed-width layout has elements with a set width, regardless of the screen size.
Pros:
- Predictable design
- Easy to implement
Cons:
- May require horizontal scrolling on small screens
12-Column Grid Layout
A popular layout system where the page is divided into 12 equal-width columns.
.col-6 {
width: 50%;
}
This allows for easy responsive design adjustments.
Liquid Layout
A liquid layout uses percentages instead of fixed widths to allow elements to resize dynamically.
.container {
width: 80%;
}
Pros:
- Adapts to different screen sizes
Cons:
- Can lead to overly stretched content on large screens
Responsive Design with Media Queries
To make designs adaptable, we use media queries:
@media only screen and (max-width: 768px) {
.container {
width: 600px;
}
}
This ensures styles are applied only when the screen size is 768px or smaller.
CSS Frameworks
Instead of writing everything from scratch, frameworks like Bootstrap and MaterializeCSS provide prebuilt styles and layouts.
You can use them by adding a CDN link to your HTML file:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css">
Summary
Frameworks: Utilize CSS libraries to speed up development.
Positioning: Use static, relative, absolute, or fixed positioning as needed.
Float: Helps in aligning elements; use clear to prevent layout issues.
Layouts: Choose between fixed, grid, or liquid layouts based on your needs.
Media Queries: Ensure your site is responsive.
