Wilmington University Design System

Advanced Layouts

All column classes can be nested within each other to create multiple nested layers. For instance, the parent container may be .ColumnTwo and one of the nested divs may contain .ColumnThree to further break down the content within that child element.

Uneven Columns

There may be instances where the web team needs to create a more custom layout experience. In order to have more control over the columns, you can utilize the class .ColumnUneven on the parent container which will break the row into ten even columns. You can then use the class .Span-2 on nested items, where the number 2 can be replaced with any number up to 10, to control how wide a nested item will span. Additionally, you can control the nested item size depending on screen size. Classes .Span-10-sm .Span-7-md .Span-5-lg .Span-4-xl can all be applied to the same nested item in order to control the size on various screens. Not all screen size classes have to be applied. For instance, you may use .Span-3 .Span-2-xl to only alter the layout on very large screens. Without the -sm or -md classes the layout will breakdown to full width at 1023px screen size.