vaadin-layouts

Guide Vaadin 25 layout implementation with HorizontalLayout and VerticalLayout.

6|1|Updated Feb 24, 2026

Search Tags:#layout-alignment #vaadin-layouts #vaadin-25 #horizontal-layout #vertical-layout #layout-spacing

Ready to run

npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill vaadin-layouts-marcushellberg

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vaadin-layouts
Source: https://github.com/marcushellberg/vaadin-development-plugin/tree/main/skills/vaadin-layouts
Command: npx skills add https://github.com/marcushellberg/vaadin-development-plugin --skill vaadin-layouts-marcushellberg

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Vaadin developers often struggle to choose and configure the correct layout components (HorizontalLayout, VerticalLayout, and FlexLayout) for responsive, well-aligned UIs in Vaadin 25. This skill provides clear guidance on when to use each layout type, default behaviors, and common pitfalls around spacing, padding, and alignment.

Core Features & Use Cases

Clear decision criteria for selecting HorizontalLayout vs VerticalLayout vs FlexLayout.
Guidance on spacing, padding, margin, and alignment to produce predictable layouts.
Real-world examples and troubleshooting tips for common issues like overflow, wrapping, and responsive design in Vaadin Flow views.

Quick Start

Create a simple view that uses HorizontalLayout and VerticalLayout to arrange components with proper spacing and alignment.

Frequently Asked Questions about vaadin-layouts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I align items in a Vaadin 25 HorizontalLayout?▼

To align items in a Vaadin 25 HorizontalLayout, use the setAlignItems method to control vertical alignment and setJustifyContentMode to control horizontal distribution within the layout container.

What is the difference between HorizontalLayout and FlexLayout in Vaadin Flow?▼

HorizontalLayout and VerticalLayout are pre-configured for single-direction arrangements, while FlexLayout provides raw CSS flexbox control for custom responsive designs and complex wrapping scenarios.

How to fix spacing and padding issues in Vaadin 25 layouts?▼

Fix spacing and padding issues in Vaadin 25 layouts by explicitly calling setSpacing and setPadding methods, as default behaviors changed in recent versions and often require manual configuration.

Why are my Vaadin Flow components overflowing the screen?▼

Vaadin Flow components overflow the screen when content exceeds container width; use setWrap to enable wrapping, or adjust setJustifyContentMode to shrink or distribute items properly.

When should I use VerticalLayout over FlexLayout in Vaadin?▼

Use VerticalLayout in Vaadin when stacking components top-to-bottom with standard spacing and padding, and choose FlexLayout when you need custom flexbox properties or mixed alignment directions.