как вариант ...
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style class="cp-pen-styles">.main-card__cards {
width: 200px;
height: 100px;
background: purple;
margin: .1em;
display: inline-flex;
color: white;
align-items: center;
justify-content: center;
font: bold 500% monospace;
}
button {
display: flow-root;
margin: auto;
}</style></head><body>
<div class="main-card__cards">1</div>
<div class="main-card__cards">2</div>
<div class="main-card__cards">3</div>
<div class="main-card__cards">4</div>
<div class="main-card__cards">5</div>
<div class="main-card__cards">6</div>
<div class="main-card__cards">7</div>
<div class="main-card__cards">8</div>
<div class="main-card__cards">9</div>
<div class="main-card__cards">10</div>
<button class="cards-user__button">Show more</button>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script >
if ($(".main-card__cards").length > 3) {
$(window).on("load resize", windowSize);
$(".cards-user__button").show();
}
var num = 5;
$(".cards-user__button").on("click", function () {
$(".main-card__cards:gt("+num+")").toggle();
$(this).text() === "Show less" ?
$(this).text("Show more") :
$(this).text("Show less");
});
function windowSize() {
num = ($(window).width() / 320|0) || 1;
$(".main-card__cards").show();
$(".main-card__cards:gt("+num+")").hide();
$(".cards-user__button").text("Show more")
}
</script>
</body>
</html>