Elementor has two layout modes for a Container: Flexbox and Grid. Which one you get is decided by the display value the browser actually computes for your element — not by class names.
display:flex → Flexbox Container
The converter carries over the properties that matter: direction (row/column), wrap, justify-content, align-items and the gap. So a horizontal card row built with flexbox arrives as a Container with Direction = row and the same gap you had in CSS.
display:grid → Grid Container
Grid layouts become a Grid Container, and the editor labels them Grid in the Structure panel with the grid icon. Columns, rows, gaps and the item alignment options come across.
Equal columns stay as fr
This one is worth understanding. The browser resolves grid-template-columns: repeat(5, minmax(0, 1fr)) into concrete pixels — something like 241.597px 241.597px 241.604px …. Notice the tiny sub-pixel differences. If a converter compared those strings naively it would decide the columns are unequal and write fixed pixel widths, which would stop your grid from being responsive.
Instead, the columns are compared numerically with a tolerance, so near-identical tracks are recognised as equal and written as N fr — a real responsive grid that reflows as the container resizes. Genuinely uneven tracks (for example 2fr 1fr) are preserved as a custom template.
Rows size to content
Rows are set to auto rather than Elementor’s default of equal-height rows, so cards of different text lengths keep their natural heights instead of being stretched to match the tallest one.
Widths, padding and the centering trap
A very common pattern is a centered content column: max-width: 760px; margin: 0 auto;. Here the browser resolves auto into a real pixel value that depends on the current viewport — at one width it might report 260px on each side.
Writing those pixels into Elementor would break the centering the moment the screen size changed. So a block with a max-width and symmetric auto margins is detected as auto-centered and expressed the Elementor way instead: Content width = Boxed with your max-width, which centers natively at any screen size. The resolved side margins are discarded.
Practical tips
- Prefer
gapover margins between grid/flex children — gaps map cleanly, per-child margins do not. - Use
max-width+margin:0 autofor centered sections; it converts to a Boxed container correctly. - Avoid mixing floats with flex/grid. Floats have no Elementor equivalent and will need manual work.
- If a row must not wrap on mobile, set that in Elementor after import — responsive wrap behaviour is easier to tune there.