loading...

Things we still can't do in CSS

yujiri8 profile image Ryan Westlund Originally published at yujiri.xyz ・2 min read

For all the progress CSS has made, all the thousands of features it's received, there are still some layouts that CSS can't do without Javascript adjustment, at least not to the best of my knowledge. If you know how to solve the problems I describe without Javascript, please let me know!

1: Balanced columns

On my website, category indexes have the structure of a group of subcategory columns. Each subcategory column has an <h3> followed by a series of links to articles. Software index example.

What I want: on a sufficiently wide screen, all of the columns display in one row. If the screen gets too narrow to fit them all with a comfortable minimum width, they'll wrap onto a second row, but the number of colunms per row should stay as balanced as possible. So if there are 5 columns and a row could fit 4 while respecting the minimum width, it should show 3 columns on top and 2 on bottom. That's the hard part. Everything I try with flexbox or grid can only achieve a 4-1 distribution for this case. So I use ugly Javascript to correct it onresize and onload.

2: Image cards bending around an aside

This is using a Javascript fix on my root page.

What I want: the image-cards all have the same height, which is just enough to satisfy the one with the longest description, while staying aligned in columns. More importantly, I want the image-cards to bend around the recent-comments panel on a screen where the image-cards are the taller element, as if the recent-comments element is floated. But apparently flexbox doesn't work with floats the way inline content does. And inline-flex doesn't seem to behave any different from flex.

Posted on by:

yujiri8 profile

Ryan Westlund

@yujiri8

I'm a programmer, writer, and philosopher. My Github account is yujiri8; all my content besides code is at yujiri.xyz.

Discussion

pic
Editor guide
 

Media Queries are the solution to your 1st problem, see codepen.io/iamschulz/pen/eYNLzOJ
Your second problem can be solved by using named grid areas. Flex is probably the wrong tool here, since it's made for one-dimensional layouts. You want to layout in two dimensions, so grid areas should be the way to go. Take a look here: css-tricks.com/snippets/css/comple...

 

Thanks, I definitely appreciate the effort you put into this, but I don't think those really work. As far as I can tell, the codepen works by hardcoding the minimum column and gap width to add up to 1560 or less if the screen is >1570, and to add up to 2160 if the screen is shorter than that, to prevent four from fitting. But that only works for 5 columns - it breaks down if I add a 6th column, which some of my category indexes have. It seems like it requires the CSS to know how many columns there are, which kind of defeats the point (with the way I'm doing it, I can at least have just one JS function that works for all of the indexes and changing the column or gap width only requires changing the one number in a clearly marked place).

As for grid areas, I'd read about those a bit but I think they also work by hardcoding what areas each one gets, which again I don't think works responsively. On sufficiently narrow screens, it can't really fit one image-card alognside the recent-comments element, so recent-comments is moved to the bottom. There might still be a way to combine this with media queries to make an improvement, but I'm not sure.

 

You can bypass the hardcoding by using a CSS variable for your number of columns and using calc to calculate the grid layout

I tried but apparently CSS variables don't work in media queries, so I can't use calc to determine the breakpoints based on the column width.