Section 6: CSS Flexbox and Grid

Lesson 1: Introduction to Flexbox

Flexbox is a powerful layout model that simplifies the design of complex layouts and aligns content within containers. This lesson provides an introduction to Flexbox, covering the flex container and flex items, as well as alignment and justification options.

1.1 Flex Container and Flex Items

Flexbox is applied to a container and its direct children become flex items.

.container {

    display: flex; /* Establishes a flex container */

}

.item {

    flex: 1; /* Indicates flexibility of the item */

}

1.2 Aligning and Justifying Content

Flexbox provides properties for aligning items along the main and cross axes.

Align Items (cross axis):

.container {

    align-items: center; /* Align items vertically */

}

Justify Content (main axis):

.container {

    justify-content: space-between; /* Distribute space between items */

}

Lesson 2: CSS Grid Layout

CSS Grid Layout offers a two-dimensional grid-based layout system. This lesson introduces the grid container, grid items, and creating responsive grid layouts.

2.1 Grid Container and Grid Items

Define a grid container and its children become grid items. 

.container {

    display: grid; /* Establishes a grid container */

    grid-template-columns: repeat(3, 1fr); /* Three equal columns */

}

.item {

    grid-column: span 2; /* Item spans two columns */

}

2.2 Creating Responsive Grid Layouts

Grid layouts adapt to different screen sizes using media queries.

@media screen and (max-width: 600px) {

    .container {

        grid-template-columns: 1fr; /* Single column for small screens */

    }

}

Understanding Flexbox and Grid layouts allows for efficient and responsive webpage designs. In the upcoming sections, we'll explore advanced layout techniques and practical use cases.