Another question on choosing grid or flexbox for a section of a page

HTML-CSS
#1

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?

#2

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:

.portfolio-section {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

Then give your portolio items class rules along these lines:

.flex-item {
  flex: 1 1 25%;
  max-width: 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.

1 Like
#3

@ArtemPetrov Thanks that worked perfectly.

#4