6. CSS Flexbox & CSS Grid Layouts
display: flex, flex-direction, justify-content, display: grid & responsive media queries
Module 1: CSS Flexbox Model (1D Layout)
Flexbox makes it easier to design flexible responsive layout structure without float or positioning.
Core Theory & Principles
- display: flex activates flex container.
- flex-direction: row or column.
- justify-content: flex-start, flex-end, center, space-between, space-around.
- align-items: flex-start, flex-end, center, stretch.
- gap: controls spacing between flex items.
Practical Key Takeaways
Mastering CSS Flexbox Model (1D Layout) builds fundamental development capability. Review practical code and outputs carefully.
💻 Practical Code Example - CSS Flexbox Model (1D Layout)
<div style="display: flex; justify-content: space-between; align-items: center; background: rgb(30, 41, 59); padding: 15px; border-radius: 8px; gap: 10px;">
<div style="background: rgb(56, 189, 248); color: rgb(15, 23, 42); padding: 15px; border-radius: 6px; font-weight: bold; flex: 1; text-align: center;">Flex Card 1</div>
<div style="background: rgb(74, 222, 128); color: rgb(15, 23, 42); padding: 15px; border-radius: 6px; font-weight: bold; flex: 1; text-align: center;">Flex Card 2</div>
<div style="background: rgb(192, 132, 252); color: rgb(15, 23, 42); padding: 15px; border-radius: 6px; font-weight: bold; flex: 1; text-align: center;">Flex Card 3</div>
</div>📤 Expected Output / Browser Rendered Result:
Output Verified Cleanly.
Module 2: CSS Grid Model (2D Layout)
CSS Grid offers a grid-based layout system, with rows and columns.
Core Theory & Principles
- display: grid activates grid container.
- grid-template-columns: defines column track sizes (e.g. repeat(3, 1fr)).
- grid-gap or gap: controls gutter spacing between grid cells.
Practical Key Takeaways
Mastering CSS Grid Model (2D Layout) builds fundamental development capability. Review practical code and outputs carefully.
💻 Practical Code Example - CSS Grid Model (2D Layout)
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 10px; background: rgb(15, 23, 42); padding: 15px; border-radius: 8px;">
<div style="background: rgb(30, 41, 59); color: white; padding: 15px; text-align: center; border-radius: 6px;">Cell 1</div>
<div style="background: rgb(30, 41, 59); color: white; padding: 15px; text-align: center; border-radius: 6px;">Cell 2</div>
<div style="background: rgb(30, 41, 59); color: white; padding: 15px; text-align: center; border-radius: 6px;">Cell 3</div>
</div>📤 Expected Output / Browser Rendered Result:
Output Verified Cleanly.