The Human Universal Gridder (Hug) is a layout component with two main purposes:
- Create a grid that remains centered on the page and has leading and trailing columns of varying size.
- Handle subgrids when a Hug is nested within another Hug.
The image above shows the grid that gets created when a Hug is used. The number of columns varies according to the screen size: