The aim of Labwork 2 was to rebuilt the site using:
- FlexBox css;
- Grid css;
- No Grid css & No FlexBox css;
My aim was to reconstruct the layout, which will be adequate to the rules above. Make diffferent css approaches at the main page.
- Designed for one-dimensional layouts, like rows or columns.
- Great for aligning and distributing elements in a single direction.
- Ideal for responsive designs and dynamic content.
- Useful for variable-sized items that adapt to available space.
- Perfect for centering elements within a container.
- Well-suited for navigation menus, toolbars, and linear layouts.
- Offers control over the order of elements, regardless of the source order.
- Designed for two-dimensional layouts with rows and columns.
- Ideal for complex grid-based layouts.
- Offers precise control over element placement and alignment in both dimensions.
- Perfect for multi-column, multi-row layouts with equal or responsive tracks.
- Excellent for creating magazine-style layouts, card grids, and intricate designs.
- Allows naming of grid areas and layout definition using grid-template-areas.
- Well-suited for larger, structured page layouts.
- Simple, Linear Layouts: If your layout is straightforward and linear, without complex positioning.
- Legacy Browser Support: When you need to support older browsers lacking Grid or Flexbox support.
- Minimal Styling Requirements: For minimalistic designs with basic layout needs.
- Content Flow Alignment: When the content's natural flow aligns with the desired visual layout.
- Non-Specific Use Cases: In situations where Grid or Flexbox are not the most efficient choice for specific design requirements.
- One-Dimensional Layouts: Using Flexbox for simpler layouts in a single row or column.
- Responsive Design: Flexbox simplifies responsive layouts.
- Complexity: Flexbox is often more practical for simpler designs.
- Legacy Browser Support: Flexbox has broader compatibility with older browsers.
