Grid Style: 2 Rows, 2 Column Content; Full Screen Height

I’m trying to create a two row, two column grid that would only fit the height of any screen and make it responsive.

Take a look here. As you can see, the user is going to be forced to scroll to see the second row of columnized content. I would like everything to fit responsively only to the full height of the screen.

please ignore the pageload

Thank you.

You can do this using a CSS grid. Just define a two column, two row grid and have the grid have a 100vh with 100% width. This will expand the full width, full height of the container.

Example I created here: https://jsfiddle.net/5738x6w4/1/

Hopefully that is what you were looking to do.

1 Like

It’s asking for a login to view the link.

Hopefully @Martyr2 has you sorted anyway with the grid layout. (If you needed older browser support we could probably do similar using the display table properties etc but depends on usage).

Sorry about the link, folks. I forgot about the password protection.

@Martyr2: I currently have a two column, two row grid in full width with all of the elements. I think most of the issue is getting the 100vh working correctly in the right containers.

I’ll keep you posted and see if I can figure it out.