Stopping the ever increasing gaps between DIVs

[CSS-Regex]

I am trying to stop the ever increasing gaps that are occurring when clicking on the load more button, or more precisely, the load more element as it isn't really a button

<div id="grid-items">
            <div class="dash-items">Overview</div>
            <div class="dash-items">Add</div>
            <div class="dash-items">Edit</div>
            <div class="dash-items">List</div>
            <div class="dash-items">Overview</div>
            <div class="dash-items">Add</div>
            <div class="dash-items">Edit</div>
            <div class="dash-items">List</div>
            <div class="dash-items">Overview</div>
            <div class="dash-items">Add</div>
            <div class="dash-items">Edit</div>
            <div class="dash-items">List</div>
            <div class="load-more">Load More</div>
</div>

The CSS and JQuery

#grid-items{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    position: relative;
    height: 1100px;
.dash-items{
    max-height: 350px;
    width: calc(99vw / 3.8);
    margin-top: 1px;
    align-items: center;
    text-align: center;
    text-transform: uppercase;
    padding-top: 10px;
}

<script>
        var addHeight = 200;
        function loadMore(){
            addHeight += 200;
            var divHeight = $('#grid-items').height() + addHeight;
            var newHeight = $('#grid-items').height(divHeight)
        }
        $('.load-more').click(function(e){
            e.preventDefault();
            loadMore();
        })
</script>

 

[requinix]

addHeight += 200;
var divHeight = $('#grid-items').height() + addHeight;

Think about what these two lines are doing. What happens the first time? What happens the second time?

[CSS-Regex]

25 minutes ago, requinix said:

addHeight += 200;
var divHeight = $('#grid-items').height() + addHeight;

Think about what these two lines are doing. What happens the first time? What happens the second time?

I want to add more height to the element so it shows more content. I don't know if this is the correct way to do things

[CSS-Regex]

I can see this method isn't going to work. Just added a tonne more dash-items, it squashes them initially, and then expands them after clicking

Thanks for trying to help

[requinix]

1 hour ago, CSS-Regex said:

I want to add more height to the element so it shows more content. I don't know if this is the correct way to do things

I asked what those two lines of code were doing. I know what you want to do, and I know you aren't sure of whether it's right.

You start off with addHeight=200. The first time it addHeight += 200 (so it's now 400) and adds that to the current height. The second time it addHeight += 200 (now 600) and it adds that to the current height.

If you start with a height of 100 then it becomes 100+(200+200) = 500 on the first time, then 500+(400+200) = 1100 the second time, then 1100+(600+200) = 1900 the third time...

[CSS-Regex]

25 minutes ago, requinix said:

I asked what those two lines of code were doing. I know what you want to do, and I know you aren't sure of whether it's right.

You start off with addHeight=200. The first time it addHeight += 200 (so it's now 400) and adds that to the current height. The second time it addHeight += 200 (now 600) and it adds that to the current height.

If you start with a height of 100 then it becomes 100+(200+200) = 500 on the first time, then 500+(400+200) = 1100 the second time, then 1100+(600+200) = 1900 the third time...

The two piece of code were just adding height to the div element of grid-items. I know what it does, that is what I wanted, but like I said, it doesn't look like its doing it correctly