Scribd
Upload
7 views

CSS Gride &

CSS Grid is a two-dimensional layout system ideal for complex web layouts, while Flexbox is a one-dimensional system suited for aligning items along a single axis. Grid is used for structured layouts with precise control, whereas Flexbox is better for dynamic content and simple components. Combining both systems can lead to efficient web design solutions.

Uploaded by

pheaneng345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSS Gride &

CSS Grid is a two-dimensional layout system ideal for complex web layouts, while Flexbox is a one-dimensional system suited for aligning items along a single axis. Grid is used for structured layouts with precise control, whereas Flexbox is better for dynamic content and simple components. Combining both systems can lead to efficient web design solutions.

Uploaded by

pheaneng345
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

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

You might also like