Skipped last week's post because I changed job, and adaptation is still in full force. You might have seen it in the videos, which are now one take without prep, and are about 50% longer. Sometimes, shipped is better than perfect!
Here we are, at the end of this series on CSS grid, exploring the concept of implicit grids.
So far, all of our layouts have been strictly defined using grid-template and grid-area, which is great for static layouts, but it's only half of the equation. Dynamic ones needs a little bit more flexibility, guiding the browser to place items rather than placing them ourselves.
The first 5 videos are about constructing a dummy login/register modal, with the columns defined and rows handled implicitly by the browser.
The last 5 are about building a gallery, with 3/2 horizontal images, 2/3 vertical ones, 2/2 squares and 1/1 fillers, without having to calculate optimum layouts' placement. Oh! and did I mention it's fully responsive, without media queries?
In the next few weeks, I'll be answering questions that I received during this series about CSS Grid, you can expect maybe 1 or 2 videos per week at this point, depending on schedule. Feel free to ask more here or tweeter, I'll try to answer as many as possible!
After that It will be time to move on to another subject, if you have any suggestion, I would like to know from you if there's a subject you feel should have a bit more exposure! So far, I'm planning a series on State machines, images handling, HTML node performance costs & HTML performance in general.
As per usual, you can check the code on GitHub, one branch for every video
link to the full playlist here
-1 track line trick
Centering with Grids, place-content, place-items & place-self
Introduction to the implicit Grid
Filling out the login form
Set default height of the Implicitly created rows
Creating our Gallery
Using auto-fit & auto-fill for responsiveness
Ordering items
creating our vertical/horizontal/square items
Densely pack our gallery in one property
Top comments (0)