我们可以使用CSS样式来减小数据网格列的宽度。首先，需要在Blazor项目的wwwroot文件夹下创建一个自定义样式表，例如“custom.css”文件。

接下来，我们可以在该文件中定义一个CSS类来指定数据网格列的宽度：

.datagrid-column {
  width: 100px;
}

在主布局文件中引用自定义样式表：

然后，在数据网格组件的列定义中使用CSS类：

通过这种方式，我们可以将数据网格的列宽度减小为100像素。当然，您可以根据实际需要使用不同的宽度值来覆盖CSS类。

完整的示例代码如下：

在wwwroot文件夹下创建“custom.css”文件：

.datagrid-column {
  width: 100px;
}

在主布局文件中引用自定义样式表：

在组件中定义数据网格：

@inject HttpClient httpClient

DataGrid Example



@code {
    List data = new List();

    List columns = new List
    {
        new DataGridColumn
        {
            Field = "title",
            Header = "Title",
        },
        new DataGridColumn
        {
            Field = "author",
            Header = "Author",
        },
        new DataGridColumn
        {
            Field = "published",
            Header = "Published",
        },
    };

    protected override async Task OnInitializedAsync()
    {
        data = await httpClient.GetFromJsonAsync>("sample-data/books.json");
    }

    class Book
    {
        public string title { get; set; }
        public string author { get; set; }
        public DateTime published { get; set; }
    }
}