codeharborhub · ajay-dhangar · Aug 30, 2026 · Aug 30, 2026
@@ -0,0 +1,14 @@
+{
+  "label": "Module 3: Box Model & Layout Systems",
+  "position": 4,
+  "link": {
+    "type": "generated-index",
+    "title": "Module 3: Box Model & Layout Systems",
+    "description": "Master the fundamentals of the CSS Box Model, sizing behaviors, positioning context, Flexbox alignment, and 2D Grid layouts.",
+    "slug": "/category/module-3-box-model-layouts"
+  },
+  "customProps": {
+    "moduleNumber": 3,
+    "description": "Core layout algorithms powering responsive web interfaces."
+  }
+}
@@ -0,0 +1,178 @@
+---
+id: flexbox-masterclass
+title: "Flexbox Masterclass"
+sidebar_label: "Lecture 10"
+sidebar_position: 3
+description: Master the 1D Flexible Box Layout algorithm—main vs. cross axes, flex container flexibilities, alignment logic, and real-world responsive design patterns.
+tags:
+  - CSS
+  - Flexbox
+  - Layout
+  - Web Development
+  - CodeHarborHub
+---
+
+The **Flexible Box Layout Module (Flexbox)** is a one-dimensional layout model designed to distribute space along a single axis (row or column) and align items predictably within a container—even when their sizes are dynamic or unknown.
+
+## 1. Dual-Axis Architecture
+
+Flexbox operates entirely around two perpendicular axes: the **Main Axis** and the **Cross Axis**.
+
+```
+            flex-direction: row (Default)
+
+    ┌───────────────────────────────────────────┐
+    │  Main-Start  ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─│─ ─►  Main-End  
+    │      │                                    │     (Main Axis)
+    │      │  ┌──────────┐  ┌──────────┐        │
+    │      │  │  Item 1  │  │  Item 2  │        │
+    │      ▼  └──────────┘  └──────────┘        │
+    │  Cross-End                                │
+    └───────────────────────────────────────────┘
+                   (Cross Axis)
+
+```
+
+### Direction & Axis Orientation
+
+The orientation of the main axis is controlled by the `flex-direction` property:
+
+| `flex-direction` | Main Axis Direction | Cross Axis Direction |
+| :--- | :--- | :--- |
+| `row` *(default)* | Left to Right (in LTR documents) | Top to Bottom |
+| `row-reverse` | Right to Left | Top to Bottom |
+| `column` | Top to Bottom | Left to Right |
+| `column-reverse` | Bottom to Top | Left to Right |
+
+## 2. Flex Container Alignment Properties
+
+The flex container governs how items are distributed across both axes.
+
+### Main Axis Alignment (`justify-content`)
+Controls how extra free space is distributed along the main axis:
+
+* `flex-start`: Items pack tightly toward the start edge.
+* `flex-end`: Items pack tightly toward the end edge.
+* `center`: Items align in the middle of the container.
+* `space-between`: First item at start, last item at end, remaining space distributed evenly between items.
+* `space-around`: Equal space on both sides of each item (outer edges get half-width space).
+* `space-evenly`: Equal space between items and container edges.
+
+### Cross Axis Alignment (`align-items` & `align-content`)
+* **`align-items`**: Aligns items along the cross axis within a single flex line.
+  * `stretch` *(default)*: Stretches items to fill cross-axis height/width.
+  * `center`: Center-aligns items along the cross axis.
+  * `flex-start` / `flex-end`: Align items to the start or end of the cross axis.
+  * `baseline`: Aligns items based on their text baseline.
+* **`align-content`**: Aligns multi-line flex tracks along the cross axis when `flex-wrap: wrap` is enabled.
+
+## 3. Flex Item Properties (`flex-grow`, `flex-shrink`, `flex-basis`)
+
+Flex items control their own individual flexibility using the shorthand `flex: <grow> <shrink> <basis>`.
+
+```css title="Shorthand Syntax"
+.item {
+  flex: 1 0 200px; /* grow: 1, shrink: 0, basis: 200px */
+}
+
+```
+
+### 1. `flex-basis`
+
+Defines the default size of an item **before** remaining free space is distributed. It accepts values like `auto`, `content`, pixels, or percentages.
+
+### 2. `flex-grow`
+
+Determines how much an item will grow relative to sibling items when positive free space exists along the main axis.
+
+$$
+\text{Flex Factor Share} = \frac{\text{Item Flex Grow Value}}{\sum \text{All Flex Grow Values}}
+$$
+
+### 3. `flex-shrink`
+
+Determines how much an item shrinks relative to sibling items when negative space (overflow) exists along the main axis.
+
+## Interactive Playground: Flexbox Alignment Engine
+
+Experiment with main axis distribution and item sizing mechanics in the live preview component below:
+
+<CodePreview
+defaultHtml={`
+<div class="flex-container">
+  <div class="flex-item item-1">Item 1 (flex: 1)</div>
+  <div class="flex-item item-2">Item 2 (flex: 2)</div>
+  <div class="flex-item item-3">Item 3 (flex: 1)</div>
+</div>
+`}
+defaultCss={`
+/* Base Flex Items */
+.flex-item {
+padding: 1rem;
+border-radius: 6px;
+color: #ffffff;
+font-family: system-ui, sans-serif;
+font-weight: 600;
+text-align: center;
+}
+
+/* Flexibility Distribution */
+.item-1 {
+flex: 1 1 120px;
+background-color: #2563eb;
+}
+
+.item-2 {
+flex: 2 1 120px; /* Takes twice the extra space of Item 1 */
+background-color: #059669;
+}
+
+.item-3 {
+flex: 1 1 120px;
+background-color: #d97706;
+}`}
+height="340px"
+/>
+
+## 4. Popular Flexbox Design Patterns
+
+### 1. The Perfect Centering Trick
+
+Centering an element vertically and horizontally requires only two properties on the container:
+
+```css
+.hero-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+```
+
+### 2. Sticky Footer Layout
+
+Ensure footers remain pushed to the bottom of the viewport even on short content pages:
+
+```css
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex: 1; /* Consumes all available vertical space */
+}
+
+```
+
+## Summary Reference Table
+
+| Property | Applied To | Default Value | Description |
+| --- | --- | --- | --- |
+| **`flex-direction`** | Container | `row` | Establishes the main axis orientation |
+| **`justify-content`** | Container | `flex-start` | Aligns items along the main axis |
+| **`align-items`** | Container | `stretch` | Aligns items along the cross axis |
+| **`flex-wrap`** | Container | `nowrap` | Controls line wrapping on overflow |
+| **`flex`** | Item | `0 1 auto` | Shorthand for `flex-grow`, `flex-shrink`, `flex-basis` |
+| **`align-self`** | Item | `auto` | Overrides container's `align-items` for a specific item |
@@ -0,0 +1,173 @@
+---
+id: css-grid-architecture
+title: "CSS Grid Architecture"
+sidebar_label: "Lecture 11"
+sidebar_position: 4
+description: "Master the 2D CSS Grid layout engine—grid containers, track sizing with fr units, explicit vs implicit grids, auto-fill/fit, and grid template areas."
+tags:
+  - CSS
+  - Grid
+  - Layout
+  - Web Development
+  - CodeHarborHub
+---
+
+Unlike Flexbox, which is primarily a one-dimensional layout system (rows or columns), **CSS Grid Layout** is a powerful two-dimensional layout engine. It enables developers to align elements along both rows and columns simultaneously with precise control over track sizing, placement, and spatial distribution.
+
+## 1. Grid Terminology & Dual-Axis Model
+
+To build layouts effectively with CSS Grid, you must understand its core structural components:
+
+```
+                  Grid Container
+    ┌─────────────────────────────────────────┐
+    │        Col Line 1   Col Line 2          │
+    │─── Line 1 ┌───────────┬───────────┐     │
+    │           │ Grid Cell │ Grid Cell │     │  Row Track
+    │─── Line 2 ├───────────┼───────────┤     │
+    │           │ Grid Cell │ Grid Cell │     │
+    │─── Line 3 └───────────┴───────────┘     │
+    └─────────────────────────────────────────┘
+                   Column Track
+
+```
+
+* **Grid Container:** The parent element defined with `display: grid` or `display: inline-grid`.
+* **Grid Item:** Direct child elements inside a grid container.
+* **Grid Line:** The horizontal and vertical dividing lines that separate tracks (numbered starting at `1`).
+* **Grid Track:** The space between two adjacent grid lines (a row or column).
+* **Grid Cell:** The single intersection unit of a row track and a column track.
+* **Grid Area:** Any rectangular space bounded by four grid lines containing one or more grid cells.
+
+## 2. Track Sizing & Fractional Units (`fr`)
+
+Grid tracks are defined on the container using `grid-template-columns` and `grid-template-rows`. 
+
+CSS Grid introduces the **Fractional Unit (`fr`)**, which represents a fraction of the available free space in the grid container after fixed tracks and gaps are computed.
+
+```css
+.container {
+  display: grid;
+  /* 3 Columns: 200px fixed, remaining space split 1:2 */
+  grid-template-columns: 200px 1fr 2fr;
+  /* 2 Rows: Fixed 80px top row, flexible bottom row */
+  grid-template-rows: 80px 1fr;
+  gap: 1rem;
+}
+
+```
+
+### The `repeat()` and `minmax()` Functions
+
+* **`repeat(count, track_size)`**: Replicates track patterns without manually typing values.
+* **`minmax(min, max)`**: Sets a flexible size range for grid tracks so they respond fluidly to viewport changes.
+
+```css
+/* Creates 4 equal columns of at least 150px, expanding up to 1fr */
+.grid-fluid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(150px, 1fr));
+}
+
+```
+
+## 3. Responsive Auto-Placement: `auto-fill` vs `auto-fit`
+
+Combining `repeat()`, `minmax()`, and automatic track repetition allows you to build responsive grids **without writing media queries**:
+
+```css
+.responsive-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+```
+
+| Keyword | Behavior When Extra Space Exists |
+| --- | --- |
+| **`auto-fill`** | Fills the row with as many tracks as possible. If extra space remains, it keeps **empty tracks** in the row. |
+| **`auto-fit`** | Fits existing tracks into the row. If extra space remains, it **collapses empty tracks to 0px** and stretches remaining items to fill the row. |
+
+## 4. Grid Template Areas
+
+Grid Template Areas allow you to map out page layouts using intuitive ASCII-art string representations directly in your CSS:
+
+```css
+.layout-container {
+  display: grid;
+  grid-template-columns: 240px 1fr;
+  grid-template-rows: auto 1fr auto;
+  grid-template-areas:
+    "header  header"
+    "sidebar main"
+    "footer  footer";
+  min-height: 100vh;
+}
+
+/* Assigning Children to Defined Areas */
+.site-header { grid-area: header; }
+.site-sidebar { grid-area: sidebar; }
+.site-main    { grid-area: main; }
+.site-footer { grid-area: footer; }
+
+```
+
+## Interactive Playground: Grid Track Architecture
+
+Experiment with two-dimensional grid layouts, item spanning, and area assignments in the live preview component below:
+
+<CodePreview
+defaultHtml={`
+<div class="grid-container">
+  <div class="grid-card area-header">Header</div>
+  <div class="grid-card area-sidebar">Sidebar</div>
+  <div class="grid-card area-main">Main Content</div>
+  <div class="grid-card area-footer">Footer</div>
+</div>
+`}
+defaultCss={`
+/* Base Card Styles */
+.grid-card {
+padding: 1rem;
+border-radius: 6px;
+color: #ffffff;
+font-weight: 600;
+display: flex;
+align-items: center;
+justify-content: center;
+}
+
+/* Named Area Assignments */
+.area-header {
+grid-area: header;
+background-color: #2563eb;
+}
+
+.area-sidebar {
+grid-area: sidebar;
+background-color: #059669;
+}
+
+.area-main {
+grid-area: main;
+background-color: #d97706;
+}
+
+.area-footer {
+grid-area: footer;
+background-color: #475569;
+}`}
+height="360px"
+/>
+
+## Summary Reference Table
+
+| Property / Syntax | Applied To | Description |
+| --- | --- | --- |
+| **`display: grid`** | Container | Activates the 2D grid layout context |
+| **`grid-template-columns`** | Container | Defines explicit column track sizes and quantities |
+| **`grid-template-rows`** | Container | Defines explicit row track sizes and quantities |
+| **`gap` / `grid-gap**` | Container | Sets horizontal and vertical gutters between tracks |
+| **`grid-column: 1 / -1`** | Item | Spans an item from line 1 to the last explicit line |
+| **`grid-area`** | Item | Assigns an item to a named area defined in `grid-template-areas` |