Ollie Theme Academy

Creating Layouts

Block widths in constrained layouts

Traditional CSS centers content by setting container width and using auto margins. WordPress takes a different approach: containers stay full-width while direct descendants receive width restrictions through descendant selectors.

This approach uses .wp-block-group > * style selectors to target direct children with width and margin settings. The container remains 100% width while inner blocks get centering and width constraints applied individually.

Wide and full alignments work by overriding the default width restrictions with larger max-widths or removing width constraints entirely. This system provides three distinct width zones: content, wide, and full.

Understanding this descendant selector approach explains why WordPress layouts work differently from traditional CSS – you’re working within a system designed for flexible content width management rather than container-based restrictions.

Back to: Ollie Theme Academy > Creating Layouts