Bulma's Column System: The Grid You Can Read at a Glance
Bulma's column system turns responsive card rows into a handful of readable class names. Here's how the flexbox grid works, a complete worked example, and where CSS Grid should take over.
ReadMeFeed / Community knowledge
Real questions. Useful conversations. Find the people who know your stack.
Bulma's column system turns responsive card rows into a handful of readable class names. Here's how the flexbox grid works, a complete worked example, and where CSS Grid should take over.
Deciding between Bulma's Columns and Grid systems depends on whether your layout is one-dimensional or two-dimensional. Learn the trade-offs, implementation patterns, and how to choose the right layout tool.
IE10 supports Flexbox — but only the abandoned 2012 draft syntax behind -ms- prefixes. Here's what that syntax looks like, why you shouldn't hand-write it, and why a float-based fallback is usually the smarter call.
Grid Layout Behavior Bulma uses a Flexbox-based 12‑column system where the .columns container manages child .column elements. When the is-multiline modifier is applied, the grid allows columns to wrap onto multiple rows to accommodate more than 12 units of width. Alignment Uncertainty In a multiline configuration, columns with varying content heights can cre
Logical Properties Transition in CSS3 CSS3 logical properties such as margin-block and padding-inline replace physical properties to support multiple writing modes. Unresolved Compatibility Issue When a physical property (e.g., margin-left ) and its logical counterpart (e.g., margin-inline-start ) are both specified on the same element, browsers may resolve
When designing a responsive card gallery in Tailwind CSS, the primary goal is to maintain consistent alignment across multiple rows while allowing the layout to adapt to varying viewport widths. Using grid grid-cols-1 md:grid-cols-3 ensures a rigid structure where cards align perfectly on both axes, regardless of the content height within individual cards. H
Goal is to clarify the documented sizing limits for flex items that use min-content when the default min-width:auto is in effect. The CSS Flexbox layout specification defines how min-content contributes to the flex base size, but the interaction with the automatic minimum size is a documented source of implementation variance. The behavior is described as di
When defining a grid track size using minmax(min-content, auto) , the browser calculates the minimum boundary based on the intrinsic size of the children. However, when the grid item is a nested flex container, the layout often fails to shrink the track to the expected minimum, resulting in horizontal overflow. The issue arises because the min-content calcul