The Unity UGUI Guide on the Layout System

Working with Layout Groups, Layout Elements and Content Size Fitters

This  38-page guide walks you step-by-step through building responsive, robust UI layouts. You’ll learn how Unity’s Layout Elements, Layout Groups (vertical, horizontal, grid and mixed) as well as Content Size Fitters work and how to set them up to create responsive and flexible layouts.

Things you will learn:

• What Layout Groups, Content Size Fitters, and Layout Elements do

Vertical Layout Group deep-dive (Chapter 1)

• Child order, Child Alignment, Padding vs Spacing
• Child Force Expand: what it actually does and when to leave it off
• Layout Properties: Min / Preferred / Flexible explained
• Using Child Scale (why to avoid non-1 scale)
• Control Child Size and how it overrides RectTransform
• Layout Element: setting Min/Preferred to protect/drive child sizing
• Making the container responsive
• Controlling growth direction of Content Size Fitter
• Building a resizable background
• Using spacer objects 
• Practical text/image/button sizing tips (overflow/truncate, centering, anchoring)

Combining groups & horizontal layouts (Chapter 2)

• Switching to Horizontal Layout Group
• Nesting a Vertical Layout Group inside horizontal one
• Overriding an inner group’s size
• Why Content Size Fitter under a Layout Group is problematic (warning & rebuild issues) and safer alternatives

Grid Layout Group essentials (Chapter 3)

• How Grid differs
• Constraint options (fixed row/column) and practical use
• Making a responsive grid: padding/spacing
• “Bento”/card patterns: nesting other layout groups as grid cells (and avoiding CSF on those children)
• Matching Grid Cell Size to complex child’s preferred size; debugging oddities

Bonus: Flexible sizing / proportions

• Flexible Width/Height to allocate proportional space (e.g., 30/70 split)
• Interaction with Child Force Expand, Control Child Size, and limitations per axis

Contains:

• 38-page PDF Guide
• Unity Package with an example scene

Version: This guide has been created with Unity 6 (and the Unity Package is for Version 6 as well)

Three example pages from the book. Lots of images, explanations and highlighted keywords to make finding the critical settings and infos easy.