Day 64: CSS layouts
Tags: webdev, frontend, 100daysofcode, css
Published: 2023-10-09 14:32:05

In this article, we'll explore key CSS concepts and techniques that helps you to craft layouts. Let's get started! 🚀

## 🌊 Floats: The Classic Layout Technique

Floats were once the go-to choice for creating complex layouts. They push elements to one side of their containing element, allowing text and other elements to wrap around them. Although they've fallen out of favor for many use cases, they still have some valuable applications.

### How Floats Work
Floats are applied using the `float` property, with values like 'left' or 'right'. This property pulls an element to the specified direction until it encounters the edge of its containing element or another floated element.

```css
.example {
  float: left;
}
```

🌟 **Example**: Imagine floating an image of a boat to the left, causing text to wrap around it like water around a boat.

📌 **Tip**: Floats are useful for creating magazine-style layouts with text flowing around images.


## 🎭 Positioning Types: A Foundation for Layout


Positioning in CSS is the art of precisely placing elements within the layout. Each position property has its unique characteristics, and mastering them is crucial for crafting sophisticated and responsive designs.

#### 2.1 **Static Positioning: The Default**

```css
.element {
   position: static;
}
```

- ℹ️ **Behavior**
  - Elements with `position: static;` are positioned according to the normal flow of the document.
  - They ignore the `top`, `right`, `bottom`, and `left` properties.

- 💡 **Usage**
  - Default positioning for most elements.
  - Rarely explicitly set unless to override a previous rule.

#### 2.2 **Relative Positioning: Offsetting from Normal Flow**

```css
.element {
   position: relative;
   top: 10px;
   left: 20px;
}
```

- ℹ️ **Behavior**
  - `position: relative;` allows you to move an element relative to its normal position.
  - The element still occupies its original space in the document flow.

- 💡 **Usage**
  - Creating subtle adjustments without affecting the overall layout.
  - Serving as a container for absolutely positioned elements.

#### 2.3 **Absolute Positioning: Relative to the Nearest Positioned Ancestor**

```css
.element {
   position: absolute;
   top: 50px;
   left: 30px;
}
```

- ℹ️ **Behavior**
  - Positioned relative to the nearest positioned ancestor (instead of the normal flow).
  - If no positioned ancestor, it's relative to the initial containing block (often the `<html>` element).

- 💡 **Usage**
  - Creating overlays or pop-ups.
  - Positioning elements precisely within a container.

#### 2.4 **Fixed Positioning: Fixed in Viewport**

```css
.element {
   position: fixed;
   top: 0;
   right: 0;
}
```

- ℹ️ **Behavior**
  - Positioned relative to the viewport.
  - Stays fixed even when the page is scrolled.

- 💡 **Usage**
  - Creating persistent navigation bars.
  - Implementing "sticky" elements.

#### 2.5 **Sticky Positioning: A Hybrid**

```css
.element {
   position: sticky;
   top: 10px;
}
```

- ℹ️ **Behavior**
  - Acts like `relative` until it crosses a specified point during scrolling, then becomes `fixed`.

- 💡 **Usage**
  - Implementing sticky headers or sidebars.

## The CSS Display Property
The `display` property in CSS is a versatile tool that determines how an element should be rendered. This property can take on various values, each influencing the layout and behavior of the targeted element. In this section, we'll explore four key values: `block`, `inline`, `inline-block`, and `none`.

#### 3.1 **Block: Building Solid Structures**

The `display: block;` property transforms an element into a block-level container. Block-level elements start on a new line and take up the full width available. This makes them ideal for creating structural elements like divs and headings.


```css
.block {
   display: block;
   width: 200px;
   height: 100px;
   background-color: #3498db;
}
```

📌 **Tip**: Use block elements for structural components, such as divs or sections.

#### 3.2 **Inline: Flowing with the Text**

Conversely, `display: inline;` turns an element into an inline-level container. These elements don't start on a new line and only take up as much width as necessary. Inline elements are perfect for elements that should flow within a line of text, like spans or links.


```css
.inline {
   display: inline;
   margin-right: 10px;
   color: #e74c3c;
}
```

📌 **Tip**: Inline elements are great for small, non-breaking elements within a block.

#### 3.3 **Inline-Block: The Best of Both Worlds**

`display: inline-block;` combines features of both block and inline elements. The element is laid out as an inline element, but it retains block-like properties. This is particularly useful for creating elements like navigation menus.


```css
.inline-block {
   display: inline-block;
   width: 100px;
   height: 50px;
   background-color: #2ecc71;
}
```

📌 **Tip**: Use inline-block for elements that need to be block-level, yet sit inline with surrounding content.

#### 3.4 **None: Disappearing Act**

Setting `display: none;` hides the element from the page entirely. It's like making the element invisible. This is commonly used for dynamically toggling visibility through JavaScript.


```css
.hidden {
   display: none;
}
```

📌 **Tip**: Use `display: none;` to hide elements without affecting the layout.

## 🧩 Flex Layout: A Game-Changer

Flexbox is a powerful layout model designed for the efficient arrangement of elements in a single dimension - either horizontally or vertically. It's great for creating complex yet predictable layouts.

### How Flexbox Works
Flexbox is applied to a container element using `display: flex;`. The child elements inside the container, known as flex items, can be adjusted to distribute space, align, and reorder dynamically.

```css
.container {
  display: flex;
  justify-content: space-between;
}
```

🌟 **Example**: Imagine a puzzle where each piece (flex item) automatically adjusts to fit and create a complete picture (container).

📌 **Tip**: Flexbox simplifies the creation of equal-height columns and centering content both vertically and horizontally.

💡 **Usage**: It's widely used for navigation menus, card-based layouts, and aligning elements within a container.

[Flexbox Froggy](https://flexboxfroggy.com/) is an excellent resource for interactive learning.

## Grid Layout: Perfect for Two Dimensions

Grid layout takes CSS layout to the next level by allowing you to create two-dimensional layouts with rows and columns. It's ideal for creating complex, grid-based designs.

### 📦 How Grid Layout Works
Grid is applied to a container using `display: grid;`. You define rows and columns with the `grid-template-rows` and `grid-template-columns` properties, and then place items within the grid.

```css
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
}
```

🌟 **Example**: Imagine laying out items on a grid of shelves with adjustable rows and columns to fit your items perfectly.

📌 **Tip**: Grid layout simplifies creating responsive layouts where items rearrange themselves based on available space.

💡 **Usage**: Grid is used for creating complex forms, image galleries, and responsive page layouts.

For an engaging learning experience, check out [Grid Garden](https://cssgridgarden.com/), a game that teaches grid concepts.

## Grid vs Flex Layout

| Feature             | Flex Layout                                               | Grid Layout                                              |
|---------------------|-----------------------------------------------------------|-----------------------------------------------------------|
| Dimensions          | One-dimensional (row or column)                          | Two-dimensional (rows and columns)                      |
| Use Case            | Content-driven layouts, flexible box distribution       | Grids, complex layouts, precise control                  |
| Alignment           | Great for centering content vertically or horizontally   | Allows precise control over both row and column alignment|
| Responsiveness      | Automatically adjusts to available space                | Easily adapts to different screen sizes and orientations|
| Content Order       | Can rearrange elements easily with `order` property     | Allows precise control over the placement of elements   |
| Browser Support     | Widely supported, even in older browsers                | Supported in modern browsers, may require fallbacks     |