Results show

Draw the approximate container

Gird simple layout,11 DD element simulation pictures

<dl class="view">
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
    <dd></dd>
</dl>
Copy the code
dl.dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3.1fr);
    width: 300px;
}
.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}
Copy the code

counterCalculate the number of attributes displayed

Overlay the image with the ::before pseudo-element to display the amount counter calculates in the ::before element

counter

.view {
    display: grid;
    grid-template-columns: repeat(3.1fr);
    width: 300px;
    counter-reset: images;
}
.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}
.view dd::before{
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
Copy the code

Counter already shows the total number of DD elements, but we just need to exceed the number of dd elements in the ninth one, how do we do that?

It’s quite simple, using the: nth-Child pseudo-class to select the sibling after the ninth DD element

.view {
    display: grid;
    grid-template-columns: repeat(3.1fr);
    width: 300px;
    counter-reset: images;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}

.view dd:nth-child(9) ~dd {
    counter-increment: images;
}

.view dd:nth-child(9) ~ dd::before{
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
Copy the code

~ dd represents all subsequent DD elements

Hey hey! We just need to move the last element. We can use positioning

dl.dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3.1fr);
    width: 300px;
    counter-reset: images;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
}

.view dd:nth-child(9) ~dd {
    width: 100px;
    counter-increment: images;
    position: absolute;
    right: 0;
    bottom: 0;
}

.view dd:nth-child(9) ~dd::before {
    content: "+"counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
Copy the code

Position all elements beyond the ninth to the bottom right of the container

Native JS implementation click display

All elements beyond the ninth are positioned to the lower right, and elements with js click-location are stripped of their positioning attributes

// Remove the location.view dd.no-befter {
    position: static ! important;
}

.view dd.no-befter::before {
    display: none ! important;
} 
Copy the code
let dd = document.getElementsByTagName('dd'),
    len = dd.length;
dd[len - 1].onclick = () = > {
    [].slice.call(dd).forEach(val= > {
        val.classList.add('no-befter'); })}Copy the code

Counter another way to think about it

Counter implements the nine grid, which uses counter from 0 by default. Now reset counter to count from -9.

dl.dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3.1fr);
    width: 300px;
    counter-reset: images -9;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}

.view dd::before {
    content: counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}

Copy the code

Similarly, display the quantity beyond the ninth element, and then position

dl.dd {
    padding: 0;
    margin: 0;
}

.view {
    display: grid;
    grid-template-columns: repeat(3.1fr);
    width: 300px;
    counter-reset: images -9;
    position: relative;
}

.view dd {
    height: 100px;
    background: #ccc;
    box-sizing: border-box;
    border: 1px solid #fff;
    counter-increment: images;
}

.view dd:nth-child(9) ~dd:before {
    content: counter(images);
    display: inline-block;
    width: 100%;
    height: 100%;
    line-height: 100px;
    color: #fff;
    font-size: 30px;
    text-align: center;
}
Copy the code

I won’t show you the following code, but it’s basically the same.

All code is saved on Github as needed.

The last

CSS::marker makes the text serial number no longer stiff,counter with ::marker can make an interesting list display.

Public number: next door grandpa, ask a concern ❤️🔥