Dharan Ganesan

Posted on Oct 9, 2023

Day 64: CSS layouts

#webdev #frontend #100daysofcode #css

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.

.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

.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

.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

.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

.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

.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.

.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.

.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.

.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.

.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.

.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 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.

.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, 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