GridMasterpiece 🎨

Hey, I made this! Welcome to GridMasterpiece, a project where I’ve taken the power of CSS Grid and used it to create a digital canvas inspired by the legendary Piet Mondrian. This project brings Mondrian’s geometric art into the world of web design, blending the world of grids and colors with modern web development. Get ready to dive into a fun experiment with CSS Grid, primary colors, and bold design choices.

🌈 What's Inside:

• Grid Layout: Learn how I used CSS Grid to create a structured, flexible design. The layout is defined by grid-template-columns and grid-template-rows, letting you control the flow and position of the blocks just like an artist arranging shapes on a canvas.
• Colorful Blocks: Each block in the grid is filled with vibrant colors, drawing inspiration from Mondrian's famous red, blue, yellow, and white blocks. These elements are like puzzle pieces waiting to fit together in perfect harmony.
• Creative Experiment: This project is all about pushing the limits of CSS Grid. Play around with different grid settings, color combinations, and positions to create your own Mondrian-inspired masterpiece.

🎮 Activity - Make Your Own Grid Art:

1. Clone this repo and open the index.html file in your browser.
2. Modify the Layout: Tweak the number of columns and rows in the .container class. Test how changes in layout affect the overall design.
3. Play with Colors: Switch up the background colors of .item classes, drawing from Mondrian's color palette. Bold reds, blues, yellows, whites, and blacks—you have the power to transform the design.
4. Get Creative with Grid Areas: Use grid-column and grid-row to place each element exactly where you want it. Create your own compositions, balancing the grid with your chosen colors and shapes.
5. Show Off Your Art: Once you’ve created a design you love, push it to the repo and share it with everyone. I’d love to see your own CSS Grid creations!

📌 Getting Started:

1. Clone the repository:

   git clone https://github.com/saadhtiwana/GridMasterpiece.git

2. Open index.html in your favorite browser.
3. Start exploring the grid, and make it your own.

🖌 Colors Used:

• Red (#E72F24)
• Blue (#004592)
• Yellow (#F9D01E)
• White (#F0F1EC)
• Black (#232629)

🎨 Mondrian’s Influence:

Piet Mondrian was a pioneer of geometric abstraction and a master of minimalism. His art focuses on primary colors and grids, breaking things down into simple, geometric shapes. By drawing inspiration from his works, this project aims to translate his principles of abstraction into the digital world using CSS Grid. It’s all about creating harmony through structure, color, and clean lines.

🚀 Have Fun:

This isn’t just about learning CSS Grid—it’s about playing with color, design, and creativity. Whether you’re a web dev or just into art, this project is the perfect place to mix code with creativity and have a blast doing it!

---

Let’s make some grid art! 🎉