Modern HTML and CSS

With Grid, Subgrid, scroll-snap, modal dialog and more
Added by Joris Hulsbosch,

I recently built a fairly complex component in HTML, CSS and JavaScript. It is called the Package Comparer for a client named Sazas. It involves some modern CSS which otherwise made this layout hard or impossible to build.

The design

Screenshot of the Package Comparer a browser
The final result where everything lines up nicely
Screenshot of the modal dialog
The modal dialog, with tabbed content
Screenshot of the Package Comparer on a small screen
The Package Comparer on a small screen
Screenshot of the the modal dialog on a small screen
The modal dialog on a small screen

The main requirement: alignment

One of the main requirements was that the rows would align vertically, so the comparable information aligns on the same height. On a small screen, 2 of the three rows are off-screen, so if you scroll to them, you can easily compare the properties.

(This blog is not finished yet)