2

I have a school project where is this HTML:

<div class="section-content">
  <div class="section-item">1</div>
  <div class="section-item">2</div>
  <div class="section-item">3</div>
  <div class="section-item">4</div>
</div>

As you can see there are 4 items in section-content. I want them to be 4 in a row. However if any of those items reaches minimum width of 250px when resizing the window I want to wrap the elements into 2 rows with 2 items each exactly.

I tried flexbox and grid but every time I resize, there are 4 items in a row, then 3, and after that, there are 2 in a row. I do not want 3 items in a row.
We are not allowed to use media queries, it would be "too easy".

DomHofman
  • 29
  • 4
  • 1
    Propberly doable with either `clamp` or `min()` and `max()` css functions. Maybe this article will be of help: https://blog.logrocket.com/flexible-layouts-without-media-queries/ – tacoshy Mar 25 '23 at 13:30
  • Do you mean ‘minimum width’? I can’t make that make sense as I would assume you want to split to two columns rather than four when the container gets narrower. – A Haworth Mar 25 '23 at 14:05

0 Answers0