In the section of my portfolio project where my project images and links go I initially used flexbox to make the row. I have 4 items in the row. Now that I am thinking of ow the page will look in a smaller screen I am struggling to get the items to line up. I would like the row to go from 4 cols to 2 rows each with 2 cols when decreasing the screen size.
It seems like Grid would be ideal for this but I thought that grid was for the overall layout of the page? I also want to put a heading across the section. Should I use absolute positioning to align the heading or should I place it in its own div and make it into a row?
Grid is for any time you need to align items in 2 dimensions, not just for overall layout. That said, I think flexbox can also do what you want. You could give your portfolio section rules like these:
Then give your portolio items class rules along these lines:
flex: 1 1 25%;
You can then use a media query to change that 25% to 50% for small screens. That’ll give you 2 columns.
PS: I suggest you give all elements a
box-sizing: border-box rule so that borders are counted as part of elements’ widths and heights. That way, if you want an element to take 1/4 the space you just give it width 25% and don’t have to worry about accounting for the borders.
@ArtemPetrov Thanks that worked perfectly.