---
title: grid
framework: tvml
role: collectionGroup
path: tvml/grid
---

# grid

Arranges elements in a grid pattern.

## Overview

Overview Items inside of the grid are displayed in a row that is bound by the size of the screen. Items are automatically moved to another row after a row is filled. Here’s an example of three lockup elements inside of a grid element. <grid>     <section>         <lockup>             <img src="http://localhost:9001/images/Car_Movie_250x375_A.png" width="182" height="274" />             <title>Movie 1</title>         </lockup>         <lockup>             <img src="http://localhost:9001/images/Car_Movie_250x375_B.png" width="182" height="274" />             <title>Movie 2</title>         </lockup>         <lockup>             <img src="http://localhost:9001/images/Car_Movie_250x375_C.png" width="182" height="274" />             <title>Movie 3</title>         </lockup>     </section> </grid> Subelements of grid header section Elements that Use grid collectionList relatedContent

## Topics

### Valid TVML Styles

- [margin](tvml/margin.md)
- [padding](tvml/padding.md)
- [tv-interitem-spacing](tvml/tv-interitem-spacing.md)
- [tv-line-spacing](tvml/tv-line-spacing.md)

### Valid TVML Attributes

- [binding](tvml/binding.md)
- [autoHighlight](tvml/autohighlight.md)
- [itemID](tvml/itemid.md)
- [needsMoreThreshold](tvml/needsmorethreshold.md)
- [prototype](tvml/prototype.md)
- [theme](tvml/theme.md)

## See Also

### Container Elements

- [carousel](tvml/carousel.md)
- [imgDeck](tvml/imgdeck.md)
- [infoTable](tvml/infotable.md)
- [organizer](tvml/organizer.md)
- [row](tvml/row.md)
- [section](tvml/section.md)
- [stack](tvml/stack.md)
- [shelf](tvml/shelf.md)