Prev Next

CSS Website Layout

CSS plays a vital role in creating responsive and visually appealing website layouts. By using properties like display, position, grid, and flexbox, you can structure your website efficiently.

Key Topics

Flexbox Layout

The Flexbox model is ideal for designing flexible and responsive layouts, allowing you to align and distribute space efficiently among items.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <style>
        .container {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: #007BFF;
            color: white;
            text-align: center;
            line-height: 100px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>

Explanation: The Flexbox container aligns items horizontally and distributes space evenly among them.

Grid Layout

CSS Grid is a powerful layout system that allows you to create complex and responsive designs with rows and columns.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Layout</title>
    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
        }
        .item {
            background-color: #007BFF;
            color: white;
            text-align: center;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>
</html>

Explanation: The Grid layout divides the container into three equal columns with a 10px gap between items.

Fixed vs. Relative Positioning

Positioning is key for placing elements. Fixed positioning removes an element from the document flow, while relative positioning offsets it relative to its original position.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed and Relative Positioning</title>
    <style>
        .fixed {
            position: fixed;
            top: 10px;
            left: 10px;
            background-color: #007BFF;
            color: white;
            padding: 10px;
        }
        .relative {
            position: relative;
            top: 20px;
            background-color: #FF6B6B;
            color: white;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="fixed">Fixed Box</div>
    <div class="relative">Relative Box</div>
</body>
</html>

Explanation: The fixed box stays in a fixed position relative to the viewport, while the relative box shifts relative to its normal flow position.

Complete Website Layout Example

This example demonstrates how Flexbox and Grid can be used together for a complete responsive website layout.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Complete Layout</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
        }
        .header {
            background-color: #007BFF;
            color: white;
            text-align: center;
            padding: 10px;
        }
        .main {
            display: flex;
        }
        .sidebar {
            flex: 1;
            background-color: #f4f4f4;
            padding: 20px;
        }
        .content {
            flex: 2;
            background-color: #fff;
            padding: 20px;
        }
        .footer {
            background-color: #007BFF;
            color: white;
            text-align: center;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="header">Header</div>
    <div class="main">
        <div class="sidebar">Sidebar</div>
        <div class="content">Main Content</div>
    </div>
    <div class="footer">Footer</div>
</body>
</html>

Explanation: This layout combines Flexbox for the main structure and basic styles for the header and footer, creating a clean, responsive website.

Key Takeaways

  • Flexbox: Align items dynamically in one dimension (row or column).
  • Grid: Create structured layouts with rows and columns.
  • Positioning: Use fixed and relative positioning to control element placement effectively.
  • Complete Layout: Combine multiple techniques to build responsive websites efficiently.
Prev Next