There is a code diagram for product cards (codepen) .

How to create the current layout on the flexs so that the full rows of goods (ie, 3 products each) behave like space-between , and not a full series like space-around ? If this is not possible, what could be the solution?

ps options for manually adding a margin to incomplete row products do not fit

 article { display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; width: 1000px; min-height: 450px; margin: 0 auto; background: #000; } div { height: 200px; width: 300px; background: silver; } 
 <article> <div></div> <div></div> <div></div> <div></div> <div></div> </article>

  • why margins don't fit? - Paul Wall
  • option with margins is not very good, because when adding new products, you need to add properties for them. Interested in the ability to customize the grid so that an incomplete range of products is automatically located according to the necessary logic - MAslaev

1 answer 1

as an option using js. I'm just learning, please do not judge strictly. `

 window.addEventListener('load',()=>{ let grid = document.querySelectorAll('article div'), div = document.createElement("div"); div.style.visibility = 'hidden'; for (let i=0;i<3-grid.length%3;i++) { document.querySelector('article').appendChild(div); } });

`

  • Thanks for the option, but I want a solution without JS - MAslaev