Set up css grid

[PhobiaCide]

Grid for content

Ideally, the content will be somehow arranged between

• 3 columns on screens wider than 768px
• 2 columns on screens wider than 480 but narrower than 768
• 1 column on screens smaller than 480.

[PhobiaCide]

Content Layout

I want a block of text on half the screen and an image or collage on the other half, switching direction with each row e.g.

<img src="https://image.jpg"/> <container>text block</container>

<container>text block</container> <img src="https://image.jpg"/>

Both elements have the same height.