How to set the number of items in a row?

Question

css

Please tell me
there is a div, width in %. In it, the descendants go in a grid.
How can I specify how many descendants can be in one row (the number flies into the input script).
The width of descendants cannot be set, including in %.
I want something like

<style>
.parent
{
     max-count-item-in-row: 10;
}
</style>
<div class="parent">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
   <div class="item"></div>
   <div class="item"></div>
....
</div>

Now I count the width of the item through js as a percentage, but something is somehow a crutch. I want a beautiful solution in html + CSS

Answer 1

study css grid, through it you can easily set up a grid, and there you can specify how many elements to put in a row or column. I’ll even give you a link, everything is well explained here https://www.youtube.com/watch?v=-fDqBEjfzGo