I’m wondering what grid containers and items do? I have just started to use grids and really impressed but wondering exactly how these work.
Are there any videos or references about how to use these? I have already watched the tutorials on the grid but it didn’t cover what these controls do - or the grid items for that matter. Any resources appreciated.
most of that is redundant to the grid editor that pops up when you hit CTRL-G
the items/content icon controls act the same as the one’s for flex box.
the GRID ITEM rules are how you control behavior of elements that exist on the grid (only 1st generation child elements are positioned on the grid).
tutorials for explaining the CSS rules for grid definition and behavior are out there, i’ve found these helpful
haven’t been thru that one, have you?
is it interactive on screen, or just slide presentation?
Yes, I took the course last year.
It’s a full course very well-structured and full of resources and videos lessons per topic that must you fallow along him. The author, Wes Bos, has made a lot of quality dev courses. Mozilla sponsored this guy course in order push css-grid usage as Firefox offers the best inspection tool for the grid.
Hi @excede,
So these two sections of the visual editor control the CSS grid styling. The sliders are a little deceiving because most of these controls mostly get used as text input. Most any tutorials on CSS grid will help you out. It is also good to have the active rules open so you can see what styles are applied when you typ in the various input boxes. About the best overview is from CSS tricks.
Thanks for your suggestions, I appreciate it!
Definitely going to do this course today! Thanks very much.
so i signed up and started the course and even before we get to any content related to grid, there is a great deal of setup and it’s not entirely clear how to arrange my workflow so i can follow along.
the scrimba course is nice because it’s shorter (yay) but it’s all done right in your browser via an interactive kind of codepen like environment where you flip back and forth between watching the video and playing with the code in real time.
i think it’s much easier to follow and learn from, at least is was to me at the time.
duplicating the html and css in PG gave me even greater insights, and taught me how to use the PG interface at the same time.
it’s much easier to get started and if you feel like it wasn’t enough, there’s always the wes bos site where you can zero in on the specific topic you want to know more about.
my 2 cents.
UPDATE: skipping ahead to wes bos’ lesson 10, on placing grid items was super helpful and introduced me to the firefox inspector tool which will show you how your items are placed on the grid.
the best part is it differentiates between the explicit grid (that you define) and the implicit grid (that css will define for you, if need be).
this is helpful because some of the placement rules will behave differently when placing things on the grid depending on if it’s going off what you told it, vs making it up on the fly.
the line at the end of the LAST row is not necessarily -1… it depends on explicit vs implicit.
the line -1 is the end of the explicit grid and items automatically placed after that are not addressable via the negative number scheme… same goes for columns if you have auto-fill working for you the -1 grid line might not be where you expect to be.
going to make a feature request for PG to show us this somehow, the way firefox does.
