Often in some apps to see such a nine-grid design. When the number of thumbnails is less than 9, arrange them normally. When the number is more than 9, it will prompt how many thumbnails are left, as follows:

How do you achieve this with pure CSS? Let’s take a look

First, nine grid layout

The layout is very simple, a very common nine-grid layout, where we use the grid

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
    ...
</ul>

Here the square can be easily realized with aspect-ratio, and the corresponding CSS is as follows

.list{ position: relative; display: grid; width: 300px; margin: auto; The grid - the template - the columns: repeat (3, 1 fr); list-style: none; padding: 0; gap: 2px; } .item{ aspect-ratio: 1; /* width to height ratio 1:1*/}

Results the following

So, how to realize when more than 9 cards automatically prompt the number of cards left? And then we go down

Second, CSS counters

When you think of sequences, CSS counters come to mind. Now let’s add counters

.list{ /*... */ counter-reset: count; /* initialization */}

Then display a number on each.item, using the pseudo element ::after

.item{ counter-increment: count; } .item::after{ content: counter(count); /* other style */ display: grid; height: 100%; place-content: center; font-size: 30px; color: #fff; }

This results in the following effect

The numbers are there, but now there are two questions:

  1. More than 9 images will not be hidden
  2. This number is not beyond the number of pictures, but the total number

3. Hide beyond the picture

This is actually very easy, because the number is fixed, only need to use the selector nth-child cooperation ~ can achieve

.item:nth-child(9)~.item{/* select the element after the ninth */ visibility: hidden; }

This place is to hide the outnumbered image by visibility: hidden, because this property does not affect the calculation of the counter and will skip the count if display:none is used

Four, statistics of the number of excess

Currently, since we start counting from the first, the final count is the number of the entire list, but we can specify that we start counting from the tenth. What happens? For demonstration purposes, leave the hide on for the moment

.item{ /*counter-increment: count; */}. Item :nth-child(9)~. Item {/* Count-increment */ Counter-increment: count; } .item:nth-child(9)~.item::after{ content: counter(count); }

As you can see, after the 10th count, the last number indicates how many cards are left

Item :nth-child(9)~. Item :last-child (9)~. Item :last-child (9

.item:nth-child(9)~.item{ position: absolute; width: calc(100% / 3 - 1px); counter-increment: count; visibility: hidden; right: 0; bottom: 0; } .item:nth-child(9)~.item:last-child::after{ visibility: visible; Background - color: rgba (0, 0, 2); }

In this way, pure CSS automatically prompts the rest of the image, as shown below

Here,
add 和
removeDemonstrates the dynamic modification of the number of nodes, independent of the interaction logic

The full code is available at list-counter (codepen.io)

Other initialization methods

In the previous implementation, we manually specified that the count would start at the tenth element

.item:nth-child(9)~.item{/* Count-increment */ Counter-increment: count; }

In fact, there is another way to try, that is to directly specify the initial value of the counter, the default is 0, now change to -9 will do, as follows

.list{ /*... */ counter-reset: count -9; /* Initialize to -9*/}

(codepen.io) (list-counter-reset) (codepen.io) (list-counter-reset)

VI. Summary and explanation

This case ends here, a low cost CSS tips, although not many, but very useful, especially the use of selectors, you may be used in the future. CSS counters can be very flexible and powerful, but more practical effects can be achieved with careful digging. Here’s a summary:

  1. Grid layout is preferred if compatibility is not considered
  2. Adaptive squares can be implemented using aspect-ratio
  3. When dealing with series-related layouts, give preference to CSS counters
  4. With CSS selectors, nth-child(n) and ~ can be combined to select the NTH element after
  5. You can specify that the count starts at the NTH element
  6. The initial value of the counter can be specified
  7. CSS counters do not have compatibility issues and can be used safely

If you think it’s good and helpful, please feel free to thumb up, bookmark, retweet