The API documentation of the GridListTile React component. Learn more about the props and the CSS customization points.
\n\n## Import\n\n```js\nimport GridListTile from \'@material-ui/core/GridListTile\';\n// or\nimport { GridListTile } from \'@material-ui/core\';\n```\n\nYou can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).\n\n\n\n## Component name\n\nThe `MuiGridListTile` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level.\n\n## Props\n\n| Name | Type | Default | Description |\n|:-----|:-----|:--------|:------------|\n| children | node | | Theoretically you can pass any node as children, but the main use case is to pass an img, in which case GridListTile takes care of making the image "cover" available space (similar to `background-size: cover` or to `object-fit: cover`). |\n| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |\n| cols | number | 1 | Width of the tile in number of grid cells. |\n| component | elementType | \'li\' | The component used for the root node. Either a string to use a HTML element or a component. |\n| rows | number | 1 | Height of the tile in number of grid cells. |\n\nThe `ref` is forwarded to the root element.\n\nAny other props supplied will be provided to the root element (native element).\n\n## CSS\n\n| Rule name | Global class | Description |\n|:-----|:-------------|:------------|\n| root | .MuiGridListTile-root | Styles applied to the root element.\n| tile | .MuiGridListTile-tile | Styles applied to the `div` element that wraps the children.\n| imgFullHeight | .MuiGridListTile-imgFullHeight | Styles applied to an `img` element child, if needed to ensure it covers the tile.\n| imgFullWidth | .MuiGridListTile-imgFullWidth | Styles applied to an `img` element child, if needed to ensure it covers the tile.\n\nYou can override the style of the component thanks to one of these customization points:\n\n- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).\n- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).\n- With a theme and an [`overrides` property](/customization/globals/#css).\n\nIf that\'s not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/GridListTile/GridListTile.js) for more detail.\n\n## Demos\n\n- [Grid List](/components/grid-list/)\n\n'},brSs:function(e,n,s){"use strict";s.r(n),s.d(n,"default",(function(){return l}));var t=s("mXGw"),i=s.n(t),o=s("e+1t"),a=s("kVtE"),r=i.a.createElement,p=s("qVqe");function l(e){var n=e.docs;return r(o.a,{docs:n})}l.getInitialProps=function(){var e=Object(a.a)({pageFilename:"api/grid-list-tile",requireRaw:p});return{demos:e.demos,docs:e.docs}}},qVqe:function(e,n,s){var t={"./grid-list-tile.md":"HYek"};function i(e){var n=o(e);return s(n)}function o(e){if(!s.o(t,e)){var n=new Error("Cannot find module '"+e+"'");throw n.code="MODULE_NOT_FOUND",n}return t[e]}i.keys=function(){return Object.keys(t)},i.resolve=o,e.exports=i,i.id="qVqe"}},[["AxUp",0,2,1,3,5,4,6,7,8,9,10,11,12,14,13,15,16,17,18]]]);