Publish date:
Author:
Heydon
Despite predating both Grid and Flexbox, Multi-column Layout represents—at least to me—an even more radical departure from the way we normally do and think about CSS layout. Dividing just one element into a multi-column representation of its contents feels weird, heretical even.
Setting a multi-column context means asking (flow) content to progress, by column, in a horizontal direction. This invokes one of two issues, depending on whether you set a height on the element.
With no set height, there’s no limit to the height of the columns. This will result in vertical overflow, and the necessity to scroll down and up the page to read each successive column. Many are likely to find this arduous.
With a set height, columns are forced to spawn in the inline (horizontal) direction, creating horizontal overflow. Setting overflow: auto
frames this correctly.
.columns {
height: 25vh;
columns: 30ch;
overflow: auto;
}
However, despite the increasing popularity of scrolling menus and other such patterns harnessing horizontal scrolling, it is still an unconventional interaction paradigm — and unconventional patterns are liable to be misapprehended by users. There are ways to increase perceived affordance, of course—perhaps by adding some custom styling to the scrollbar (-webkit-scrollbar
), or providing some overflow-dependent shadows. But this may not be enough.
Quantity-dependent columns
One thing I have been experimenting with is the application of multiple columns in response to content quantity.
Let’s say I have a bullet list, and let’s assume each bullet point is likely to be relatively short; no more than a sentence. There’s no benefit to dividing the list into columns when there are only a few points. But the overall height of the list is shortened (and the chance of the reader being able to see the whole list without scrolling is increased) when a long list is divided into two.
In the following example, the list is split into two columns where there are 5 or more list items.
ol, ul {
columns: 2;
column-gap: 1rem;
}
li {
column-span: all;
}
li:nth-last-child(n 5),
li:nth-last-child(n 5) ~ * {
column-span: none;
}
By default, column-span
is set to all
, meaning each list item ignores the two-column mandate. A quantity query (the final declaration block) then resets column-span
to none
where 5 or more list items are present. Despite the misleading none
value, this means list items will span one of the two columns.
To follow is a live demo. Try opening up developer tools and removing a couple of list items.
-
Orci Ultrices Mi Varius Ante Nisl Ac Pretium Egestas Semper -
Nec Erat Imperdiet Tincidunt Ligula Urna Commodo Mauris -
Convallis Tincidunt Enim Eros Faucibus Ligula Arcu Eget Feugiat -
Leo Ante Tellus Nibh Morbi Nec Tellus Erat -
Cubilia Feugiat Accumsan Euismod Dolor Semper Orci Ligula Dolor Orci -
Felis Odio Bibendum Vestibulum Ante Erat Cras Dolor In Non
Block direction overflow
As Rachel Andrew has proposed, it would be beneficial to be able to control both the inline and block overflow direction. The support of block overflow would mean we could assume control over both column width and height. So long as the chosen height is no taller than the current viewport, the repetitive vertical scrolling issue described above disappears.
How block overflow direction is implemented and exposed is still up for grabs so, if you have any ideas, you may want to voice them.
My initial thinking is that a column-height
property should be supported alongside column-width
and column-count
. The columns
shorthand property would then need to take height as a third parameter.
Currently, columns
takes column-width
and column-count
in any order—presumably because parsing can identify which is a length value and which is just an integer. This becomes more complex with two length parameters, so an expected order for these properties may need to be set. If that expected order is width-before-height, then the following values would be considered valid (where 30ch
represents the width, and 25vh
represents the height):
.columns {
columns: 30ch 25vh;
}
.columns {
columns: 30ch 25vh 3;
}
.columns {
columns: 30ch 3 25vh;
}
.columns {
columns: 3 30ch 25vh;
}
It’s worth noting that ‘hard-coding’ a column-count
is not likely to be useful in most cases, since both columns and rows are now being dynamically provisioned based on the available space. It’s also worth noting that column-width
sets an ideal width, not a fixed one, much like flex-basis
. This eliminates overlaps and gaps.
The column-gap
property injects space between columns. With support of column-height
in place, row-gap
would have to be supported as well. Although you are probably more familiar with the CSS Grid-specific properties grid-gap
, grid-row-gap
, and grid-column-gap
, Firefox already supports the generic gap
, row-gap
, and column-gap
properties for Flexbox. The intention is to normalize gap
across the Grid, Flexbox, and Multi-column modules.
27 comments
Howdy! This is my first comment here so I just wanted to give a quick
shout out and say I genuinely enjoy reading your blog posts.
Can you recommend any other blogs/websites/forums that
go over the same topics? Thanks for your time!
Great beat ! I would like to apprentice while you amend your site, how could
i subscribe for a blog site? The account aided
me a acceptable deal. I had been a little bit acquainted of this your broadcast offered bright
clear idea
WOW just what I was searching for. Came here by searching for your quest bars
Greetings! Very useful advice in this particular post!
It’s the little changes that will make the greatest changes.
Thanks for sharing!
Good day! I know this is somewhat off topic but I was wondering if you knew
where I could find a captcha plugin for my comment form?
I’m using the same blog platform as yours and I’m having difficulty finding one?
Thanks a lot!
I have read so many posts about the blogger
lovers however this piece of writing is really a fastidious paragraph, keep it up.
wonderful submit, very informative. I’m wondering why the other specialists
of this sector do not notice this. You should proceed your writing.
I am sure, you’ve a great readers’ base already!
Fine way of describing, and good article to obtain information concerning my presentation focus, which i am going to present in university.
Howdy! This is kind of off topic but I need some guidance from an established blog.
Is it difficult to set up your own blog? I’m not very techincal but I can figure things out pretty fast.
I’m thinking about making my own but I’m not sure where to start.
Do you have any ideas or suggestions? Appreciate it
I am genuinely glad to read this blog posts which consists of lots of valuable facts, thanks for
providing these data. quest bars http://bitly.com/3C2tkMR quest bars
It’s difficult to find well-informed people on this subject, however, you sound like you know what you’re talking about!
Thanks scoliosis surgery https://0401mm.tumblr.com/ scoliosis surgery
Keep this going please, great job! cheap flights http://1704milesapart.tumblr.com/ cheap
flights
Hey there! I’ve been reading your site for a while
now and finally got the courage to go ahead and give you a shout out from
New Caney Tx! Just wanted to say keep up the excellent work!
asmr https://app.gumroad.com/asmr2021/p/best-asmr-online asmr
This piece of writing presents clear idea in support of
the new visitors of blogging, that genuinely how to do running a blog.
ps4 games https://bit.ly/3nkdKIi ps4 games
Fabulous, what a weblog it is! This website gives helpful data
to us, keep it up. scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery
I loved as much as you’ll receive carried out right here.
The sketch is tasteful, your authored material stylish.
nonetheless, you command get bought an impatience over that you wish be delivering the
following. unwell unquestionably come further formerly again since exactly the same nearly very often inside case you shield this increase.
quest bars https://www.iherb.com/search?kw=quest%20bars quest bars
Hey! This is my 1st comment here so I just
wanted to give a quick shout out and tell you I truly enjoy reading your blog posts.
Can you suggest any other blogs/websites/forums that go over the same
subjects? Thanks a lot! part time jobs hired
in 30 minutes https://parttimejobshiredin30minutes.wildapricot.org/
Hi! Would you mind if I share your blog with my facebook
group? There’s a lot of people that I think would really enjoy your content.
Please let me know. Thank you
you’re truly a just right webmaster. The web site loading speed
is amazing. It sort of feels that you’re doing any distinctive trick.
Also, The contents are masterpiece. you’ve performed a excellent job on this topic!
Hi there, You’ve done an excellent job. I’ll definitely digg it
and personally recommend to my friends. I am sure they’ll be benefited from this site.
This post gives clear idea designed for the new people
of blogging, that genuinely how to do running a blog.
Hello, I read your blogs regularly. Your story-telling style is witty,
keep up the good work!
Hi colleagues, how is the whole thing, and what you want to say regarding this
piece of writing, in my view its actually awesome designed for me.
I relish, cause I discovered just what I
used to be having a look for. You have ended my
four day long hunt! God Bless you man. Have a nice day.
Bye
I am really impressed with your writing skills as well as with the layout on your weblog.
Is this a paid theme or did you customize it yourself? Either way keep up
the excellent quality writing, it is rare to see a nice blog like this one these days.
I read this paragraph completely concerning the
comparison of most recent and previous technologies, it’s awesome article.