CSS counters let you adjust the appearance of content based on its location in a document. For example, you can use counters to automatically number the headings in a webpage. Counters are, in essence, variables maintained by CSS whose values may be incremented by CSS rules to track how many times they’re used.

Today I want to show you how to create responsive cards that adapt to screen size. We have one great feature here, if the cards don’t fit on the screen, we’ll show the number of hidden cards, cool, right?

Let’s go to the code!

This is out HTML

<section class="small-card">
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__item"></div>
        <div class="small-card__count">
            <p class="small-card__count-text">
                +<span class="small-card__count-value"></span> more items
            </p>
        </div>
    </section>

Nothing special here. We have one section and we have several divs inside!

CSS

.small-card {
    position: relative;
    height: 100px;
    padding: 10px;
    overflow: hidden;
    background: #ddd;
    counter-reset: item-count;
}

.small-card__item {
    float: left;
    width: 100px;
    height: 100px;
    background: #444;
    border-radius: 3px;
    margin: 0 0 10px 10px;
}

.small-card__item:first-child {
    margin-left: 0;
}

.small-card__count {
    display: none;
    width: 80px;
    height: 100px;
    position: absolute;
    right: 10px;
    top: 10px;
    background: #fff;
    border-radius: 3px;
}

.small-card__count-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 1.25em;
}

.small-card__count-value::after {
    content: counter(item-count);
}

@media (max-width: 319px) {
    .small-card__item:nth-child(1)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 9px) {
    .small-card__item:nth-child(0)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(-1) {
        margin-right: 90px;
    }
}

@media (max-width: 429px) {
    .small-card__item:nth-child(2)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 119px) {
    .small-card__item:nth-child(1)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(0) {
        margin-right: 90px;
    }
}

@media (max-width: 539px) {
    .small-card__item:nth-child(3)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 229px) {
    .small-card__item:nth-child(2)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(1) {
        margin-right: 90px;
    }
}

@media (max-width: 649px) {
    .small-card__item:nth-child(4)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 339px) {
    .small-card__item:nth-child(3)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(2) {
        margin-right: 90px;
    }
}

@media (max-width: 759px) {
    .small-card__item:nth-child(5)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 449px) {
    .small-card__item:nth-child(4)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(3) {
        margin-right: 90px;
    }
}

@media (max-width: 869px) {
    .small-card__item:nth-child(6)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 559px) {
    .small-card__item:nth-child(5)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(4) {
        margin-right: 90px;
    }
}

@media (max-width: 979px) {
    .small-card__item:nth-child(7)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 669px) {
    .small-card__item:nth-child(6)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(5) {
        margin-right: 90px;
    }
}

@media (max-width: 1089px) {
    .small-card__item:nth-child(8)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 779px) {
    .small-card__item:nth-child(7)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(6) {
        margin-right: 90px;
    }
}

@media (max-width: 1199px) {
    .small-card__item:nth-child(9)~.small-card__item {
        counter-increment: item-count;
    }
}

@media (max-width: 889px) {
    .small-card__item:nth-child(8)~.small-card__count {
        display: block;
    }
    .small-card__item:nth-child(7) {
        margin-right: 90px;
    }
}

Here is the demo.

Thank you all.