Robot Grid Builder | code.sinau.dev

🤖 What we're building today: My Robot Factory Grid

In Poster Studio and Flex Layout you learned how to arrange things in a row with Flexbox. Today you learn an even stronger superpower: CSS Grid! 🏗️

What's a grid? Think of a tray of cupcakes — it has rows and columns that keep everything neatly in place. CSS Grid does the same for your webpage: it creates a 2D layout where you decide how many columns and how much space between them! Change one number and your whole layout rearranges like magic! 🪄

🔗 In Flex Layout you used display: flex to arrange things in a line. Today display: grid gives you rows AND columns — a whole 2D grid of robot goodness! ⚙️

● ● ● robot-grid.css CSS

factory grid preview LIVE

🤖 Robot Grid Builder

In Poster Studio you made a poster with CSS. In Flex Layout you arranged things in a row. Today you level up with CSS Grid — the most powerful layout tool! 🏗️

⚙️ CSS Grid Toolkit

display: grid; /* ⚡ turns on the grid! */

grid-template-columns: repeat(3, 1fr); /* 3 equal columns */

gap: 12px; /* space between items */

/* grid-template-columns = HOW MANY columns (repeat(2) = 2 cols) */

/* 1fr = "one fraction" — each column gets equal space */

/* gap = breathing room between robots 🤖 */

Change ONE number → the whole grid rearranges! ✨

🏗️grid is like a box of chocolates — rows AND columns! Change the column count and watch the robots rearrange!

✏️Edit the teal boxes in the code → the grid updates live! Hit ✓ Check after each step.

👀Watch how the grid-info below the preview tells you exactly what CSS properties are active!

🤖 What we're building today: My Robot Factory Grid

🤖 Robot Grid Builder

🎉 Factory Manager!