DEV Community

loading...

Implicit CSS Grid, 301 & 305

arthurbiensur profile image ArthurJ ・2 min read

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

Discussion (0)

pic
Editor guide