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

How do you achieve this with pure CSS? Take a look

One, nine grid layout

The layout is very simple, a very ordinary nine-grid layout, using the grid

<ul class="list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>.</ul>
Copy the code

Here squares can be easily implemented using aspect-ratio, and the corresponding CSS is shown below

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

Results the following

So, how to implement the automatic reminder of the number of remaining cards when more than 9? And then we look down

CSS counters

When we think of sequences, CSS counters come to mind, and now we add counters

.list{
  / *... * /
  counter-reset: count; /* Initialize */
}
Copy the code

Then display the numbers in each.item, using the pseudo-element ::after

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

This results in the following effect

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

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

Third, hide the image beyond

This is actually very easy, because the number is fixed, just use the selector nth-child with ~ can be implemented

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

Use visibility: hidden to hide images that have been exceeded, because this property does not affect the count. If you use display: None, the count will be skipped

Fourth, the number of statistics exceeded

Currently, since we start counting from the first, we end up counting the entire list, but we can specify that we start counting from the 10th. What happens? For the sake of demonstration, I’m going to turn hide on

.item{
  /*counter-increment: count; * /
}
.item:nth-child(9) ~.item{
  /* Count from the 10th */
  counter-increment: count;
}
.item:nth-child(9) ~.item::after{
  content: counter(count);
} 
Copy the code

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

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

.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.0.2);
}
Copy the code

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

Add and remove here demonstrate dynamic changes to the number of nodes, independent of the interaction logic

Full code access to list-counter (codepen.io)

5. Other initialization methods

In the previous implementation, we manually specified that the count starts at element 10

.item:nth-child(9) ~.item{
  /* Count from the 10th */
  counter-increment: count;
}
Copy the code

In fact, there is another way worth trying, which is to specify the initial value of the counter directly. The default value is 0, and now it is -9

.list{
  / *... * /
  counter-reset: count -9; /* initializes to -9*/
}
Copy the code

List-counter -reset (codepen.io)

Summary and explanation

This is the end of the case, a low cost CSS tip, although not many, but very useful, especially the use of selector, may be used in the future. CSS counters are very flexible and powerful, and should be able to achieve more practical effects with careful digging. Here’s a summary:

  1. 9 grid layout is preferred if compatibility is not considered
  2. Adaptive squares can be implemented using aspect-ratio
  3. CSS counters are preferred for sequence-related layouts
  4. Flexible use of CSS selectors, **nth-child(n)** and ~ can be combined to select elements after the NTH
  5. You can specify counting from the NTH element
  6. You can specify the initial value of the counter
  7. CSS counters have no compatibility issues and can be used with confidence

If you think it’s good and helpful, please like, bookmark and retweet ❤❤❤