Containers
Containers serve as structural elements within our design system, facilitating the organization and layout of content on digital interfaces. By leveraging the power of Flexbox and CSS Grid, we ensure flexibility, responsiveness, and consistency in our layout compositions.
Flexbox
Flexbox offers a powerful and intuitive way to create flexible layouts, allowing elements within a container to dynamically adjust their size, alignment, and order. When utilizing Flexbox containers, considerations for width configurations include: width options and character limit width.
| Property Name | Value | Class Name |
| display | flex | l-flex |
| flex-direction | row | l-flex-row |
| column | l-flex-column | |
| justify-content | space-between | l-flex-space-between |
| center | l-flex-center | |
| space-around | l-flex-space-around | |
| space-evenly | l-flex-space-evenly | |
| flex-wrap | wrap | l-flex-wrap |
| flex-flow | row wrap | l-flex-row-wrap |
| align-items | center | l-flex-center-items |
| flex-start | l-flex-start-items | |
| flex-end | l-flex-flex-end-tems | |
| align-content | center | l-flex-center-content |
| flex-start | l-flex-start-content | |
| flex-end | l-flex-end-content | |
| align-self | center | l-flex-center-self |
| flex-start | l-flex-start-self | |
| flex-end | l-flex-end-self | |
Grid
CSS Grid provides a robust layout system for creating two-dimensional grid-based designs, offering precise control over rows, columns, and the spacing between them. When using CSS Grid containers, considerations for width configurations include: width definition, grid gaps, and character limit widths.
| Property Name | Value | Class Name |
| display | grid | l-grid |
| gap | 1rem | l-grid-gap-1 |
| 2rem | l-grid-gap-2 | |
| grid-template-columns | repeat(2,1fr) | l-grid-cols-2 |
| repeat(3,1fr) | l-grid-cols-3 | |
| repeat(4, 1fr) | l-grid-cols-4 | |
| grid-template-rows | repeat(2,1fr) | l-grid-rows-2 |
| repeat(3,1fr) | l-grid-rows-3 | |
| repeat(4, 1fr) | l-grid-rows-4 | |
| justify-content | center | l-grid-justify-center |
| align-items | center | l-grid-align-center |
Width
Width plays a pivotal role in defining the visual structure and responsiveness of digital interfaces within our design system. By carefully considering and implementing width configurations, we ensure optimal usability, readability, and aesthetic appeal across various screen sizes and devices.
| Class Name | Values | |
| max-width-mobile | max-width: 90%; margin-left: auto; margin-right: auto; |
|
| full-width-wrapper | width: 100% | |
| text-width | margin-left: auto; margin-right: auto; max-width: 70ch; |
|
Visual Examples
Width plays a Now that we've explored the principles of layout design, including the versatile capabilities of Flexbox and CSS Grid, as well as considerations for width configurations, let's put theory into practice. In this section, you'll discover real-world examples and implementations of these concepts.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.