auto-claude: 3.2 - Add conceptual explanations to CSS Grid lessons

- Added 'concept' objects to all 6 Grid lessons
- Explanations cover 2D grid system, tracks, and cell placement
- ASCII diagrams illustrate grid layouts, spanning, and overlapping
- Clear container vs item distinctions for each property
- Lessons: grid basics, template areas, spanning, auto-fit, alignment, overlapping
- All concepts follow schema (explanation required, diagram and containerVsItem optional)
- JSON validated successfully

lessons/grid.json

@@ -18,6 +18,11 @@
 			"codeSuffix": "",
 			"solution": ".grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 1rem;\n}",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "CSS Grid is a 2D layout system that divides space into rows and columns, called tracks. Unlike Flexbox which flows in one direction, Grid controls both axes simultaneously. The 1fr unit creates flexible tracks that share available space equally, while gap adds spacing between grid cells without affecting the outer edges.",
+				"diagram": "Grid with 3 columns (tracks)\n\n┌───────────────────────────────┐\n│  GRID CONTAINER               │\n│  ┌───┐ ┌───┐ ┌───┐           │\n│  │ 1 │ │ 2 │ │ 3 │  Row 1    │\n│  └───┘ └───┘ └───┘           │\n│    ↑     ↑     ↑             │\n│   1fr   1fr   1fr (equal)    │\n│  ┌───┐ ┌───┐ ┌───┐           │\n│  │ 4 │ │ 5 │ │ 6 │  Row 2    │\n│  └───┘ └───┘ └───┘           │\n│  ← gap between cells →        │\n└───────────────────────────────┘",
+				"containerVsItem": "display: grid, grid-template-columns, and gap are all CONTAINER properties. The parent defines the grid structure and spacing, while children automatically flow into grid cells."
+			},
 			"validations": [
 				{
 					"type": "contains",
@@ -72,6 +77,11 @@
 			"codeSuffix": "\n}\n\n/* Define which element goes in which grid area */\n.header {\n  grid-area: header;\n}\n\n.sidebar {\n  grid-area: sidebar;\n}\n\n.content {\n  grid-area: content;\n}\n\n.footer {\n  grid-area: footer;\n}",
 			"solution": "grid-template-areas:\n    \"header header\"\n    \"sidebar content\"\n    \"footer footer\";",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "Grid template areas let you create visual ASCII-art layouts that mirror your design. Each string represents a row, and each name represents a column. When the same name appears multiple times in a row or column, that element spans across those cells. This makes complex layouts readable and maintainable.",
+				"diagram": "grid-template-areas layout\n\n┌─────────────────────────┐\n│ \"header   header\"       │\n│ ┌─────────────────────┐ │\n│ │      Header         │ │\n│ └─────────────────────┘ │\n│                         │\n│ \"sidebar  content\"      │\n│ ┌──────┐ ┌────────────┐│\n│ │Side- │ │   Main     ││\n│ │ bar  │ │  Content   ││\n│ └──────┘ └────────────┘│\n│                         │\n│ \"footer   footer\"       │\n│ ┌─────────────────────┐ │\n│ │      Footer         │ │\n│ └─────────────────────┘ │\n└─────────────────────────┘",
+				"containerVsItem": "grid-template-areas is a CONTAINER property that defines named regions. Items use grid-area (an ITEM property) to assign themselves to those regions."
+			},
 			"validations": [
 				{
 					"type": "contains",
@@ -104,6 +114,11 @@
 			"codeSuffix": "",
 			"solution": ".featured {\n  grid-column: span 2;\n  grid-row: span 2;\n}",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "Grid items can span across multiple cells using grid-column and grid-row with the span keyword. This lets individual items occupy more than one grid track in either direction. The grid automatically adjusts remaining items around the spanning element, flowing them into available cells.",
+				"diagram": "Grid with spanning item\n\n┌─────────────────────────┐\n│  ┌───┐ ┌───┐            │\n│  │ 1 │ │ 2 │            │\n│  └───┘ └───┘            │\n│  ┌─────────┐ ┌───┐     │\n│  │Featured │ │ 4 │     │\n│  │  (2x2)  │ └───┘     │\n│  │ span 2  │ ┌───┐     │\n│  │  cols & │ │ 5 │     │\n│  │  rows   │ └───┘     │\n│  └─────────┘            │\n│  ┌───┐ ┌───┐ ┌───┐     │\n│  │ 6 │ │ 7 │ │ 8 │     │\n│  └───┘ └───┘ └───┘     │\n└─────────────────────────┘",
+				"containerVsItem": "grid-column and grid-row are ITEM properties. Individual children control their own spanning behavior, while the container just defines the grid structure."
+			},
 			"validations": [
 				{
 					"type": "contains",
@@ -144,6 +159,11 @@
 			"codeSuffix": "",
 			"solution": ".cards {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));\n}",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "auto-fit with minmax creates responsive grids that automatically adapt to available space without media queries. minmax(10rem, 1fr) sets a minimum column width of 10rem and maximum of 1fr, while auto-fit creates as many columns as will fit. When there's extra space, columns expand to fill it. This creates truly fluid layouts.",
+				"diagram": "auto-fit responsive behavior\n\nWide viewport:\n┌──────────────────────────────┐\n│ ┌────┐ ┌────┐ ┌────┐ ┌────┐ │\n│ │ C1 │ │ C2 │ │ C3 │ │ C4 │ │\n│ └────┘ └────┘ └────┘ └────┘ │\n│ ┌────┐ ┌────┐               │\n│ │ C5 │ │ C6 │   (expands)   │\n│ └────┘ └────┘               │\n└──────────────────────────────┘\n\nNarrow viewport:\n┌──────────┐\n│ ┌──────┐ │\n│ │  C1  │ │\n│ └──────┘ │\n│ ┌──────┐ │\n│ │  C2  │ │ (fewer cols)\n│ └──────┘ │\n└──────────┘",
+				"containerVsItem": "grid-template-columns with auto-fit is a CONTAINER property. The container automatically calculates how many columns fit, and children flow into those columns without needing individual sizing."
+			},
 			"validations": [
 				{
 					"type": "contains",
@@ -187,6 +207,11 @@
 			"codeSuffix": "\n}",
 			"solution": "justify-items: center;\n  align-items: center;",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "Grid alignment works on two axes: justify-items controls horizontal positioning (inline axis), while align-items controls vertical positioning (block axis). These are CONTAINER properties that set the default alignment for all items within their assigned grid cells. Items can override this with justify-self and align-self.",
+				"diagram": "Grid item alignment\n\n┌─────────┬─────────┬─────────┐\n│         │         │         │\n│   ┌─┐   │   ┌─┐   │   ┌─┐   │\n│   │1│   │   │2│   │   │3│   │ ← centered\n│   └─┘   │   │ │   │   └─┘   │   in cells\n│         │   └─┘   │         │\n├─────────┼─────────┼─────────┤\n│         │         │         │\n│   ┌─┐   │   ┌─┐   │  ┌───┐  │\n│   │4│   │   │5│   │  │ 6 │  │\n│   └─┘   │   └─┘   │  └───┘  │\n│         │         │         │\n└─────────┴─────────┴─────────┘\n    ↑                   ↑\n  justify-items      align-items\n  (horizontal)       (vertical)",
+				"containerVsItem": "justify-items and align-items are CONTAINER properties that set default alignment for all children. Individual items can use justify-self and align-self (ITEM properties) to override."
+			},
 			"validations": [
 				{
 					"type": "property_value",
@@ -225,6 +250,11 @@
 			"codeSuffix": "\n}",
 			"solution": "grid-column: 1;\n  grid-row: 1;\n  z-index: 1;",
 			"previewContainer": "preview-area",
+			"concept": {
+				"explanation": "Unlike Flexbox's single-direction flow, Grid's 2D system allows multiple items to occupy the same grid cell by explicitly positioning them with grid-column and grid-row. When items overlap, z-index controls stacking order - higher values appear on top. This enables layered designs like image overlays, card effects, and complex compositions.",
+				"diagram": "Overlapping grid items\n\n┌─────────────────────────┐\n│ Grid Cell (1, 1)        │\n│                         │\n│  ┌──────────────────┐   │\n│  │ Base (z-index:0) │   │\n│  │  ┌────────────┐  │   │\n│  │  │  Overlay   │  │   │\n│  └──┤ (z-index:1)├──┘   │\n│     │   (on top) │      │\n│     └────────────┘      │\n│                         │\n│  Both items positioned  │\n│  at grid-column: 1,     │\n│  grid-row: 1            │\n└─────────────────────────┘",
+				"containerVsItem": "grid-column, grid-row, and z-index are all ITEM properties. Individual children control their own grid placement and stacking order independently."
+			},
 			"validations": [
 				{
 					"type": "property_value",