Layout (Flexbox & Grid)

Flexbox and Grid are the two most powerful tools available for building modern web layouts.

1. Flexbox (Flexible Box)

A tool designed for one-dimensional layouts (either as a row or a column).

Flex Container (Parent) Properties

• display: flex;: Activates Flexbox.
• flex-direction: Sets the alignment direction (row, column).
• justify-content: Aligns items along the main axis (center, space-between, space-around).
• align-items: Aligns items along the cross axis (center, flex-start, flex-end).

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

2. Grid Layout

A tool designed for two-dimensional layouts (handling both rows and columns simultaneously). It is exceptionally useful for creating rigid grid systems.

.grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* Divide into 3 columns */
    grid-template-rows: auto 300px;
    gap: 10px; /* Space between grid items */
}

3. Position Property

Used to position elements specifically or overlap them.

• static: The default value.
• relative: Positions the element relative to its normal position.
• absolute: Positions the element relative to its nearest positioned ancestor (an ancestor whose position is not static).
• fixed: Positions the element relative to the browser window (Viewport).
• sticky: Keeps the element fixed at a specific position during scrolling once it reaches a certain point.

4. Responsive Web Design (Media Queries)

Changes styles based on the screen size.

@media (max-width: 768px) {
    /* Styles applied specifically on mobile screens */
    .container {
        flex-direction: column;
    }
}

In the next section, we will look at modern CSS trends and Tailwind CSS.