← Lessons BUILDER PATH

🎨 Pixel Art

Lesson 20 of 20
🌊
Themed Universe
Ocean Lab
CSS Grid is like graph paper — arrange items in rows and columns! Build pixel-art sea creatures, color by color! 🐟
🎯 Missions Day ✦
…
…
…
● ● ● pixel-grid.css CSS 

  


  
  

    

      pixel stage
      LIVE
    

    

  








  

    

      
🌊 Ocean Mission Step 1 of 5

      
…

    

  

  

    
    
    
    
  

  

    💡 Hint: …
  







  

    
🎨 Pixel Art

    
In Button Builder you styled things with padding and border-radius. In Tag Match you learned HTML tags. Today you learn CSS Grid — a tool that arranges things in rows and columns, like graph paper or a chessboard! And you'll use it to build your own pixel art sea creature! 🐟

    

      
📐 CSS Grid Toolkit

      
.grid {

      
  display: grid;  // turns this into a grid container

      
  grid-template-columns: repeat(3, 40px);  // 3 columns, each 40px wide

      
  gap: 2px;  // space between cells

      
}

      
→ Each cell becomes a pixel that YOU color! Tap a cell to paint it!

    

    

      
📐display: grid turns any container into a grid. Like turning a blank page into graph paper!

      
🔲grid-template-columns sets how many columns (and rows). repeat(3, 40px) = 3 columns, each 40 pixels wide!

      
🎨Click a cell to paint it with your chosen color. Build a fish, a turtle, or anything you imagine!

      
✨Edit the gold box in the code → the grid updates live! Hit ✓ Check to complete each mission.