Question on the shorthand of the column-count and column-width properties.

Guys, how does this shorthand of the 'column-count' and 'column-width' properties work? I'm trying to understand but in practice I don't see any difference. Example: columns: 3 120px; When I use these values, will I have 3 columns of 120px? How it works?
No description
12 Replies
Chaves
ChavesOP2y ago
When I don't use the column-count property and just use the column-width this is what happens:
Chaves
ChavesOP2y ago
No description
Chaves
ChavesOP2y ago
When I use both properties:
Chaves
ChavesOP2y ago
No description
Chaves
ChavesOP2y ago
No description
Chaves
ChavesOP2y ago
In this case, when I use both properties, does column-width work as if it were min-width?
MarkBoots
MarkBoots2y ago
it will work as an "ideal" column width, so it can be wider or even narrower. same for column count. it's an ideal. if both are set (not auto), then column count is used as a maximum
MarkBoots
MarkBoots2y ago
columns - CSS: Cascading Style Sheets | MDN
The columns CSS shorthand property sets the number of columns to use when drawing an element's contents, as well as those columns' widths.
Chaves
ChavesOP2y ago
Thank you, W3Schools does not explain this detail.
MarkBoots
MarkBoots2y ago
w3schools is nice for starters, but when you want to know the real magic behind things, mdn is the place
Chaves
ChavesOP2y ago
I'll follow the tip
MarkBoots
MarkBoots2y ago
good luck!

Did you find this page helpful?