Column-fill Property

Design help General
1

Hi!

Been trying to work around this in webflow but have not found a way yet.
I have a text I need to place across 3 columns and I am currently using the text column property for that.

Up until here all perfect, but my problem is that the text is balanced to display the same amount of characters on each column, and I actually need it to totally fill the first column before changing into the second.
Tried adding Custom Attribute “column-fill: auto;” on the paragraph div but no luck.

Any idea how I can achieve this, 3 columns of text with set height where the text only changes to the next column once the content fills the height of the previous?

Thanks in advance!

2

Did you do this with CSS in a embed? Can’t tell what the issue is since you didn’t share a read-only and published link which is required in this topic.

1 Like
3

hey, thank you for your time!
no embeds at all.
i added that on the “custom attributes” in webflow builder, but not sure if that’s how it is meant to work tho.
as it’s a general question, i think the read link would only complicate as things are still a bit messy on my side.

basically what i am trying to achieve is to have this control

the webflow default is “balanced” but i need it to be “auto” so the text fills the first column before changing to the second, but haven’t been able to achieve it.

if it’s not clear enough i can make a random page just for this in a second!

4

You’ll want to either add the styles within an embed element on the page, or within the page settings to get this working. Depending on your situation there may be additional fixes necessary which is why it’s recommended to include the read-only link to your specific project.

That said, if all you’re wanting to do is modify that one style, just include this in an embed element and you should see the fix within the Designer window:

<style>
  .YOUR-COLUMN-CLASS {
    column-fill: auto;
  }
</style>
1 Like
5

ah! perfect. thank you so much. it fixed it!

1 Like