# Custom css DATA GRID **URL:** \ **Category:** Ask for Help\ **Tags:** custom-css\ **Created:** [August 3, 2024, 6:43pm UTC](https://community.glideapps.com/t/custom-css-data-grid/75401 "2024-08-03T18:43:52Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![Andres\_Alencar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andres_alencar/32/61299_2.png) [@Andres\_Alencar](https://community.glideapps.com/u/Andres_Alencar)\ **Post date:** [August 3, 2024, 6:43pm UTC](https://community.glideapps.com/t/custom-css-data-grid/75401/1 "2024-08-03T18:43:52Z")
Hello community, does anyone know what CSS code I can use to change the colors of each column and the colors of the headers of each column, and if it is possible to change the color according to some condition ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/d/7/d7c568181b08b07d277483685094cf2b96859f89.png) ---
**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:** [August 3, 2024, 10:28pm UTC](https://community.glideapps.com/t/custom-css-data-grid/75401/2 "2024-08-03T22:28:17Z")
Since this component exists, you are not allowed to customize it with CSS. ---
**Author:** ![Andres\_Alencar](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andres_alencar/32/61299_2.png) [@Andres\_Alencar](https://community.glideapps.com/u/Andres_Alencar)\ **Post date:** [August 5, 2024, 12:01pm UTC](https://community.glideapps.com/t/custom-css-data-grid/75401/3 "2024-08-05T12:01:41Z")
pero eh visto post donde modifican los colores en listas ---
**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:** [August 5, 2024, 12:04pm UTC](https://community.glideapps.com/t/custom-css-data-grid/75401/4 "2024-08-05T12:04:42Z")
What can be done is a new table, not data grid. ---
**Author:** ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)\ **Post date:** [August 28, 2024, 8:01pm UTC](https://community.glideapps.com/t/custom-css-data-grid/75401/5 "2024-08-28T20:01:13Z")
That’s a shame - I was hoping to change the padding / margin and to wrap text using CSS on the new Data Grid component. Any other way? ---
**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\ **Post date:** [August 29, 2024, 12:20am UTC](https://community.glideapps.com/t/custom-css-data-grid/75401/6 "2024-08-29T00:20:15Z")
I tried using word-wrap to no avail. If the CSS master Himaladin says it’s not possible, I would take his word 😅 ---
**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:** [August 29, 2024, 12:48am UTC](https://community.glideapps.com/t/custom-css-data-grid/75401/7 "2024-08-29T00:48:28Z")
The Data Grid in Glide uses `div` elements and `canvas` tags. Since the content is drawn directly with JavaScript in the `canvas`, traditional CSS like padding, margins, or text wrapping won’t work. Sorry, I haven’t found a way to modify it yet. See the following image that shows the Data Grid header element is more like an image than an HTML element that can be styled: ![Screenshot 2024-08-29 at 07.57.27](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/0/70a62d0584972a163e7961bb61a9ad25d74d1711.png) ---
**Author:** ![Andrew\_Davies](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/andrew_davies/32/41838_2.png) [@Andrew\_Davies](https://community.glideapps.com/u/Andrew_Davies)\ **Post date:** [August 29, 2024, 4:48am UTC](https://community.glideapps.com/t/custom-css-data-grid/75401/8 "2024-08-29T04:48:04Z")
If you can’t do it - no one can! Thanks for the reply though. Andrew ---
**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:** [August 31, 2024, 2:38am UTC](https://community.glideapps.com/t/custom-css-data-grid/75401/9 "2024-08-31T02:38:16Z")
So far, I have been able to provide limited styling to the textarea (input area). This might be useful for cells with long text. ![Screenshot 2024-08-31 at 09.30.56](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/2/728b8bc43e0a11c0d69587022e1449774f1dfa81.png)