Responsive boxes with fill the page

Hello Guys, How can i make responsive boxes with fill the page. No margins, no paddings.

  • When I'm trying to set it by columns it is fine but i cant group properly by using "divs" See picture
  • When I'm trying to set it by pixels, one wider column goes down See picture
  • I want to make it like that with images inside ( 1 box = 1 responsive image) See picture

I want to make it responsive by sm/md/lg and list by xs.

1/2/4 - 50% height of site 3 - 100% height of site

4 - 66% width of site 1/2/3 - 33% width of site by one box

Any tips how can I make it?

Someone else may have a better way, but one way would be to put a row with a 2 columns ( base the number of columns by depending on how many columns wide you need the result to be). Make the first column 8 of 12 of the grid and the 2nd column 4 of 12 of the grid. Now inside the first column add a row with 2 columns in it both of equal grid size of 6. Then add another column of grid size 12 (this one will then wrap to the bottom under the other 2 as your last image shows).

Now add your content and adjust the height if necessary or add flex properties to manage that for you.

Basically in the end what you have is columns 1,2 and 4 within the left column and column 3 within the right column.

Having said that, if anyone does have a shorter way to do this, I'm open for suggestions too! :) I do know this works well though. I use this type of system a lot in order to create transparency type backgrounds for some containers that I make the background a light milky color to give it a bit of body. This is also the same setup you would use to create left or right sidebars as well.

Here's an image that may show it better than I can word it lol:

I made it like You wrote it but still got some troubles with create my idea :D I understand everything what You wrote about that but i think i need to do it other way to make my idea correct. I'm sorry for my english tho.

Is it possible to ask you personaly somehow?

If you set it up how the graphic shows you above, that's all you should need to do. If you want no spacing between them you will need to adjust the CSS to do that.

Keep in mind that until you actually put the content in the inner columns, you won't have any way to know how it's going to look height wise. It will just show you empty columns until then and they are always the same height when empty.

I don't do conversations outside of this forum other than for my clients, sorry.

Hmm It's okay. Is it possible to fill every positioned column with image, they are empty at the end too. In my idea they just change when someone hover on them. Anyway thanks for any advice Jo. You helped me a lot!

you can put whatever you want into the columns, you can make the rows or columns have background images or colors, or whatever you want to do with them. The only thing you'll need to do is either adjust the image sizes if you want them equal, or adjust the CSS to accommodate so they are equal. Flexbox works pretty good for a lot of positioning issues when it comes to images too.

I would agree with Jo's method. I believe it's the correct way, and using flexbox will allow equal heights between sibling columns.

You can use CSS Grid but that would be determined by your skill level and whether or not you want to support IE10/11 (which can be done with older version of CSS Grid). The app currently doesn't support it but you can still you use it, it just doesn't layout in the app.

You can alter the CSS to remove the gutter spacing between columns.