Hey everyone! 👋
Remember Flexbox Labs? Well, it just got a whole lot better! 🎉
I’m incredibly excited to announce that Grids are now available in Flexbox Labs! This has been a long time coming, and I’m so happy to finally share it with you.
Dive in and start experimenting at: <a href="https://flexboxlabs.netlify.app/grid" target="_blank" rel="noopener nofollow">flexboxlabs.netlify.app/grid</a> (A custom domain is on the wishlist!)
This beta release is packed with features to help you master CSS grids:
<ul>
<li>Explore all the properties for grid containers and items.</li>
<li>Control the placement of grid items.</li>
<li>Visualize and manipulate grid lines.</li>
<li>Work with both implicit and explicit grid items.</li>
<li>And of course, you’ll still have access to all the original Flexbox Labs features.</li>
</ul>
This is a beta release, so your feedback is essential! Let me know what you find, what you love, and what could be improved. Contributions are always welcome!
If you love Flexbox Labs and want to support me in improving it, consider buying me a Coffee on <a href="https://buymeacoffee.com/prazzon" target="_blank" rel="noopener nofollow">bymeacoffee.com</a> Your support helps me dedicate time to this project and hopefully get that custom domain!
Here’s a sneak peek at what’s coming soon:
<ul>
<li>Grid line numbers for easier grid manipulation.</li>
<li>CSS box shadows.</li>
<li>CSS gradients.</li>
<li>Border-radius (especially working on perfect inner border-radius!)</li>
<li>And CSS transforms.</li>
</ul>
Thanks again for your support! Let me know what you think.

The official daily.dev web development community. Led by thought leaders and webdev experts. Join the Squad!

WebDev

Flexbox Labs now includes a Grid Playground with new features like grid container and item properties, grid item placement control, and grid line manipulation. This beta release aims to help users master CSS grids while still offering the original Flexbox Labs features. Upcoming updates include grid line numbers, CSS box shadows, gradients, border-radius, and CSS transforms. Feedback and support are welcomed.

I Finally built a Grid Playground with Awesome Animations

Great work
Feature Request: Add a device-responsive grid or flex layout for different screen sizes (desktop, laptop, tablet, mobile). This will be very helpful, allowing us to get the code snippet and use it easily.

Love this, nice intuitive way to visualize the CSS grid system

AMAZING Work ! Love the UX ! And very usefull ! Thanks !