Easiest way to create 2 col grid with centered content + no global container like on Themeco's site

[Lobsterass]

Hi!

I’ve long wanted an easy element to create a 2 col grid like this in which there’s no global container and the content is centered. You sort of have it on your site (I’ve altered the image a little though). You seem to call it TCO in CSS but I don’t get how to implement it. It would be SO nice if this would exist as a simple element to just pop into the layout.

I would obviously want it to go 1 col on mobile.

I have done a site with new “The Grid” element. Is that the only way to do this? The reason why I ask is because that element is sort of complicated for the client to update and it is time consuming for me to alter responsive states.

<3

[ruenel]

Hello @Lobsterass,

Thanks for writing in!

TCO is just a naming convention for our CSS classes. This does not mean that we have this in one of our standard Pro elements. Our Theme.co/pro site is our sales with a highly modified page.

You can actually replicate the page by utilizing the section, row, and two-column layout. The global container in the row settings must be turn off and the flexbox option in the columns will have to be turned ON. Both the vertical and horizontal alignment for the flex option must be to the center so that any contents in the columns will be aligned to the center. If the width of the elements is too wide, you can set a maximum width as well.

Hope this helps.