3 ms·

Just use Bulma. You can drop it into any project. https://bulma.io/documentation/columns/sizes/ https://bulma.io/documentation/columns/sizes/ Your example can

Just use Bulma. You can drop it into any project. https://bulma.io/documentation/columns/sizes/ https://bulma.io/documentation/columns/sizes/ Your example can be accomplished like this: <div class="columns"> <div class="column is-half">m:2*</div> <div class="column">1*</div> <div class="column">m:*1</div> </div> There's a good reason to limit yourself to 12 columns: the layout is consistent across all common screen sizes, whether it's tiny mobile screens or huge desktop screens. If you have sizes like 1.374fr, you lose a lot of that automatic layout functionality.

c-smile 9y ago
Bulma, as any other grid systems based on % units, is quite limited in real life. Check this: https://sciter.com/images/wt-langs.png https://sciter.com/images/wt-langs.png You see the same HTML markup there but in different languages. Text in most of European languages is longer. This is HTML/CSS Sciter UI that uses flex units and flow property: https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm
- sillysaurus3 9y ago
  Hmm, why is it limited? I'm interested in hearing your experiences.
  - c-smile 9y ago
    Check screenshots above. There is a block having 4-columns layout. Each column there a) is flexible and b) uses min-content constraint. So widths of columns are unknown upfront - determined by actual content in grid cells. That last part (use of actual content) is what you cannot reproduce using % units in principle.
baby 9y ago
Are you the laracast guy?
- sillysaurus3 9y ago
  Nope. But amusingly, you do know me. Shoot me an email if you want to know more. Hope you've been well. Your 4chan board was hilariously cool.
  - e12e 9y ago
    (still) OT: now you two have made me curious about your story...
SippinLean 9y ago
That doesn't solve the problem the parent was describing. It just removes flex and sets 50% width on the half-column.

c-smile 9y ago

Bulma, as any other grid systems based on % units, is quite limited in real life. Check this: https://sciter.com/images/wt-langs.png https://sciter.com/images/wt-langs.png You see the same HTML markup there but in different languages. Text in most of European languages is longer. This is HTML/CSS Sciter UI that uses flex units and flow property: https://sciter.com/docs/flex-flow/flex-layout.htm https://sciter.com/docs/flex-flow/flex-layout.htm

sillysaurus3 9y ago
Hmm, why is it limited? I'm interested in hearing your experiences.
- c-smile 9y ago
  Check screenshots above. There is a block having 4-columns layout. Each column there a) is flexible and b) uses min-content constraint. So widths of columns are unknown upfront - determined by actual content in grid cells. That last part (use of actual content) is what you cannot reproduce using % units in principle.

baby 9y ago

Are you the laracast guy?

sillysaurus3 9y ago
Nope. But amusingly, you do know me. Shoot me an email if you want to know more. Hope you've been well. Your 4chan board was hilariously cool.
- e12e 9y ago
  (still) OT: now you two have made me curious about your story...

SippinLean 9y ago

That doesn't solve the problem the parent was describing. It just removes flex and sets 50% width on the half-column.