The LayX Layout component offers a highly flexible grid layout system with customizable columns, rows, and gaps. It includes responsive behaviors, enabling adjustable column spans and offsets at various breakpoints. This component is ideal for creating dynamic and structured layouts across all screen sizes.
To use the Layout component, apply the layout tag or .layout class for grid layouts. The default setup uses a 12-column grid, customizable via classes like .num-x-[number] and .num-y-[number] or CSS variables --num-x-[number] and --num-y-[number]. Media classes are also available to control layout on different screen sizes.
<layout>
<div class="x-6">Half-width column</div>
<div class="x-6">Another half-width column</div>
</layout>
or
<div class="layout">
<div class="x-6">Half-width column</div>
<div class="x-6">Another half-width column</div>
</div>
For layouts that span the viewport's full width with dynamic edge margins, use .edge. This edge-aligned option adjusts margins based on screen width and aspect ratio, making it suitable for designs requiring edge-to-edge alignment.
<layout class="edge">
<div class="x-14">full-width edge column</div>
<div class="x-6 xs-2">half-width column</div>
</layout>
LayX provides responsive utility classes such as .x-md-6 and .xs-md-6 to adapt column spans and starting points dynamically:
For nested layouts, use .sub, .sub-x, and .sub-y classes to achieve subgrid behavior and finer control.
<div class="layout">
<div class="x-3 y-2"> Spanning columns and rows</div>
<div class="xs-2 ys-1"> Starting offset</div>
</div>
The Layout component provides a robust, responsive grid system that supports both content-centered and edge-aligned designs, ideal for building complex layouts with precision.