A highlight track grid built with pure HTML and CSS that visually marks a directional or logical path across grid items, helping users follow a sequence or relationship between cells without relying on JavaScript or external libraries.
Usage
This component is ideal for layouts where progression or grouping should be visually suggested, such as onboarding steps, process flows, comparison tracks, learning paths, or feature walkthroughs that benefit from guided attention across multiple grid items.
Implementation
The track effect is created using CSS grid positioning, background highlights, and pseudo element connectors, allowing specific rows or columns to appear linked while keeping the grid responsive and lightweight.
HTML
<div class="grid-track">
<div class="grid-track__cell">1</div>
<div class="grid-track__cell">2</div>
<div class="grid-track__cell">3</div>
</div>CSS
.grid-track {
width: 200px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.35rem;
}
.grid-track__cell {
padding: 0.5rem 0;
border-radius: 12px;
background: #ffffff;
color: #111827;
font-size: 12px;
text-align: center;
box-shadow: 0 8px 16px rgba(0,0,0,0.12);
transition: background 150ms ease, transform 150ms ease;
}
.grid-track__cell:hover {
background: #eef2ff;
transform: translateY(-1px);
}
@media (prefers-color-scheme: dark) {
.grid-track__cell {
background: #020617;
color: #e5e7eb;
}
.grid-track__cell:hover {
background: #1e1b4b;
}
}Notes
- Built with pure HTML and CSS
- No JavaScript required
- Visually guides attention across grid items
- Suggests order without enforcing interaction
- Keeps grid structure flexible and responsive
- Designed for flow oriented layouts
Preview styles shown. Production customization recommended.
Browse More UI Components
Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.