CSS Grid With Detail View

There have been a couple projects over the years where information would need to be displayed in a grid with an inline detail view. This could be a product listing, a gallery with long descriptions, or anything else you might imagine as appropriate. A challenge though is to make such a layout without JavaScript, make it responsive, and when the detail view is expanded to keep the details immediately below the chosen item.

The solution I’ve come up with you can see below. Interact and resize your browser as necessary:

See the Pen Inline-block with block row by Michael Haufe (@mlhaufe) on CodePen.0

You can see an example of real world usage on a colleague’s website:

As well as an answer that subsumes a StackOverflow problem

The original application was for a prototype version of a product configurator for the Inpro Corporation:

Leave a comment

Your email address will not be published. Required fields are marked *