CSS GRID & FLEXBOX USAGE
TEAM MEMBER
GROUP
TABLE CONTENT
1. What's CSS Grid & Flexbox?
2. When do we use Grid & Flexbox?
3. Key concepts of CSS Grid
4. Key concepts of CSS Flexbox
5. Compare between CSS Grid & Flexbox
6. Conclusion
7. References
8. Q & A
1. WHAT'S CSS GRID & FLEXBOX?
CSS Grid is a layout system in CSS designed for creating complex, two-
dimensional web layouts. It provides rows and columns, allowing precise
placement of elements.
CSS Flexbox is a one-dimensional layout system in CSS. It's ideal for distributing
space and aligning items along a single axis (row or column).
2. WHEN DO WE USE GRID & FLEXBOX?
• CSS Grid:
⚬ For layouts that involve both rows and columns (e.g., web page layouts,
dashboards).
⚬ When you need more control over the positioning of elements
• CSS Flexbox:
⚬ For layouts along a single axis (horizontal or vertical).
⚬ For aligning and distributing space among elements in a container (e.g.,
navigation bars, buttons).
3. KEY CONCEPTS OF CSS Grid
⚬ Grid Container & Items: Define a container as a grid (display: grid) and its child
elements as grid items.
⚬ Grid Lines, Tracks, and Areas:
￭ Lines: Define boundaries.
￭ Tracks: Rows or columns.
￭ Areas: Named regions formed by intersecting tracks.
⚬ Properties:
￭ grid-template-rows & grid-template-columns: Define the structure of rows and
columns.
￭ grid-template-areas: Assign grid items to specific regions.
4. KEY CONCEPTS OF CSS Flexbox
• CSS Flexbox:
⚬ Flex Container & Items: Define a container as a flex container (display: flex) and its
child elements as flex items.
⚬ Main Axis & Cross Axis: Items align along the main axis (defined by flex-direction)
and cross axis (perpendicular).
⚬ Properties:
￭ justify-content: Aligns items along the main axis.
￭ align-items & align-self: Align items along the cross axis.
￭ flex-grow, flex-shrink, and flex-basis: Control how items grow, shrink, or take up
space.
5. COMPARING CSS GRID & FLEXBOX
CSS GRID AND FLEXBOX
CSS Grid CSS Flexbox
Two-dimensional (rows & columns) One-dimensional (row or column)
Better for structured, grid-based layouts Better for dynamic content
alignment
Flexible alignment and space
Precise control over placement
distribution
Simple components (e.g.,
Complex layouts (e.g., web pages)
navigation bars)
SAMPLE LAYOUT OF CSS GRID AND FLEXBOX
6. CONCLUSION
Both CSS Grid and Flexbox are essential tools for modern web
design.
• Use Grid for complex, two-dimensional layouts.
• Use Flexbox for simpler, one-dimensional layouts.
• Combining both often yields the most efficient designs.
7. REFERENCES
CSS Grid: https://www.w3schools.com/css/css_grid.asp
CSS Flexbox: https://www.w3schools.com/css/css3_flexbox.asp
THANK
YOU
