# Scrolling Through Data Grid Components

> When you create a **Data Grid** with more than 12 **Text Field** components inside of it, the Data Grid becomes too tight to display the content. This tutorial demonstrates how to scroll through the Data Grid.

When you create a **Data Grid** with more than 12 **Text Field** components inside of it, the Data Grid becomes too tight to display the content. This tutorial demonstrates how to scroll through the Data Grid.

## Tutorial

To scroll through a **Data Grid** component:

1. Create a CSS file containing two classes for scrolling through the **Data Grid** and for making the **Text Field** components wider. The `overflow-x: scroll` property allows you to scroll through the **Data Grid**. The `min-width: 300px` property makes the **Text Fields** larger, to display the content inside of them.

   Copy and paste the following code into your CSS file:

   ```
   .my-data-grid
   {
      overflow-x: scroll;
   }
    
    
   .my-data-grid input 
   {
      min-width: 300px;
   }
   ```
2. Go to the **LocalCSSFilePath** property in the **Create Form** activity and input the path to the CSS file created (for example, `"/file://C:/User/theCssFile.css"`).

   You may also store the path to the local CSS file as a variable, and input the variable name in the **LocalCSSFilePath** field.

3. Navigate to the **Display** tab of the **Data Grid** component. 4. In the **Custom CSS Class** field, write the name of the custom CSS class configured in the file like this: `my-data-grid`. This binds the data in the CSS file to your form.
   
   ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-180728-5a6b5376.webp)

5. Save the component and the form.

## Sample workflow

To check the complete workflow or to have a future reference, download the [XAML example](https://documentationexamplerepo.blob.core.windows.net/examples/Activities/scroll_data_grid_sample.zip)