Card Layout Demo

A MainGrid can show its records as cards instead of table rows. The cards wrap to fill the grid's width, show each contact's photo beside their name, and keep everything else the grid does: views, search, sorting, paging and selection.

Contacts as Cards

Pick a minimum card width to watch the cards reflow: MinCardWidth takes any CSS length and defaults to 320px. The toolbar's dropdown switches between cards, table rows and automatic, which shows cards only on a phone, and the Sort button sorts the cards, which have no column headers to click.

Blazor example Razor
Anyone can view contacts in the grid below. Log in to create, view, and update your own contacts. 200px260px320px400px50%
All ContactsMy Contacts
AutomaticTableCards
All ContactsMy Contacts
AutomaticTableCards
Page size 102050100
Abagail Miller
Mobile Phone
(501) 801-9303
Email
Abagail_Miller30@yahoo.com
Company Name
Lowe Inc
Age
26
Birthday
4/8/2000
Abdul Pollich
Mobile Phone
(319) 579-4439
Email
Abdul73@yahoo.com
Company Name
Wiza, Bradtke and Hintz
Age
70
Birthday
8/3/1956
Abel Parisian
Mobile Phone
(631) 444-9854
Email
Abel84@gmail.com
Company Name
Raynor - Lakin
Age
21
Birthday
8/16/2005
Abigale Kuvalis
Mobile Phone
(369) 810-9954
Email
Abigale71@gmail.com
Company Name
Murazik Group
Age
58
Birthday
3/14/1968
Adell Paucek
Mobile Phone
(260) 615-0566
Email
Adell99@yahoo.com
Company Name
Windler, Toy and D'Amore
Age
47
Birthday
12/6/1979
Adella Roob
Mobile Phone
(535) 638-9390
Email
Adella.Roob88@hotmail.com
Company Name
Pollich - Kling
Age
67
Birthday
6/4/1959
Adolf Weber
Mobile Phone
(978) 300-6533
Email
Adolf.Weber10@gmail.com
Company Name
West Group
Age
69
Birthday
5/22/1957
Adonis Torphy
Mobile Phone
(842) 804-9308
Email
Adonis_Torphy35@hotmail.com
Company Name
Mohr and Sons
Age
34
Birthday
8/8/1992
Agustin Goyette
Mobile Phone
(374) 932-0000
Email
Agustin_Goyette@gmail.com
Company Name
Lebsack, Homenick and Carter
Age
34
Birthday
1/8/1992
Agustin Rau
Mobile Phone
(986) 867-9045
Email
Agustin_Rau@gmail.com
Company Name
Lehner Group
Age
40
Birthday
2/24/1986
Aidan Kihn
Mobile Phone
(800) 748-6993
Email
Aidan_Kihn@yahoo.com
Company Name
Boyer - Schaefer
Age
37
Birthday
3/27/1989
Aileen Fahey
Mobile Phone
(234) 070-9387
Email
Aileen_Fahey@yahoo.com
Company Name
Funk and Sons
Age
25
Birthday
8/12/2001
Aileen Walsh
Mobile Phone
(127) 426-0490
Email
Aileen75@gmail.com
Company Name
Hyatt - Toy
Age
45
Birthday
9/22/1981
Aisha Collins
Mobile Phone
(186) 696-4315
Email
Aisha.Collins@gmail.com
Company Name
Balistreri, Heller and Murphy
Age
36
Birthday
5/6/1990
Aiyana Upton
Mobile Phone
(703) 053-8351
Email
Aiyana_Upton30@gmail.com
Company Name
Abshire - Marks
Age
41
Birthday
10/9/1985
Al Leannon
Mobile Phone
(140) 969-5761
Email
Al71@yahoo.com
Company Name
Schroeder - Murphy
Age
35
Birthday
2/25/1991
Alana Barton
Mobile Phone
(621) 817-8829
Email
Alana_Barton48@hotmail.com
Company Name
Bashirian - Weber
Age
38
Birthday
2/4/1988
Alanna Schowalter
Mobile Phone
(966) 074-0638
Email
Alanna.Schowalter53@gmail.com
Company Name
Schmeler and Sons
Age
30
Birthday
11/11/1996
Albert Kreiger
Mobile Phone
(439) 429-5128
Email
Albert50@yahoo.com
Company Name
Hyatt - Toy
Age
46
Birthday
8/24/1980
Alberto Kutch
Mobile Phone
(018) 306-3524
Email
Alberto_Kutch@hotmail.com
Company Name
VonRueden, Hilpert and Borer
Age
56
Birthday
12/8/1970