CSS Tip

Get Grid Information using pure CSS

Thanks to modern CSS, it's now easy to retrieve various information from a responsive CSS grid such as the number of rows, number of columns, and the coordinates of each item within the grid. The only requirement is to have equal-width columns. Rows can have different heights.

.container {
  --s: 120px; /* column size */
  --g: 10px;  /* gap */
  
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(var(--s),1fr));
  gap: var(--g);
  container-type: inline-size; /* to be able to use 100cqw */
}
.container > * {
  /* number of columns */
  --n: round(down,(100cqw + var(--g))/(var(--s) + var(--g)));
  
  /* number of rows */
  --m: round(up,sibling-count()/var(--n));
  
  /* item coordinates */
  --x: round(down,(sibling-index() - 1)/var(--n)); /* row index */
  --y: mod(sibling-index() - 1,var(--n)); /* column index */
}

Here is an interactive demo where each item shows all the information it gets. You can resize to notice the responsive behavior where all the values adjust in real time.

⚠️ (Chromium-only for now) ⚠️

See the Pen Grid information (chrome-only) by Temani Afif (@t_afif) on CodePen.

If you combine this with the new if(), you can easily create conditional styling.

Color elements in a specific row

.container > * {
  background: if(style(--x = 3): red;)
}

Or specific column

.container > * {
  background: if(style(--y = 2): red;)
}

Or both:

.container > * {
  background: if(style((--x = 3) or (--y = 2)): red;)
}

See the Pen Row/columns selection by Temani Afif (@t_afif) on CodePen.

We can have more complex conditions and combine them all:

.container > * {
  background: if(
    style((--y = calc(var(--n) - 1)) and (--x = 0)): red; /* last element of first row */
    style((--x = calc(var(--m) - 1))): green; /* last row  */
    style(--x = --y): orange; /* the diagonal */
  )
}

See the Pen Random grid selection by Temani Afif (@t_afif) on CodePen.

More CSS Tips