layout

PreferenceKey enables child views to pass data up to ancestors, complementing the typical parent-to-child flow. I define a custom preference key by conforming to PreferenceKey protocol with a defaultValue and reduce method that combines multiple value

Flexbox provides one-dimensional layout for rows or columns. I use display: flex on containers to enable flexbox. The flex-direction property controls main axis direction (row, column, row-reverse, column-reverse). The justify-content property aligns

CSS Grid provides two-dimensional layout control for rows and columns simultaneously. I use display: grid to create grid containers. The grid-template-columns and grid-template-rows properties define track sizes. The fr unit distributes available spac

GeometryReader provides parent view size and coordinates, enabling dynamic layouts that adapt to available space. The reader passes a GeometryProxy with size and coordinate space info. I use it for responsive designs—calculate grid columns based on wi

CSS positioning controls element placement with static, relative, absolute, fixed, and sticky values. The position: relative creates a positioning context without removing from document flow. Using position: absolute removes elements from flow and pos