Week 2 Day 2: CSS Flexbox and Grid layout systems

Week-2/Day-2/css-flexbox-grid.md

@@ -0,0 +1,35 @@
+## CSS Layout Systems
+
+### CSS Flexbox
+Flexbox is a one-dimensional layout system used to align elements in rows or columns.
+
+### Key properties:
+display: flex
+flex-direction
+justify-content
+align-items
+gap
+
+### Use cases:
+Navigation bars
+Centering content
+Cards layout
+
+### CSS Grid
+Grid is a two-dimensional layout system used for complex page layouts.
+
+### Key properties:
+display: grid
+grid-template-columns
+grid-template-rows
+gap
+
+### Use cases:
+Page layouts
+Dashboards
+Galleries
+
+### Flexbox vs Grid
+Flexbox → one direction (row OR column)
+Grid → rows AND columns
+Flexbox for components, Grid for pages