Grid Layout w/ Dynamic Content #13

Open
shaunrashid opened this Issue Jan 7, 2017 · 2 comments

Projects

None yet

2 participants

@shaunrashid

I would like to create a grid where we have multiple blocks of content that each consist of a title, an image/media asset, copy, and some links. In addition to making the grid of blocks responsive, the scenario calls for each of the elements within the content blocks to line up with the corresponding elements within it’s sibling content blocks on the same row.

For example, if there are 4 content blocks in a row, the copy of each of the blocks should start at the same point on the x axis of the row. While this is relatively easy when you have total control of the content and can craft it so that each element has a consistent (or at least predictable) amount of content, the challenge arises when you don’t have control of the content.

What I’m looking for is a layout where the titles and copy sections of each block line up with each other so that there is a more uniform look to the grid.

http://codepen.io/shaunrashid/pen/PGMgjx

@rachelandrew
Owner

So I think this is a question solved by subgrid, should it be implemented, and I don't think display: contents can fix this (but I'd be interested in anyone else can think of a method).

As a demo I created a very simplistic fork of your pen using display: contents on the section and on .content so that the child elements of .content can use a grid defined on main.

http://codepen.io/rachelandrew/pen/XpbVpd?editors=1100#0

Needs Firefox as requires display: contents support

This does then enable the child elements of .contents to line up. However to do this I've had to fix the grid to a set number of columns and then place the items onto that grid. I did have a fiddle about with doing this with grid-auto-flow: column to see if I could get the items to auto-flow but then you get additional columns and not additional rows.

Once we are using display: contents each of those child elements becomes a grid item, with auto-flow: row we end up with them placing each in a grid cell by row as you can see here where I have removed the positioning: http://codepen.io/rachelandrew/pen/ggpoKZ?editors=1100#0

You'd also need to come up with an alternate approach for the background colours etc. on items as we lose those once the boxes are not generated due to display: contents.

I think in this case the revised subgrid specification would work as you know how many rows you need for your box contents. So you could place the parent boxes with regular auto-placement and declare their internal use of grid to be display: subgrid, rather than using display:grid and then use those row lines to layout the internals.

Anyway, I think this is a pretty standard example of the sort of thing people will want to do, I'd love to see other thoughts and experiments on achieving the end result!

@rachelandrew rachelandrew self-assigned this Jan 7, 2017
@shaunrashid

On the assumption that sub-grid would not be available, can you think of any enhancements we could apply using Javascript to get the desired effect? When trying to do this type of thing through a Flexbox implementation, we've been setting heights to certain elements but when you're trying to make that work on a fluid design, it can be a performance nightmare.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment