Grid Pro settings help

Shaking The Habitual STH Support
1

I’m trying to recreate the layout of tiles on this site: Mercedes-AMG Petronas Formula One Team So, a feature post that spans 2/3 of a column and 2 rows, then two rows of a regular grid. You’ll note on tablet width it reverts to a standard two column grid. I don’t need the News/Videos/Lewis Hamilton/Valtterri Bottas tabs function. Just the layout

I started using this project file as a starting point (Presenter | STH Demos) but I’ve got myself all turned around (in particular the breakpoints).

I know I need to do a proper dive into CSS grids but hoping someone can get me pointed in the right direction for this one.

2

Hi @jabostick -

Does the Presenter project use Grid Plus or Grid Plus Pro? They both do the breakpoints differently and I find Grid Plus Pro a lot more logical.

Here is a rough example. This uses background images and a min-height applied to the grid breakpoint settings. An alternative approach would be to use the Image Fit stack. I’ve only added 3 grid items but additional ones will slot in to a standard grid below this top section.

Hope this gets you going. Let me know if not.

1 Like
3

Thanks a million! I’ll have a look this afternoon. Presenter does Grid Plus, it looks like.

1 Like