ipsGrid

[legionaire]

is ipsGrid_span no longer used in 5.0 and if not what replaced it ?

[Matt]

I'm going to tag in our CSS maestro @Ehren for assistance. 

[SeNioR-]

Hi. You need to replace ipsGrid with ipsData and ipsData--grid and for single record you need to useipsData__item.

[Matt]

Ehren, you look different today.

[legionaire]

Thanks to you both will give that a shot 🙂

[Ehren]

On 11/15/2024 at 10:53 AM, legionaire said:

is ipsGrid_span no longer used in 5.0 and if not what replaced it ?

ipsGrid has moved to a more fluid concept in version 5.

With version 4, you'd typically add ipsGrid and then each child would need to use a ipsGrid_spanx class which told it how many columns to span (out of 12). On tablets and phones, these grids would automatically collapse to 1 column.

That concept was fine a decade ago, but with the limitless amount of devices these days, fluid/dynamic concepts are better.

In version 5, when you assign ipsGrid, all children are automatically assigned to a grid (the span class is now redundant). By default, grids have an ideal column width of 260px, but you can change that by adding a basis class, such as i-basis_350 which will make all columns 350px, or by changing the --i-basis CSS variable for that element. Columns will automatically grow/shrink/add/remove depending on the available space on the screen.

If you need to restrict the grid to a certain amount of columns (lets assume you never want more than 3 columns for some reason), you can add ipsGrid--max-3 to the parent.

If you need to use the old grid system and force content into a 12 column grid (like v4), you can use .ipsSpanGrid on the parent, and then ipsSpanGrid__4 (for example) on the children. But the new fluid code is better 🙂