{
"$schema": "../schemas/code-crispies-module-schema.json",
"id": "grid",
"title": "CSS Grid",
"description": "Master the grid layout system for complex two-dimensional layouts",
"difficulty": "intermediate",
"lessons": [
{
"id": "grid-1",
"title": "Grid Container",
"description": "CSS Grid is a two-dimensional layout system, meaning it can handle both columns AND rows simultaneously. While Flexbox excels at one-dimensional layouts (a single row or column), Grid shines when you need precise control over both dimensions.
How it works: Set display: grid on a container. Then define your column structure with grid-template-columns. The fr unit represents a fraction of available space.
Key properties:
• grid-template-columns – Defines column sizes
• repeat(3, 1fr) – Creates 3 equal columns
• gap – Adds spacing between grid cells
.grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n}",
"task": "Add display: grid, grid-template-columns: repeat(3, 1fr), and gap: 1rem to .grid.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .item { background-color: #9b59b6; color: white; padding: 1.25rem; text-align: center; font-weight: bold; }",
"sandboxCSS": ".grid { border: 0.125rem dashed #ccc; padding: 1rem; }",
"codePrefix": "/* Create a grid with 3 equal columns and gap */\n",
"initialCode": "",
"codeSuffix": "",
"solution": ".grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 1rem;\n}",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": ".grid",
"message": "Use the .grid class selector",
"options": {
"caseSensitive": false
}
},
{
"type": "property_value",
"value": {
"property": "display",
"expected": "grid"
},
"message": "Set display: grid",
"options": {
"exact": true
}
},
{
"type": "regex",
"value": "grid-template-columns:\\s*repeat\\(\\s*3\\s*,\\s*1fr\\s*\\)",
"message": "Set grid-template-columns: repeat(3, 1fr)",
"options": {
"caseSensitive": false
}
},
{
"type": "property_value",
"value": {
"property": "gap",
"expected": "1rem"
},
"message": "Set gap: 1rem",
"options": {
"exact": true
}
}
]
},
{
"id": "grid-2",
"title": "Grid Template Areas",
"description": "Use named grid areas to create visual layouts that are easy to understand.",
"task": "Add grid-template-areas to create a layout with header spanning full width, sidebar and content in middle, and footer spanning full width.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .page > div { padding: 1.25rem; color: white; text-align: center; font-weight: bold; } .header { background-color: #e74c3c; } .sidebar { background-color: #3498db; } .content { background-color: #2ecc71; } .footer { background-color: #f39c12; }",
"sandboxCSS": ".page { border: 0.125rem dashed #ccc; padding: 1rem; height: 25rem; }",
"codePrefix": "/* Create a layout using grid-template-areas */\n.page {\n display: grid;\n grid-template-columns: 12rem 1fr;\n grid-template-rows: auto 1fr auto;\n gap: 1rem;\n \n /* Add your grid-template-areas code below */\n",
"initialCode": "",
"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",
"validations": [
{
"type": "contains",
"value": "grid-template-areas",
"message": "Use the grid-template-areas property",
"options": {
"caseSensitive": false
}
},
{
"type": "regex",
"value": "grid-template-areas:\\s*['\"]header\\s+header['\"]\\s*['\"]sidebar\\s+content['\"]\\s*['\"]footer\\s+footer['\"]",
"message": "Create areas: \"header header\" \"sidebar content\" \"footer footer\"",
"options": {
"caseSensitive": false
}
}
]
},
{
"id": "grid-3",
"title": "Spanning Grid Cells",
"description": "Make grid items span multiple grid cells horizontally or vertically.",
"task": "Add grid-column: span 2 and grid-row: span 2 to .featured to span 2x2 cells.",
"previewHTML": "",
"previewBaseCSS": "body { font-family: system-ui, -apple-system, sans-serif; padding: 1.25rem; } .item { background-color: #9b59b6; color: white; padding: 1.25rem; text-align: center; font-weight: bold; } .featured { background-color: #e74c3c; }",
"sandboxCSS": ".grid { border: 0.125rem dashed #ccc; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }",
"codePrefix": "/* Make the featured item span 2x2 cells */\n",
"initialCode": "",
"codeSuffix": "",
"solution": ".featured {\n grid-column: span 2;\n grid-row: span 2;\n}",
"previewContainer": "preview-area",
"validations": [
{
"type": "contains",
"value": ".featured",
"message": "Use the .featured class selector",
"options": {
"caseSensitive": false
}
},
{
"type": "regex",
"value": "grid-column:\\s*span\\s+2",
"message": "Set grid-column: span 2",
"options": {
"caseSensitive": false
}
},
{
"type": "regex",
"value": "grid-row:\\s*span\\s+2",
"message": "Set grid-row: span 2",
"options": {
"caseSensitive": false
}
}
]
},
{
"id": "grid-4",
"title": "Automatic Grid Placement",
"description": "Learn how to use auto-placement and auto-fit/auto-fill for responsive grid layouts.",
"task": "Add display: grid and grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) to .cards.",
"previewHTML": "Card 1
Card 2
Card 3
Card 4
Card 5
Card 6