# Customizing column width in Data Grids

> This tutorial shows how to modify the width of the last column in a **Data Grid**.

This tutorial shows how to modify the width of the last column in a **Data Grid**.

**Prerequisites**: To follow the steps in this tutorial, create a data table. Make sure that the last column of the table has content longer than five to six words.
1. Add a **Build Data Table** activity in your workflow.
2. Open the **Build Data Table** wizard and add the desired columns for your table.
   :::note
   Make sure the columns have no spaces or special characters, because you will later use these names to link the columns in the form through **Property Names**.
   :::
3. Save the data table to a variable. For this example, you can name it `dataTable`.

   ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-178464-016e27c8.webp)
4. Add a **Data Grid** into your form, and use the name of the data table variable (`dataTable`) as the **Property Name** of the component.
5. Add components into the **Data Grid**, according to the columns and their values in the data table. The **Property Names** of these components are the exact names of the columns in the data table.

   For this example, add three **Text Field** components. Use the following **Property Names** for the components: `column1`, `column2`, and `column3`.
6. In the **Properties** panel of the form, input the following code in the **Custom CSS** field:
   ```
   .mygrid tbody>tr>:nth-child(1){ 
   width: 25%;
   }
   .mygrid tbody>tr>:nth-child(2){ 
   width: 15%;
   }
   .mygrid tbody>tr>:nth-child(3){ 
   width: 60%;
   }
   ```
   :::note
   The `nth-child` element represents a column in the grid component.
   :::
7. Edit the **Data Grid** component. In the **Display** tab, under **Custom CSS**input the `mygrid` CSS class. Save the component and the form. This results in a wider third column, where the content is longer than approximately five to six words.