Layout
Our layout system provides a set of principles and guidelines for structuring content and creating consistent user interfaces. It ensures that our designs are intuitive, scalable, and maintainable across all platforms.
Grid System
Responsive Columns
Our grid system is based on a 12-column layout that adapts to different screen sizes. Use the following classes to control the number of columns:
grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5Column Spanning
You can also span columns to create wider elements. Use the following classes to control column spanning:
col-span-1 sm:col-span-2 md:col-span-3 lg:col-span-4 xl:col-span-5Responsive Gaps
Control the spacing between columns and rows using responsive gap utilities:
gap-4 md:gap-6 lg:gap-8Flexbox Utilities
Flex Direction
Control the direction of flex items using these classes:
flex flex-row flex-colJustify Content
Control the alignment of flex items along the main axis:
justify-start justify-center justify-end justify-between justify-around justify-evenlyAlign Items
Control the alignment of flex items along the cross axis:
items-start items-center items-end items-stretch items-baselineResponsive Layouts
Stacked-to-Side-by-Side
Stack elements vertically on mobile, then display them side-by-side on larger screens:
Column 1
Content for column 1
Column 2
Content for column 2
flex flex-col md:flex-row gap-4Column Dropping
Drop columns on smaller screens to prioritize content and improve readability. This pattern is useful for complex layouts with columns dropped and their content rearranged beneath the remaining columns.
Column 1
Content for column 1
Column 2
Content for column 2
grid grid-cols-1 md:grid-cols-3 gap-4md:col-span-2Best Practices
Use a Consistent Grid
Establish a consistent grid system to create visual harmony and alignment across your interface.
Prioritize Content
Use layout to guide the user's attention and prioritize important content.
Maintain White Space
Ensure adequate white space around elements to improve readability and reduce visual clutter.
Test on Multiple Devices
Test your layouts on a variety of devices and screen sizes to ensure they adapt properly.