Chapter 6: Layout Basics with CSS

CSS provides several layout techniques to help you arrange elements on your webpage. Understanding these layout options allows you to create structured, responsive designs that look good on any device. In this chapter, we’ll cover some fundamental CSS layout techniques, including the box model, flexbox, and grid layout.

The CSS Box Model

The box model is the foundation of layout in CSS. Every element is treated as a rectangular box, with properties for content, padding, border, and margin. Understanding how these properties interact helps you control spacing and element size on your page.

        /* Example of the Box Model */
        .box {
            width: 200px;
            padding: 10px; /* Inside the element’s border */
            border: 2px solid #333333; /* Around the padding */
            margin: 20px; /* Outside the border */
        }

Using Flexbox for Layout

Flexbox is a layout model that provides a flexible way to arrange items in rows or columns. It is particularly useful for creating responsive layouts that adapt to different screen sizes.

        /* Basic Flexbox Layout */
        .container {
            display: flex;
            flex-direction: row; /* Arrange items in a row */
            justify-content: space-between; /* Space items evenly */
            align-items: center; /* Center items vertically */
        }
        
        .item {
            width: 100px;
            height: 100px;
            background-color: #666666;
        }

Using CSS Grid for Advanced Layouts

CSS Grid is a powerful layout system that allows you to create complex, two-dimensional layouts with rows and columns. It provides fine control over element placement and is ideal for creating grid-based layouts.

        /* Basic CSS Grid Layout */
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr; /* Two columns, one twice as wide */
            grid-gap: 10px; /* Spacing between grid items */
        }
        
        .grid-item {
            background-color: #888888;
            padding: 20px;
            text-align: center;
        }

Example: Combining Flexbox and Grid for Layout

Let’s use flexbox and grid together to create a flexible and responsive layout. This example arranges items in a flexible container with grid-based content sections.

        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Layout Example</title>
                <link rel="stylesheet" href="styles.css">
            </head>
            <body>
                <div class="container">
                    <header>Header</header>
                    <nav>Navigation</nav>
                    <main class="grid-container">
                        <div class="grid-item">Content 1</div>
                        <div class="grid-item">Content 2</div>
                    </main>
                    <footer>Footer</footer>
                </div>
            </body>
        </html>

Experimenting with Layouts

Now that you understand the basics of CSS layout, try experimenting with flexbox and grid to create responsive and flexible designs. These layout models are essential tools for building modern, adaptable web pages.