Responsive grid layouts

HTML & CSS
1

I have a layout on a website that has several, three DIVs within rows.

<div>
  <div></div>
  <div></div>
  <div></div>
</div>

On a tablet I would like it to display as:

<div>
  <div></div>
  <div></div>
</div>

So turn the desktop grid from 3x to 2x on a tablet.

How can I setup the parent DIVs to make this change in layout to become responsive??

2

If, rather than “on a tablet” you had said “based on screen size”, I would have suggested using the CSS “columns” property on the outer div to pick your column size and let it flow to 3, 2, 1, whatever number of columns would fit your preferred width. But to select out and do that specifically based on whether the device is a tablet… I’ll let someone else suggest a solution.

1 Like
3

The wrapping parent div in your code will be an issue because css can’t change the html. If you had used grid or flex you wouldn’t have needed the wrapping div of each three items and then all the others would be siblings. It would then be possible to change the numbers per row quite easily depending on the screen size.

I’d have to see your full code to see if there is a way around it. It may be that you have to go to one column only from the three.

However, there is a css property called display:contents which effectively removes the element from the dom but has been buggy in the past and indeed still does have some issues so use with care.

Here’s a demo:

That would seem to solve the problem but an ideal solution would be to structure your html properly from the start although I realise it may be too late for that.

Which tablet is that?

There are many many different tablet all at different sizes. Some tablets are bigger than laptops and some are as small as phones. What you should really be concerned with is how your device scales for all devices by being device agnostic.

For example that basically means going from 3 columns to 2 columns when the design no longer fits nicely at 3 across. At that point you would add a media query and change the design and then all devices are happy and not just an imaginary tablet size.

Chasing devices and device sizes is futile as there are just too many variations. Just concentrate on the design and when it looks awkward at a specific width add a media query and fix it. In that way you cater for all devices now and in the future.