Grid explained
I found a pretty cool website which explains Grid with visuals https://grid.malven.co/
GRID
GRID: A simple visual cheatsheet for CSS Grid Layout
Learn all about the properties available in CSS Grid Layout through simple visual examples.
4 Replies
That's awesome. But what I think would make this even cooler is an input box where the grid code you paste/type in is explained and visualized with the yellow rectangles. A rectangle number selector + grid area setter would make a nice addition to this too.
This generator allows you to paste in your css and html and gives you a visualization or set each property with their inputs
https://grid.layoutit.com/
Same here
https://cssgridgenerator.io/
And this one doesn’t have a place to paste that I’ve found (looking around while on mobile so desktop might be different) but it’s cool that you can just visually define why cell you want a div in
https://cssgrid-generator.netlify.app/
Layoutit Grid — CSS Grids layouts made easy!
Quickly design web layouts, and get HTML and CSS code. Learn CSS Grid visually and build web layouts with our interactive CSS Grid Generator.
CSS Grid Generator
CSS Grid Generator - a user-friendly tool designed for web developers to effortlessly create customizable CSS grids for seamless web development.
thats pretty cool but as for responsiveness? do we just use media queries? for grid? its that simple?
You can use media queries or use the auto-fit or auto-fill keywords
I think this video at timestamp 18:47 should show it
https://youtu.be/sKFW3wek21Q?si=IJawvrC_2SrzAxqr
Kevin Powell
YouTube
Learn how to create a responsive CSS grid layout
A look at how we can make a dynamic, responsive grid using CSS, along with a dive into properties l like aspect-ratio, object-fit, and more.
🔗 Links
✅ The GitHub repo: https://github.com/kevin-powell/dynamic-grid-layout
✅ Andy Bells CSS reset: https://piccalil.li/blog/a-modern-css-reset/
✅ My Emmet video: https://www.youtube.com/watch?v=EhR...