Installation steps

Install grid package from nuget.

> Install-Package NonFactors.Grid.Mvc6

Include grid partial views to your shared views folder, they can be found at:

Windows: %UserProfile%\.nuget\packages\NonFactors.Grid.Mvc6\{version}\content\Views\
Linux/Mac: ~/.nuget/packages/NonFactors.Grid.Mvc6/{version}/content/Views/

MVC views application

<Project name>
    Views
        Shared
+           MvcGrid
+               _Grid.cshtml
+               _Pager.cshtml

Razor pages application

<Project name>
    Pages
+       MvcGrid
+           _Grid.cshtml
+           _Pager.cshtml
                

Add grid extensions to known namespaces in _ViewImports.cshtml

+@using NonFactors.Mvc.Grid;
@using System;

Include grid styling sheet to your project and your page, it can be found at:

Windows: %UserProfile%\.nuget\packages\NonFactors.Grid.Mvc6\{version}\content\css\mvc-grid\
Linux/Mac: ~/.nuget/packages/NonFactors.Grid.Mvc6/{version}/content/css/mvc-grid/
<html>
    <head>
+       <link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet">
    </head>
    <body>
        @RenderBody()
    </body>
</html>

Include grid scripts to your project and your page, it can be found at.

Windows: %UserProfile%\.nuget\packages\NonFactors.Grid.Mvc6\{version}\content\js\mvc-grid\
Linux/Mac: ~/.nuget/packages/NonFactors.Grid.Mvc6/{version}/content/js/mvc-grid/
<html>
    <head>
        <link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet">
    </head>
    <body>
        @RenderBody()

+       <script src="~/js/mvc-grid/mvc-grid.js"></script>
    </body>
</html>

Initialize grid instances after rendering grid html

<html>
    <head>
        <link href="~/css/mvc-grid/mvc-grid.css" rel="stylesheet">
    </head>
    <body>
        @RenderBody()

        <script src="~/js/mvc-grid/mvc-grid.js"></script>
        <script>
+           document.querySelectorAll(".mvc-grid").forEach(element => new MvcGrid(element));
        </script>
    </body>
</html>