DEV Community

Dharan Ganesan
Dharan Ganesan

Posted on

Day 64: CSS layouts

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;
}
Enter fullscreen mode Exit fullscreen mode

🌟 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;
}
Enter fullscreen mode Exit fullscreen mode
  • ℹ️ 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;
}
Enter fullscreen mode Exit fullscreen mode
  • ℹ️ 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;
}
Enter fullscreen mode Exit fullscreen mode
  • ℹ️ 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;
}
Enter fullscreen mode Exit fullscreen mode
  • ℹ️ 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;
}
Enter fullscreen mode Exit fullscreen mode
  • ℹ️ 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;
}
Enter fullscreen mode Exit fullscreen mode

📌 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;
}
Enter fullscreen mode Exit fullscreen mode

📌 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;
}
Enter fullscreen mode Exit fullscreen mode

📌 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;
}
Enter fullscreen mode Exit fullscreen mode

📌 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;
}
Enter fullscreen mode Exit fullscreen mode

🌟 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;
}
Enter fullscreen mode Exit fullscreen mode

🌟 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

Top comments (2)

Collapse
 
hasanelsherbiny profile image
Hasan Elsherbiny

this is really good series , keep going

Collapse
 
antoniomarques profile image
António Marques

thank you for sharing this information. i learned something new. the knowledge is continuous. I'm loving this series.