CSS GRID
I am trying to make a grid responsive for mobile, stacked but keeping it side by side for desktop and tablet
9 Replies
Not sure what I am doing wrong
I suspect the grid-column on the children still forces grid to have two columns despite changing that in the media query
Can you do a pen?
Looks bloody complicated so I was not really reviewing it in detail. But have a look at https://codepen.io/Ghloo/pen/RwOGweW (adding borders is often a good way to see what is actually happening and what ends where).
so you don't need to use grid-column on the children just fix your broken value for grid-template-columns on the parent from
repeat(2 / 1fr) to repeat(2 , 1fr)Not what I wanted
The pen you shared back is still side by side for mobile
In every case, he is rather correct - you do not need to mess with grid columns on the children. Either do it as per my suggestion, or use media queries to simply make the parent "grid-template-columns:1fr 1fr" from a certain width on.