Skip to content

Condense with dense!

March 19, 2022

I have spent a fair bit of time dealing with systems around calender information. Being visually clear for users is really key for them – get the interface out of the way of the information!

So, operating with timelines is a big thing. The ability to know the relationship of things happening is good to represent visually. Do these events overlap? Can I fit something here? What if these things were adjusted?

Basic layout with CSS-Grid

So CSS Grid to the rescue – this is a great improvement on using tables etc.

But we can go further – the grid above is not really optimal. There is a lot of whitespace, and for large datasets this can result in a lot of info being hidden “below the fold”.

So I have been experimenting – based on Jen Simmons work – with using dense to optimise the rows of a given grid:

Layout using “dense”

The dense keyword:

grid-auto-flow: row dense

This works to “fill the gaps” in the timeline data. Early experiments on adding and removing nodes seem to work well, suggesting an ability for users to be able to interact with the info.

Have a look at the JSFiddle here, and enjoy the dense!

From → Engineering

Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s