Properties of a Grid Item

Grid Item
PropertyGuidelineVLCStyleComparison
1 Grid Item Padding 8px gridItemSelectedBorder View Comparison
2 Thumbnail Dimensions Fill 7, with 1 as padding, a 16:9 aspect ratio, and a minimum width of 305px -
3 Title Top Margin 12px gridItemTitle_topMargin View Comparison
4 Title Font Size 13px gridItemTitle_height View Comparison
5 Subtitle Top Margin 9px gridItemSubtitle_topMargin View Comparison
6 Subtitle Font Size 12px gridItemSubtitle_height View Comparison
7 Cell width Responsive and maximized, constrained by available window width, minimum thumbnail width, and horizontal spacing (gutter) of grid items -

General Layout Properties

Consistency Guidelines
PropertyGuidelineVLCStyleComparison
1 Topmost Layout - Top Margin 32px layoutTitle_top_padding View Comparison
2 Layout Title - Bottom Margin 10px layoutTitle_bottom_padding View Comparison
3 Spacing Between Vertically Aligned Layouts 42px gridView_spacing / tableView_spacing View Comparison
4 Layout Title Font Size 24px - View Comparison
4 Layout Title Visibility Always visible -
5 Mixing Layout Types Only mix layout types when the combination of content requires it - View Comparison

Grid Layout Dynamic Properties

Dynamic Properties
PropertyGuidelineVLCStyleComparison
1 Layout Left/Right Margins Gradual scaling from 16 to 24px when the layout size is between 600 and 1000px dynamicAppMargins View Comparison
2 Gutter two items: 26px
three items: 28px
four or more items: 32px		 - View Comparison
3 Max items per row 16:9 ratio: 6
1:1 ratio: 10 (12 if file manager)		 - View Comparison