# CSS to get headers to stick at the top in a Data Grid

**URL:** <https://community.glideapps.com/t/css-to-get-headers-to-stick-at-the-top-in-a-data-grid/85374>\
**Category:** Ask for Help\
**Created:** [November 14, 2025, 8:00am UTC](https://community.glideapps.com/t/css-to-get-headers-to-stick-at-the-top-in-a-data-grid/85374 "2025-11-14T08:00:20Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 21, 2025, 10:11am UTC](https://community.glideapps.com/t/css-to-get-headers-to-stick-at-the-top-in-a-data-grid/85374/4 "2025-11-21T10:11:58Z")

</div>

# Found it! Here’s how to make the data grid header sticky

I discovered that the Data Grid actually uses **two canvas layers** — one for the header and another for the full table. The header canvas sits on top of the main canvas, which means we can take advantage of it to make the header sticky. However, styling remains limited because it’s still a canvas element.

The key to making the sticky header work is controlling the container’s **min/max height** so that scrolling is guaranteed. Here’s the CSS that solved it:

```auto
div:has(> div > .dvn-underlay),
div:has(> div > div > div > .dvn-underlay) {
  position: relative;
  min-height: 200px;
  max-height: 200px;
}

.dvn-underlay {
  height: 0;
}

.dvn-underlay > canvas:nth-child(2) {
  position: sticky !important;
  top: -2px !important;
  height: 35px !important;
}

```

Hope this helps you achieve the sticky header you wanted!

---

_[View the full topic](https://community.glideapps.com/t/css-to-get-headers-to-stick-at-the-top-in-a-data-grid/85374)._