The Future of Coding Sale

A CSS Trick to select a specific row with Grid auto-fit/fill

Kevin Powell Media Inc.

CSS

August 13, 2025

As a responsive CSS Grid shifts from four columns, to three columns, to one column, it’s difficult to select a specific row and continue to select the cells within that row and the grid changes layout. But thanks to modern CSS, this is now easy to do!

🔗 Links

Code for last row only: https://codepen.io/kevinpowell/pen/ogjwxyv/19639a71b6ff26e1bf87738fa6db12d5

Code for first two rows only: https://codepen.io/kevinpowell/pen/vENZGvG/14a4bdacb2fa79bbdd9cd1e400b57097

Code for 2nd row only: https://codepen.io/kevinpowell/pen/YPyQqMq/990300b888e8aec0d77d520d5948ddb5

Keith's article: https://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

Temani's version with no container queries: https://codepen.io/t_afif/pen/QwbZKPB?editors=1100