{"_id":"@material/grid-list","_rev":"278-12e29e380aab664d927bdb8ecb421bd3","name":"@material/grid-list","time":{"modified":"2022-12-23T07:26:56.869Z","created":"2016-07-21T00:01:11.941Z","2.0.0-dev.20160721":"2016-07-21T00:01:11.941Z","2.0.0-dev.20160721a":"2016-07-21T00:55:35.031Z","2.0.0-dev-20160723":"2016-07-23T00:02:35.199Z","2.0.0-dev.20160810":"2016-08-10T10:38:56.089Z","2.0.0-dev.20160822":"2016-08-21T22:21:01.296Z","2.0.0-dev.20160822-1":"2016-08-22T00:37:48.504Z","2.0.0-dev.20160903":"2016-09-03T08:16:53.278Z","0.1.0":"2017-03-20T16:26:45.096Z","0.1.1":"2017-04-03T15:28:04.067Z","0.2.0":"2017-04-17T15:43:08.920Z","0.2.1":"2017-04-18T14:51:22.225Z","0.2.2":"2017-05-15T16:26:05.633Z","0.2.3":"2017-05-30T19:04:39.132Z","0.2.4":"2017-06-12T15:53:20.341Z","0.2.5":"2017-06-26T16:10:56.370Z","0.2.6":"2017-07-10T15:58:51.087Z","0.2.7":"2017-07-24T15:49:18.902Z","0.2.8":"2017-08-07T20:48:29.005Z","0.2.9":"2017-08-21T17:27:53.730Z","0.2.10":"2017-08-24T14:46:48.044Z","0.2.11":"2017-09-05T20:16:10.604Z","0.2.12":"2017-09-18T18:35:43.583Z","0.2.13":"2017-10-02T21:11:47.350Z","0.24.0":"2017-10-30T19:11:30.454Z","0.25.0":"2017-11-13T20:02:28.151Z","0.27.0":"2017-12-11T19:35:34.980Z","0.28.0":"2018-01-08T18:55:13.349Z","0.29.0":"2018-01-22T18:30:57.689Z","0.30.0":"2018-02-05T22:02:52.288Z","0.33.0":"2018-03-19T16:40:02.033Z","0.34.0":"2018-04-02T21:51:55.980Z","0.35.0":"2018-04-23T22:40:21.328Z","0.36.0":"2018-06-04T15:37:55.346Z","0.37.1":"2018-07-16T21:19:26.615Z","0.38.0":"2018-07-30T17:06:13.685Z","0.39.0-0":"2018-08-16T15:16:09.997Z","0.39.0":"2018-08-27T17:40:12.156Z","0.39.1":"2018-08-31T21:36:07.081Z","0.40.0":"2018-09-24T20:00:42.068Z","0.40.1":"2018-10-08T20:54:06.666Z","0.41.0":"2018-10-29T20:21:43.947Z","0.42.0":"2018-12-04T22:54:52.911Z","0.43.0":"2019-01-07T19:48:53.944Z","0.44.0":"2019-02-04T18:23:34.603Z","0.44.1":"2019-02-19T23:02:53.126Z","1.0.0-0":"2019-02-27T23:59:15.066Z","1.0.0-1":"2019-03-04T23:33:08.896Z","1.0.0":"2019-03-06T21:07:54.402Z","1.0.1":"2019-03-11T22:07:08.518Z","1.1.0":"2019-03-26T19:25:42.192Z","2.3.0":"2019-05-28T21:23:55.636Z","3.0.0-alpha.0":"2019-06-12T04:06:41.349Z","3.0.0-alpha.1":"2019-06-12T19:02:06.423Z","3.0.0":"2019-06-25T22:27:52.786Z","3.1.0-alpha.0":"2019-07-16T13:29:00.242Z","3.1.0":"2019-07-22T22:02:35.713Z","4.0.0-alpha.0":"2019-08-07T21:09:22.240Z","4.0.0-canary.0":"2019-09-05T04:37:48.727Z","4.0.0-canary.1":"2019-09-09T20:20:45.025Z","3.2.0":"2019-09-12T21:53:41.643Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:32.264Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:19.096Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:10.424Z","4.0.0-canary.199534d61.0":"2019-09-27T18:57:41.960Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:13.331Z","4.0.0-canary.735147131.0":"2019-10-16T01:23:34.699Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:01:33.271Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:04:33.155Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:08:37.973Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:38:16.943Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:10:41.441Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:10.009Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:02.420Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:56:44.827Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:58:55.852Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:01:36.965Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:13.163Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:01:19.035Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:10:51.088Z","4.0.0":"2019-11-02T18:11:43.814Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:33:42.240Z","5.0.0-canary.58500806e.0":"2019-11-08T15:35:47.749Z","5.0.0-canary.66299b646.0":"2019-11-08T20:33:45.287Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:14.997Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:07:16.130Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:42:27.851Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:37:44.135Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:58:39.986Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:30:50.780Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:05:57.798Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:32:53.425Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:48:36.401Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:19:27.980Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:09:52.832Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:10:38.566Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:10:56.153Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:55:06.094Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:16:49.625Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:07:27.078Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:08.639Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:19:24.190Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:20:20.831Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:05.196Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:22:45.631Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:09.445Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:55:54.255Z","5.0.0-canary.50f110a6c.0":"2019-12-10T16:59:39.210Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:16:23.924Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:47:19.450Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T18:59:20.272Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:09:52.383Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:36:50.261Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:10:00.936Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:33:22.069Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:40:41.725Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:16:52.658Z","5.0.0-canary.391674a26.0":"2019-12-18T19:17:02.881Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:05.289Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:20:13.192Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:24:07.042Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:49:50.658Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:24:55.748Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:14:19.000Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:27:09.102Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:24:11.395Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:09:43.992Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:26:50.108Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:47:41.959Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:50:02.326Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:54:41.347Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:45:39.267Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:03:05.403Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:09.366Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:42:23.039Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:09:31.592Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:22:26.342Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:01.546Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:26:20.862Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:55:39.245Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T14:59:50.810Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:16:04.088Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:10:07.884Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:39:31.681Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:15:16.465Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:25:57.734Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:39:41.013Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:16:54.884Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:19:17.395Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:20:54.799Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:22:13.469Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:56:52.777Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:27:46.703Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:41:32.772Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:10:18.590Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:10:43.499Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:22:19.726Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:42:37.237Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:58:03.861Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:16:13.197Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:12.308Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:40:14.153Z","5.0.0-canary.1eb032637.0":"2020-01-08T22:59:58.449Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:00:48.652Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:10:14.218Z","5.0.0-canary.aab102017.0":"2020-01-10T00:12:20.387Z","5.0.0-canary.426913342.0":"2020-01-10T01:44:10.828Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:25:20.943Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:56:52.108Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:26:38.896Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:18:49.452Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:31:35.266Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:13:28.362Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:15:23.400Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:52:45.463Z","5.0.0-canary.60354c577.0":"2020-01-14T22:45:55.528Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:38:30.676Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:00.767Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:10:18.378Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:47:32.098Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:48:17.519Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:17:29.174Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:23:54.064Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:46:59.166Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:06:56.732Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:36:40.739Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:00:16.649Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:17:16.236Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:20:45.057Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:35:59.051Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:30:50.337Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:39:46.095Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:11:30.652Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:49:40.092Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:37:19.961Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:46:03.928Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:00.906Z"},"maintainers":[{"email":"hi@yef.im","name":"yefim"},{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"aomarks@gmail.com","name":"aomarks"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"sayrisuarez@google.com","name":"ssuarez"},{"email":"brian.t.vann@gmail.com","name":"taylorv"}],"dist-tags":{"latest":"4.0.0","next":"4.0.0-alpha.0","canary":"5.0.0-canary.ebc296937.0"},"versions":{"0.1.0":{"name":"@material/grid-list","version":"0.1.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.1.2","@material/rtl":"^0.1.2","@material/theme":"^0.1.2","@material/typography":"^0.2.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.1.0","scripts":{},"_shasum":"0878b7a19a78fc08e95feffadeaa0a1b88cc148b","_from":".","_npmVersion":"3.10.10","_nodeVersion":"7.2.1","_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"dist":{"shasum":"0878b7a19a78fc08e95feffadeaa0a1b88cc148b","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.1.0.tgz","integrity":"sha512-/thCxJfMOoxoBZ6TymFWaViZXbFokbApZHhfZ0W09SHVR+l0u/qPG3/wLpETeJqgXgqPnmMKIBQuBWoZRvo/3A==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgk46/wTBJvCKLKFX5ZP8Ejkkl4BiDQchDsMNKzJgVbAIgHLWLThCdCKr8BxPKyGNbV4i3UMkXxsTomcvMuvShsp0="}]},"maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/grid-list-0.1.0.tgz_1490027204388_0.6709298298228532"},"directories":{}},"0.1.1":{"name":"@material/grid-list","version":"0.1.1","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.1.2","@material/rtl":"^0.1.2","@material/theme":"^0.1.3","@material/typography":"^0.2.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.1.1","scripts":{},"_shasum":"168c5e02c498c98e12c0670a2d0dc1fe83bf4802","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.6.0","_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"dist":{"shasum":"168c5e02c498c98e12c0670a2d0dc1fe83bf4802","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.1.1.tgz","integrity":"sha512-iQQte11OL/3k3RI1nZTevHEx+AM/hweEZCzzYvoYU47h3e+/3aHngkuJHIidtPpxhf+T8LZwdGsy1crfPNyLJA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClpBDvHNJeH6uLCq/tgfS1YA9RNWEAw9/uylRGj0PG7gIgNh/4Q/bowrnlz5ajQ0dbgKmwRe9ynqu6vDzeg5MDm+0="}]},"maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/grid-list-0.1.1.tgz_1491233283229_0.4786644880659878"},"directories":{}},"0.2.0":{"name":"@material/grid-list","version":"0.2.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.1.2","@material/rtl":"^0.1.2","@material/theme":"^0.1.3","@material/typography":"^0.2.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.0","scripts":{},"_shasum":"27d361be170e0eecdd0a568a0a756f4349983458","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.6.0","_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"dist":{"shasum":"27d361be170e0eecdd0a568a0a756f4349983458","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.0.tgz","integrity":"sha512-WUgVDlxy3xQnCym1JwLOmjxUSbRqZhz4L8Bd3vv1C/L1MJSLSFUrkYf7Avn2/khkjCO9LfN6RRE/2DVkNgEBSA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDt4qC8p1vyV2eQlfhN2NoG94tNWoXPVGFzdjWp8+6/EwIhAKc3GrJik1EM6PMskNDbFuk0oKf6/XC+rw+sqIs22ARR"}]},"maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/grid-list-0.2.0.tgz_1492443786708_0.7182415621355176"},"directories":{}},"0.2.1":{"name":"@material/grid-list","version":"0.2.1","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.1.2","@material/rtl":"^0.1.3","@material/theme":"^0.1.4","@material/typography":"^0.2.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.1","scripts":{},"_shasum":"845e5bb84811f0a384cc1fe680577664e32525a6","_from":".","_npmVersion":"4.1.2","_nodeVersion":"7.6.0","_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"dist":{"shasum":"845e5bb84811f0a384cc1fe680577664e32525a6","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.1.tgz","integrity":"sha512-/Z3GESbZUWauQVRprS4oDCJFSFJpbW6xBLvpQsxirVxJd4j37n8/7BvmtRmgkSghHPHzSrmeOAOmtA0TohUqMw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQChll2z/OuXmUWDx+JUz0Xpu8VH/JVHfLx+b8WoaWWcGAIhAMnasgt0qHuFv7+3QyZtIEX9f5NR+J+RgNFl1G3BHjbT"}]},"maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/grid-list-0.2.1.tgz_1492527081415_0.6134617743082345"},"directories":{}},"0.2.2":{"name":"@material/grid-list","version":"0.2.2","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.1.3","@material/rtl":"^0.1.4","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.2","scripts":{},"_shasum":"6d820aacddd284805b621e712fb634a5f175a39f","_from":".","_npmVersion":"3.10.10","_nodeVersion":"7.2.1","_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"dist":{"shasum":"6d820aacddd284805b621e712fb634a5f175a39f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.2.tgz","integrity":"sha512-CveN519Ch2D5dzjgb6jxIa3a/1WEldbNaCqDPVfYeq1dIWXWHlylfk3Gaq6WbF4I44C0+gLCixzQtwAuCpPU+g==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDxZNLnMrwozbqzGC9ZPPs7qCWtyHNQZMOcNFDlQr3BxQIgcBAz4VnU3TyJxOxK3UCgb46vFN76Ryl6zQLCdkX0QUw="}]},"maintainers":[{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"cristobalchao","email":"cchao87@gmail.com"},{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},{"name":"material-admin","email":"traviskaufman+npm@google.com"},{"name":"sgomes","email":"mail@sgomes.io"},{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},{"name":"yeelan0319","email":"yiranmao@gmail.com"}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/grid-list-0.2.2.tgz_1494865564772_0.7420511457603425"},"directories":{}},"0.2.3":{"name":"@material/grid-list","version":"0.2.3","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.0","@material/rtl":"^0.1.4","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.3","scripts":{},"_shasum":"d1a9beb026130582abc7fcca8a6a15d34d99ce95","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.8.0","_npmUser":{"name":"ljepsen3541","email":"ljepsen3541@gmail.com"},"dist":{"shasum":"d1a9beb026130582abc7fcca8a6a15d34d99ce95","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.3.tgz","integrity":"sha512-pwuT84Al7mDIG2KwMHXwxA1QjJpRC7brNP9GDSuxVLddKkd17xLPYs1BHz4i4UFS9CwZMNUw83DAXDI40Pp4uw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCFzwxe8BANWgRprgx+Xgca0/pi5T88nUC9UBNt9w2j0gIhAK1jrz2s+wZMYBauEwIkNkkvI4e7RJ+YavzksFlpbkob"}]},"maintainers":[{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"ljepsen3541@gmail.com","name":"ljepsen3541"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"cchao87@gmail.com","name":"cristobalchao"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"traviskaufman+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.3.tgz_1496171079054_0.6121172935236245"},"directories":{}},"0.2.4":{"name":"@material/grid-list","version":"0.2.4","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.0","@material/rtl":"^0.1.5","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.4","_npmVersion":"5.0.3","_nodeVersion":"8.0.0","_npmUser":{"name":"traviskaufman","email":"travis.kaufman@gmail.com"},"dist":{"integrity":"sha512-biWuL1YDl40Dn1LbqDzu1SNJBdm97UdrY+ngsH0drcKnUhzhl5IJQ8yyMoyLtYBOLgs2yCEDIcRuc+vsXFVbWw==","shasum":"c8bb519788773d0d14bef463c26b103a3e46f34f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.4.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDF14RbKk7zU/VOZicuRVVgEu9IKLro1o5qof3Zi7zwrwIgMhj+ii5YHHNWXSVqgBuYJhcaDMbD26aYPWptDdBuFUs="}]},"maintainers":[{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"ljepsen3541@gmail.com","name":"ljepsen3541"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"cchao87@gmail.com","name":"cristobalchao"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"traviskaufman+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.4.tgz_1497282799249_0.33018129505217075"},"directories":{}},"0.2.5":{"name":"@material/grid-list","version":"0.2.5","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.1","@material/rtl":"^0.1.6","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.5","scripts":{},"_shasum":"20fe8de5d91597cae03180e63bcae28e9c662c46","_from":".","_npmVersion":"3.10.9","_nodeVersion":"6.9.2","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"dist":{"shasum":"20fe8de5d91597cae03180e63bcae28e9c662c46","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.5.tgz","integrity":"sha512-Bc3uXpdz30TGM4g/udi49WWTEKwX5sDircBmOarnHNJ6SN4/34wjYpBtHN555UETRIO9O7xcF4+0Z9vedE97uQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBxHfrMcrsT1sGtBsuGXKP12OKvhvmgrZgGXrTlpdd9XAiEA4y7HRwuNNzPufm97b0KwTexUXWuGLufFvdyyVs8WwpU="}]},"maintainers":[{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"cchao87@gmail.com","name":"cristobalchao"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.5.tgz_1498493455288_0.5922740034293383"},"directories":{}},"0.2.6":{"name":"@material/grid-list","version":"0.2.6","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.2","@material/rtl":"^0.1.6","@material/theme":"^0.1.5","@material/typography":"^0.2.2"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.6","scripts":{},"_shasum":"6c1836f0b357afe90e1f12356960ab76f5982faf","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"dist":{"shasum":"6c1836f0b357afe90e1f12356960ab76f5982faf","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.6.tgz","integrity":"sha512-t8IX1HnPM3fM8wDcNbWlrQx8tddhwj+wLXJQhONbWR1H/Q6P9JS5tYLAWph0DxOteeZR0WSfLTsFhKrJLI6+EQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYTFOTiHjPNWbhzmiakzPPfX+CSQJEY7On3xp2fhj2RAiEAymUUfSGF1SYRLPYPAuPctEOBXhpibCf9aikCy36A75Q="}]},"maintainers":[{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"cchao87@gmail.com","name":"cristobalchao"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.6.tgz_1499702330925_0.7528149189893156"},"directories":{}},"0.2.7":{"name":"@material/grid-list","version":"0.2.7","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.3","@material/rtl":"^0.1.7","@material/theme":"^0.1.6","@material/typography":"^0.2.3"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.7","scripts":{},"_shasum":"73da8f84de735bf48640d455299407d3c99f0548","_from":".","_npmVersion":"3.10.10","_nodeVersion":"7.2.1","_npmUser":{"name":"yeelan0319","email":"yiranmao@gmail.com"},"dist":{"shasum":"73da8f84de735bf48640d455299407d3c99f0548","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.7.tgz","integrity":"sha512-H30AMpkHjtqCC/4xU8oz+snsELLMTfoVswK//bggjg7UgFZN1b9rqD7MRfUIZD/M+hh4P0lcdIrIPAB8+wmJ1Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCAgKjr88OlJd+bfDczlrhdSZhqg0UOOXsu+xKJViIHCwIhAI7yRV5g+GAE4TOfkvFImeBv08IrTBccxGKltpWeQGz+"}]},"maintainers":[{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"cchao87@gmail.com","name":"cristobalchao"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.7.tgz_1500911357913_0.2384689273312688"},"directories":{}},"0.2.8":{"name":"@material/grid-list","version":"0.2.8","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.3","@material/rtl":"^0.1.7","@material/theme":"^0.1.7","@material/typography":"^0.3.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.8","scripts":{},"_shasum":"90a91465c485e0ba5c7e85e46e7b076e01af93f5","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.1","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"dist":{"shasum":"90a91465c485e0ba5c7e85e46e7b076e01af93f5","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.8.tgz","integrity":"sha512-tKyU23f1lIrZD76k1EFCIgDC90JFttoSG/mjXIRs2AhafJZB8xlVvvBtrOVcCm2p7hGqRFEY/jNjm3Pd6FZvJw==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICugPoZteOh0pNXaSLdlP9xJ7YCUyK/EXQ7irPtZUYnIAiBfExCgxr0rQFFZDQ5ralInC6vdXSgbUCvH0SUCInSQDQ=="}]},"maintainers":[{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"cchao87@gmail.com","name":"cristobalchao"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.8.tgz_1502138908916_0.6276295385323465"},"directories":{}},"0.2.9":{"name":"@material/grid-list","version":"0.2.9","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.4","@material/rtl":"^0.1.7","@material/theme":"^0.2.0","@material/typography":"^0.3.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.9","_npmVersion":"5.3.0","_nodeVersion":"8.1.4","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"dist":{"integrity":"sha512-P094tJnddctTaw4xCGwtcrOGiCfXFh9HSAdM133WO6eT0uC+bTV5c97rjeM43JOMcfCzcuIpqrL1jC/wLcL4Hg==","shasum":"a6bcdceafcb125c0b3d26450a52809546835b75f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.9.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH/jFC1Qn/9pSmzDaLwAy2qyJygFhv5RfO5frE+0FgCeAiA44jKZI0jZt9Ezd+G77tZ/+8oIYSN5neN0bnOQH+2Mew=="}]},"maintainers":[{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"cchao87@gmail.com","name":"cristobalchao"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.9.tgz_1503336472793_0.19680118653923273"},"directories":{}},"0.2.10":{"name":"@material/grid-list","version":"0.2.10","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.5","@material/rtl":"^0.1.7","@material/theme":"^0.2.0","@material/typography":"^0.3.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.10","_npmVersion":"5.3.0","_nodeVersion":"8.1.4","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"dist":{"integrity":"sha512-MQN5ibSF0cGW9x5ytGFsKDKD7osSH67drZfEanbAIdmk65D6KyjJ/PdbbvPON9xGXpTpa3iXemZrxDSLR8J8+g==","shasum":"59381e8bba6df3260347cbbc03d488d77719f506","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.10.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDD8PUZ9uxJsrRBzSNS3F1eUOBkZ5At60v3UX8HCtLgEgIgTWkuHrlf5RZqSvWEdDGKRSiIi7bohWwkqCe6jAqj7aI="}]},"maintainers":[{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"cchao87@gmail.com","name":"cristobalchao"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.10.tgz_1503586006976_0.570409786188975"},"directories":{}},"0.2.11":{"name":"@material/grid-list","version":"0.2.11","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.5","@material/rtl":"^0.1.7","@material/theme":"^0.3.0","@material/typography":"^0.3.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.11","scripts":{},"_shasum":"dc29f88edf533d30843deab5ef13cb5baaa216df","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.0","_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"dist":{"shasum":"dc29f88edf533d30843deab5ef13cb5baaa216df","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.11.tgz","integrity":"sha512-0bHlxLZHWweUxquYBmzhstB1Wa4h781oaDO/lhYLJ6Vpvme9TRU5TJ/t4G1yYLJJdScLoXiavqg1woclIXoNBQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDmq1QgyTSMw542AqGSOavyLLVvl/Gr8q9ULgXgtNK07gIhAIBKVm7ilLwCe4RW9CiZY9WRdKQwoMso5u61PJfKZEHI"}]},"maintainers":[{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"cchao87@gmail.com","name":"cristobalchao"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"mail@sgomes.io","name":"sgomes"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.11.tgz_1504642570500_0.8669245881028473"},"directories":{}},"0.2.12":{"name":"@material/grid-list","version":"0.2.12","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.5","@material/rtl":"^0.1.8","@material/theme":"^0.3.1","@material/typography":"^0.3.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.12","_npmVersion":"5.3.0","_nodeVersion":"6.9.2","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"dist":{"integrity":"sha512-6kRIXBWdHEmYN8JcBHNsRX2q5n5iTylD0kApoNsY4cffYeefsyVtCOESrm3gIC0YWGrR2o0W7vcbOv8nP68VjA==","shasum":"7b13068145c5cf47ed2d62c5181812d75b0a442c","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.12.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3eEQMCL4yRN+AtvTvHtve0Ikyy0CKrMWYIL07av13NwIhAK6i0lB5NA46hoqRisLoTBsoXkC6yKK38aS0coNe3Z+R"}]},"maintainers":[{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.12.tgz_1505759742532_0.25752686406485736"},"directories":{}},"0.2.13":{"name":"@material/grid-list","version":"0.2.13","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.2.6","@material/rtl":"^0.1.8","@material/theme":"^0.4.0","@material/typography":"^0.3.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.2.13","scripts":{},"_shasum":"04ce198d23c710c67316f1ec5f0409829fd6bead","_from":".","_npmVersion":"4.2.0","_nodeVersion":"7.10.1","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"dist":{"shasum":"04ce198d23c710c67316f1ec5f0409829fd6bead","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.2.13.tgz","integrity":"sha512-G2+Wt7V4CyRKywqrgLdPBOlWSyzPru1UJaZM8midZqFsBYNSFLQPTejihTRf6khQ1uTiUuhd/mciNl0/8RLM1Q==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDoBCKLn9NVjFg85TJhKYcr0NZHL1c+msbn/IST0n8omAIhAK3ijmCU7f+DSHVBRVmbJa4AkppVfolIFKmBwIhoOQAt"}]},"maintainers":[{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.2.13.tgz_1506978706371_0.17648249957710505"},"directories":{}},"0.24.0":{"name":"@material/grid-list","version":"0.24.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.24.0","@material/rtl":"^0.1.8","@material/theme":"^0.24.0","@material/typography":"^0.3.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.24.0","_npmVersion":"5.3.0","_nodeVersion":"8.4.0","_npmUser":{"name":"lynnjepsen","email":"lynnjepsen@google.com"},"dist":{"integrity":"sha512-uaiVS7Z0pT0M/VzSUNi4kzTSsZu5ssbQX059G/feLdL8z1mL/c/Ph80fWTjyPV/1KUJFMQ7yAd5pMjR8aceIcg==","shasum":"1abfbe7768135789b255a8ec25b6354147f36730","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.24.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCNTrgR6FVLTrLGPi99DnR0EvUpvoNhpZf7C0miFWbhjAIhAMKFtKEldmiOXM6AVsqySfyP6cRZYIUV6irr9jqKrqoh"}]},"maintainers":[{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.24.0.tgz_1509390690336_0.37971417186781764"},"directories":{}},"0.25.0":{"name":"@material/grid-list","version":"0.25.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.24.0","@material/rtl":"^0.1.8","@material/theme":"^0.25.0","@material/typography":"^0.3.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.25.0","_npmVersion":"5.5.1","_nodeVersion":"6.9.2","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"dist":{"integrity":"sha512-oBZd9B3+9VWqpZxoQ2TweeGjAdzl8b6pPtcCgi7lZN6iR2qIZgNqm7+UYwKKCJ9/YtL3YTqFxT9piRE4V+cWKA==","shasum":"d84ad3204fcd8b599a0ded99da0a7af48da82bb3","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.25.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEaldeszlqbamgxhYQhywHETNqiB0ljPhnytIAYF2mZbAiBYywY8RiXAVQGE48i+hBeXozGX3Yf2hFFlDFoxxThR3A=="}]},"maintainers":[{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"yiranmao@gmail.com","name":"yeelan0319"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"travis.kaufman@gmail.com","name":"traviskaufman"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.25.0.tgz_1510603347156_0.6000249600037932"},"directories":{}},"0.27.0":{"name":"@material/grid-list","version":"0.27.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.24.0","@material/rtl":"^0.1.8","@material/theme":"^0.27.0","@material/typography":"^0.3.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.27.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.2","_npmUser":{"name":"amsheehan","email":"alex.m.sheehan@gmail.com"},"dist":{"integrity":"sha512-hEKGoDGu/7eIjitDZrA7oQGdrBXIPLZCR6rKgW/dRIVtjKKI8ZjMN5RkzZ2gmHyZyxAL7iTRq6KTtLfdnpWprg==","shasum":"d0ead89555a9a7aff4d3fc7cff60a221ab577483","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.27.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCShzUAEfKc5Hjq4FGgl7T9atV3GOVwO9CBZ37S+oyAyAIhAOObxovRCSSkoLyYzGcO0exKVN00H4EJyVDV6wnhcu6k"}]},"maintainers":[{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.27.0.tgz_1513020933964_0.45875369291752577"},"directories":{}},"0.28.0":{"name":"@material/grid-list","version":"0.28.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.24.0","@material/rtl":"^0.1.8","@material/theme":"^0.28.0","@material/typography":"^0.28.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.28.0","_npmVersion":"5.6.0","_nodeVersion":"8.1.4","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"dist":{"integrity":"sha512-CxXbpcjlj2E4h79kEoisfWpa3UN7Sk3VFYaMLT+XM2IZQoETLB707xzusbWyKD4/8vMOO4FRMU1dyq1Ezp++Sg==","shasum":"dc1533c878f4d6181cb1a7d6fd103c4667da4ffd","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.28.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB+TS8yu2258UfQl0d/ylBW3PTZ/lNbr97EZCuwEPaqwAiEAneZ7t8HDZpV/biEqjygNP5NTvOyBDYHi2LsJ6C56Jv0="}]},"maintainers":[{"email":"williamernest@google.com","name":"williamernest"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.28.0.tgz_1515437713180_0.20875250664539635"},"directories":{}},"0.29.0":{"name":"@material/grid-list","version":"0.29.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.29.0","@material/rtl":"^0.29.0","@material/theme":"^0.29.0","@material/typography":"^0.28.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.29.0","_npmVersion":"5.6.0","_nodeVersion":"8.7.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"dist":{"integrity":"sha512-MFFNePCtHVVcaC8cu25ukYPWde50UnfFl1Cv/sH+4hgkC+EBrCzrYcCwV/WtyFduv0HbgwVe6tdw9EXph+3zbQ==","shasum":"3b6ac8142b7dda2af349456e3f56a378c7737f81","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.29.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCrl/ANfx2IfLX2ih3Lk2pmzZGkkMTO2KNHgMmccTsyFAIhAJh2LbzrUpbyquz7Dh5RjX3iuzFt/tus2ltj6oxRrVEx"}]},"maintainers":[{"email":"williamernest@google.com","name":"williamernest"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.29.0.tgz_1516645857446_0.7730159615166485"},"directories":{}},"0.30.0":{"name":"@material/grid-list","version":"0.30.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.29.0","@material/rtl":"^0.30.0","@material/theme":"^0.30.0","@material/typography":"^0.28.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.30.0","_npmVersion":"5.3.0","_nodeVersion":"8.1.4","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"dist":{"integrity":"sha512-RjL5npvXRWqYE1ro83JjzF2JTimIqVrshCcjSCkiFcDY0AKyEBfihvtHA2JhngLgCgKBBcSHDzNL8sqGMT8AJg==","shasum":"2cdf1e9355967bbdb357dba374356a09d166d6e3","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.30.0.tgz","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC6eKfylj9AtH9qcgnSGsfklCkmk4S0dcVM4+jaldqO2QIgeSB3bbxscDRjSoCCm/20sSyZbU4hV/E1GTzoePrRNIY="}]},"maintainers":[{"email":"williamernest@google.com","name":"williamernest"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list-0.30.0.tgz_1517868171267_0.5651147058233619"},"directories":{}},"0.33.0":{"name":"@material/grid-list","version":"0.33.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.29.0","@material/rtl":"^0.33.0","@material/theme":"^0.33.0","@material/typography":"^0.28.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.33.0","_npmVersion":"5.6.0","_nodeVersion":"9.4.0","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"dist":{"integrity":"sha512-T/hfEYC45G5RkkjLqwHPfs3xE3E2g175Ijst24tdZU7TovVcXMsrmp6jZi5NOKFq1Jn4fpP9soyIg3qGwDZxig==","shasum":"fbd12596550eda28d5c460b4014a019fd9406d81","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.33.0.tgz","fileCount":10,"unpackedSize":63677,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCik1l2wXvjRLJG3OifkC1K6fhEEZNuhJQFRWisj5CMLAIgYLxnLvyRCrezZwG/X/zOCiF/hrS61GsmhLp+zX534N8="}]},"maintainers":[{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.33.0_1521477601963_0.6794369663709405"},"_hasShrinkwrap":false},"0.34.0":{"name":"@material/grid-list","version":"0.34.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.34.0","@material/rtl":"^0.34.0","@material/theme":"^0.34.0","@material/typography":"^0.34.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.34.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.0","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"dist":{"integrity":"sha512-5P7kr8xFABVHsHeUA6de7fabWLNptfqFSSMTl4wWujLIqxfinBdmnDQbFkDfpQxjyXS/r3ahSeljWFWrJRCgJg==","shasum":"677faee1edf58f352a6f6191515655019463de54","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.34.0.tgz","fileCount":10,"unpackedSize":63670,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLR0oM2mWg9zusI2CfTHrVPJ2TAT8ZbEKaRPYkR/h64AIgd3iicaB+pqlx+YfdDqbgnnlerYgawYTHvyscF9K9scg="}]},"maintainers":[{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"alex.m.sheehan@gmail.com","name":"amsheehan"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.34.0_1522705915830_0.9241017849098079"},"_hasShrinkwrap":false},"0.35.0":{"name":"@material/grid-list","version":"0.35.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.35.0","@material/rtl":"^0.35.0","@material/theme":"^0.35.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n# Grid Lists\n\n<!--<div class=\"article__asset\">\n  <a class=\"article__asset-link\"\n     href=\"https://material-components-web.appspot.com/grid-list.html\">\n    <img src=\"{{ site.rootpath }}/images/mdc_web_screenshots/grids.png\" width=\"320\" alt=\"Grid lists screenshot\">\n  </a>\n</div>-->\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the\n[Material Design Grid list spec](https://material.io/guidelines/components/grid-lists.html).\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Design & API Documentation\n\n<ul class=\"icon-list\">\n  <li class=\"icon-list-item icon-list-item--spec\">\n    <a href=\"https://material.io/guidelines/components/grid-lists.html\">Material Design guidelines: Grid lists</a>\n  </li>\n  <li class=\"icon-list-item icon-list-item--link\">\n    <a href=\"https://material-components-web.appspot.com/grid-list.html\">Demo</a>\n  </li>\n</ul>\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### Using the Foundation Class\n\nMDCGridList ships with an `MDCGridListFoundation` class that external frameworks and libraries\ncan use to build their own MDCGridList components with minimal effort. As with all foundation\nclasses, an adapter object must be provided. The adapter for Grid list must provide the following\nfunctions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth. |\n| `getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list. |\n| `getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index. |\n| `setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value. |\n| `registerResizeHandler(handler: Function) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. |\n| `deregisterResizeHandler(handler: Function) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event. |\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.35.0","_npmVersion":"5.6.0","_nodeVersion":"8.7.0","_npmUser":{"name":"bonniez","email":"bonniez@google.com"},"dist":{"integrity":"sha512-FYiqWwchY2Sz/MRS/8xLwze2Sb/yC+2QfPGNX7uJkTOZC1CXhaGCkoa+AP/4zHm+rOZtsQoYRZz5tq92Nanp7A==","shasum":"0131bc79336d52ccaaddc02b67f061e8ee6735fd","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.35.0.tgz","fileCount":10,"unpackedSize":60024,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJa3mDXCRA9TVsSAnZWagAAABMP/1fN/M1YSIw9lP7B+gcd\nO/eQWE9w8uiJEC8c6ty7suOsajL83if8VvZy1xOfZY0rTvXwWyrzPa5UvIGL\n0ewJffD5AoMh1KnItawzWeuuVerTJh+houz/ZsJzZV575wswvNM7HcR5rCCX\n6lr66K7puzR8Iwp0yIaNzepFvfKRK0YI1Na3Is73faYvZIahmLt4MGrszr1C\n4fe/sY0lAm8tXLILod0NoYu2I2oA6+O/hwSqnRgO/e2JsaEsxSB/xn6+wCfN\n0mAJ9zBBJ8h6Om2oVUd1Wp5oT17tP+A1pErDFicr+J+lFoZnOviDOjrWn70t\nmJq/+XE45dKr1ciSw8ItFT3Yhf89rZ8K2Z9LITh1HPxG7HV2xK31LmG3vvac\nuzPaqAZc+PuEddAMfoV+f5nwLyWHOYa+xc5NTuElb/YiZtNGiEGukKkZnIlj\nwO/W9K3gJ61C0E9jUhwCaOebMJGliN0aHaW0GfQHh4S06JDcKNCTQTDgLv6n\nsf8NDfGWf/pjRevrtO6gbUJA1Ba+yMe6iMN5pPFZFOVVowMy6HqtKJS8i9cM\nEfeD5mzEp8bHmZhxyJWfXf/36ufwKEVDU4zj5rokOMpL6s9oD6of1bJ58Ott\nJi4LL5ppgjGFnqnOFeWx0zCd51MsVdIbeyg0v7l+D88ot6WSm2TtVoaSk3ks\n9+ij\r\n=chJI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBlPzEV6TIymB1qfHXGU4SdoTMgvKeqrymoj3je5nuLRAiBryTbD6o0gc4UlqzHaVOtpN9KxM2zvWLfFBtMR+iZCyw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.35.0_1524523221134_0.7094782667029227"},"_hasShrinkwrap":false},"0.36.0":{"name":"@material/grid-list","version":"0.36.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.35.0","@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/typography":"^0.35.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.36.0","_npmVersion":"6.0.1","_nodeVersion":"8.11.1","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"dist":{"integrity":"sha512-MnF6NY7NmFinz9+7Gh62zNK/AIrDmROPkyPoiMPBMtAdnuC5rqEDg14yIEGvBwdjrLQZ5bp8yTUR8dBsBpZTNg==","shasum":"88b22645376904cf3c93d7177ddeef7eada9c21f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.36.0.tgz","fileCount":10,"unpackedSize":59745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbFVzUCRA9TVsSAnZWagAANsgP/iLgvfiKWBeMg0j+S8Aj\nQNfdtdkXVH680QI8ifyA3EHud4ViZb/eXUUHKorC+HQUMpQocM+Euo+fWonM\nK7dpPVc39Cr6569g917LJXTZvRdKIOMXDv8KTw0GEGKDvq6lu44/9+51hImi\nmZrWgyMGYrUFnahovGkKMaE4BDC8C7+Nwxb7AyxX4biFVxaZ9PI8YyYJhGiI\n0lp5WTCvyU8JdO0AVLuSYigvYaY2EVtO1+RDxOCI38b6Hw5ycj0ia9SRrg40\nmDMUccSbNKAhK4/Rp77Sl+o5TohN6DeCXw5agEiQtp1NJP+thLhb3fYPDEYw\n6/++Q8vh4h6iWXXfvZuesKx7WizsNxhN0jVhVApoRw+Naf6j4nCmiLhzZUVs\nZw4YhJXsqy3MZSdJ+zMJdKqs8f3J5vNnJhLBtvaT308qjpDAgyLmz0UIkXk1\nqYVa2YwJtaVwG0vzifdOsPFdZ5kBUbQ4u2f8KPTtxbyBRKile4+HjD8ZBh9V\n4LANucGl79SHpjPBTrgd/AIpWFmgVQVa9eBSf84Hp3CNaJIdJeBWP5CXuDc5\nIhDxbWOk3Vz0BrbpkioBRCH+u9sqiZRes//8tTXp/h4aIhqEph6iLq6Zs2gL\ngnNxukDhp/bsOeq2zmlH70jlB1jq0hqxV3p2SJInbrUgVim127jgeyURwovO\nUwda\r\n=QJi3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCD5qDoc6QHWeRnrIGhhh+uoMoHNjy8Bm3Y8EhgwpVOOwIhAJHZnvyhSrK9z8zIKgl1I6XlM4bn5XtmxUejlZRvcXBH"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.36.0_1528126675216_0.9836416148992229"},"_hasShrinkwrap":false},"0.37.1":{"name":"@material/grid-list","version":"0.37.1","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.35.0","@material/rtl":"^0.36.0","@material/theme":"^0.35.0","@material/typography":"^0.37.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.37.1","_npmVersion":"6.2.0","_nodeVersion":"10.3.0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"dist":{"integrity":"sha512-YbeFceFfEtPiFUuCHTJwOjIzujkiQCK9vZ+cmJglv4zHd9nnFS7sJqY6POxjwi1NKmC2yyZattagqV/V31WRjQ==","shasum":"b76b328226e5b781a961e3166ed487b7ef97e10f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.37.1.tgz","fileCount":10,"unpackedSize":59745,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbTQveCRA9TVsSAnZWagAAoMcP/R5trm/DDc0E/L/nlPbo\nK0BNbvfNamQtOpQ5Uqc4a7YReCYhHMTMDoYvESw3+SWHq4qwzGqHqqSeCcqd\nKMybxywOBX4bFzajCU6dIQmCkCU6zYDOBNQ7QH4iynnhN9FEoyw3L9YoRziM\nn5jojkJdO8ywcfFBQV7GVixmIpv85DYXbpPWhHE+QnohtLDljOPmeNmhUyXt\nQE7IwdixpI8F/dzMJodo9kb8VoAXaFNuiPxfeG+gdMDCX5XXRW8A9AGxizBu\n50quY5jMQm1gMtxxGIp+OsBmhX+gdv/6cGCNo/EGpB1MGFl+PB0/zi3y55rV\nCfUCjwR8Bq5bOAcdGJ5qdG0AV0gR8+NRhCKM5SDR70v0iJthSExA4QsdkZdA\nl4LnMw7mopnOP3j8frn3dXTGOl2FXR+OTyZqPmCu9sHgItTr/BOV9z0wFlgl\nnIUYc77+/3oxmuqcP4YUCuSyusCfA8wRce0khcq/Ok4LX6zWpyYGZJH2dtS2\n/er+4Yaja0uBmZ0gWS7Vl5npZC3eXQQdvoQ0ySVDc3N3CiGhRGobxT+D76It\n4N2yb/owLKYf15gM+fn125sEP4v3aouieWqCBXLWGGjCe/1GA9Z39dEn42YV\nAipDv8GlI7pk1TilSuywbnLyAUj1GFtS2C1NzVFh/iHH0CPPn21NWPDe5cDq\nbY7q\r\n=Ftrq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHuHiM8LXLyHUIIrqkUAY9XsIzZyBU238UjjsOyamCztAiEA93TgctUhqOiwL3do6e4ZeAUMT2gHOXHk1xx7MNIxleM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.37.1_1531775966557_0.10006366955660351"},"_hasShrinkwrap":false},"0.38.0":{"name":"@material/grid-list","version":"0.38.0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.35.0","@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/typography":"^0.38.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.38.0","_npmVersion":"6.2.0","_nodeVersion":"9.11.1","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"dist":{"integrity":"sha512-F8hwlIIRlhGj93AWTPYOYT84YPDH6Z/3BB46tTI7SkLfmUns4klZmOKq/pY07PCHmDeg/6gyk9BKl1QTYT4tYA==","shasum":"221c22de7f553e1a6abe10ced570fd94511cb735","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.38.0.tgz","fileCount":10,"unpackedSize":59915,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0WFCRA9TVsSAnZWagAAsdQP/Rgjut4SYT8qOLBjF8vX\ni8/Agdlafvag5OIDkRrxSEOtzjkWo1sxNA65soc6FpCtuHXtSCfpaSVv/S1G\nxK6x7TblIy3ORCSGh3bfTV6OlQptJskjg0Y4GaFmW5xvUryqi8hs8RnUJbsV\nfGAeejGKNEcSsmqQme7wPFl0QM38b7q9NMmytgMuw1AWfmvy1XYAuTOcE13e\nW93WglKrBrrL66yOzz7fLNBXJm1mBjogDgIKAptieab4bn+AhCDVpmbyhfri\nbTofqd4nLQ3BSXEuhyEnoHX+69hh1/eGQSVGdldoPLHgl5Hl6YY61fGN1YFx\nOb55Un9HnrAzT+v6q2Haec1sQ6Z53xTXRiNYSaTVajMalEaxoVBTtUJXUtRt\nt1wBOBvoe/NhqJJFp2KSCrogAVPgCCjb1mE7QVO8UIgQGFj6yw06I1KKy9jC\nFhNF74dJ+e+/aCHGm8EvqCuOwiDfW1Q1ItZQbLF9VHBJ1BKSDBb0O7D0m8QG\nNRV8w3XIgjDcHWsEGQtc+/xgSpin8qIptBzYvZpbttOJQhPDs1dq9DOX/Jb1\nARk7uSX4ffo4DDA6JqerekkhlRfY9EyRsYltZCSHPt6Pset2j/Und4ArYoa8\nZRLKOvuHDl/C+IWWq2z6gJPKh2O0HZzuTVqrsY3xuCt1Hancx3Hymg/QbXGj\nBXsQ\r\n=4/in\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFLTjXcAdSpyWGY3uyKFmoRArNr4gdroTjzH3mEmOc+9AiAbvImRCRY7jea5aqlSSw941z/wO4QC4Pllqnuz0klxgA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.38.0_1532970373540_0.2483213704623244"},"_hasShrinkwrap":false},"0.39.0-0":{"name":"@material/grid-list","version":"0.39.0-0","description":"The Material Components for the web grid list component","license":"Apache-2.0","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.35.0","@material/rtl":"^0.36.0","@material/theme":"^0.38.0","@material/typography":"^0.39.0-0"},"publishConfig":{"access":"public"},"readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### Using the Foundation Class\n\nMDCGridList ships with an `MDCGridListFoundation` class that external frameworks and libraries\ncan use to build their own MDCGridList components with minimal effort. As with all foundation\nclasses, an adapter object must be provided. The adapter for Grid list must provide the following\nfunctions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth. |\n| `getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list. |\n| `getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index. |\n| `setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value. |\n| `registerResizeHandler(handler: Function) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. |\n| `deregisterResizeHandler(handler: Function) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event. |\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.39.0-0","_npmVersion":"6.4.0","_nodeVersion":"8.11.1","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"dist":{"integrity":"sha512-Vv0MJBig0DjxLeMUD0kyNDDPuHwxQqjPlcZR1vvshBCQRH7AmIis65/GF+jhji+lsGDeAcA6TlSf82gxTBaLCg==","shasum":"962a6e0e8d9cda67ee2925012cc086030b43db59","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.39.0-0.tgz","fileCount":10,"unpackedSize":59931,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZU6CRA9TVsSAnZWagAA3poQAI/g3f71vIrqV5E8xnMq\noxpoWfRTXAFv+WEn2IiUP/9oHnep58QOLPqxn4Z8ccGu1q+ZZsJHiMe4oHgI\nPQCz5ZXOHeBSCm3f3YaCzvTQrwhL7hbHBav4F9URGBdpBJB7EBrFlD7swcq1\n1Lg/QIHXvPtWdWrCcXKWj9LGsBLbIiS68A7wU9DMbozF98cOZAAwNXMgZr7f\nUEJm3zg/2ZICOhl68VY2KoRSOzoWXo/4eb8M3byKyk44ZIxLuVb6Og0giQQy\ngM7H/Nc8fRut5r0527d4KPbuEE4Ukga65HIn+Ojmb5H7eC5kS3D+70yJZIW+\n+DP4huo7Q4hk1fn6ymlCoYKmT5+jj8qX+ICw+Q9hyO7JgrlgnPbr7rne9bvb\ntvhq3pTT6LHMp3SRh/SkaZWszUG0EGXqd8FQLnDSKq1lXVckjfv5YQYu1fCs\n+oJHMlxsfJ/eF+YDg6af/wUFoagheVDgVxnKPhFhYet3YG4raIWvSL5Ke0Dm\nD9dnniQwP5uZfZHVn0SEd2xDsViB8GstS72MzPbJycjESzYHBMjg4OVIb1im\nJ7/2X+LEn0ych663/vmTSzjZbtim0Oub39FHpnWOyDyWwZbGbBJijrUuL7vX\neXWqDioTPfud2ZfiPWV3eBx7Up35XjioRX4zx8Vr32duaA1OXJ9m0aHvznEl\nx5JU\r\n=Yqcr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCSRfUqQuztic4TYmj37CkNVHV20YdgPQyVWikOpNnVIAIhAJbjB6/tTi5s4eR4MT3MCZKiot8OY2BoNcUr73fnBMPn"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.39.0-0_1534432568418_0.5184356041586886"},"_hasShrinkwrap":false},"0.39.0":{"name":"@material/grid-list","version":"0.39.0","description":"The Material Components for the web grid list component","license":"MIT","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.39.0","@material/rtl":"^0.39.0","@material/theme":"^0.39.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.39.0","_npmVersion":"6.3.0","_nodeVersion":"9.4.0","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"dist":{"integrity":"sha512-u/ns229Cn3Hhu5shNVINAC1Pd1XodesvfRH9uXIXgyKELbsQs2ddO1d5F9AtZAVMP7Ik4M2xoQwgGrE532aEsQ==","shasum":"88671f591caf5c1a03adeda2f340b05a70db9dfa","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.39.0.tgz","fileCount":10,"unpackedSize":66115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDd8CRA9TVsSAnZWagAAEo0P/12PdEiQDSaindx52lao\ndu6GU2A0zII4Z+Nl2f4b6d1PVIIOOKWclkeSNq/qGVvP+Xpm71wLLouIbIs9\n4h8g+Lpo05GT5GW5+f2NmCjLkq2CpDW+tqVEeOeiEvY3YWPWB0opDYEUAgVN\neSG772dUsmPdL/9g/mofXeOo9ZLgrFffXz76dBRTluhJPkt7LfL4EMOmldFK\nMGsQ/m9IWGMVOwJH4aW8PMyKf1Y8jl1PWfrIojk59YcPi6VI5t91Bk6yQdQm\nleJSHxBBueA0rzdSaDa3JeirUhcxbW5gF6byj5CBwjlQf+9q5LVIKosYn8Dz\naRNcMZ0BUcIy69LL17w04Tjvw7GQGgYiGPMbDnxsZ0EpZOF0/+jRsFPKIY7l\nF0KAwk+cj3ic3cRuZINCrhB5jPyWmmQj8A8wgr+Gtm/Vy5iIqfCxUCUQGONM\nKhLDX6+7UFva0D4opg5jG0lMyh9Ix6Smcy5d0x0x5rQM5SwA8ihi+agfohIK\nR8t07LFsx7S2Lr62Sh9m7sf7/gEDYXzU+HI0lfEi2jZ6CvxvTkf3+WfNWdcn\n2yY7Za65R4lyDMjUdWUJHVyMNCZUlsHF07G0h+sJMPvazsFIajS67RXC9+y6\nmkD3PQ3hukQd1RpxbQ+OSPaFh5aHVZDLONqmSRFjIZPqngXn+N1+Vn4BP4fX\niP04\r\n=AbxS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0dC+F30X9qGzdNUb4XDQIEX0b/tTwk/eH1MgANspRgAIgXEg9ndbT3DbetqZac8m0t83Cxae5hEaOSzjNRF+Geag="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.39.0_1535391612071_0.1309088369519511"},"_hasShrinkwrap":false},"0.39.1":{"name":"@material/grid-list","version":"0.39.1","description":"The Material Components for the web grid list component","license":"MIT","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.39.0","@material/rtl":"^0.39.1","@material/theme":"^0.39.1","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.39.1","_npmVersion":"6.3.0","_nodeVersion":"9.4.0","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"dist":{"integrity":"sha512-Ta+0u/WQvTvHQZpLisnukrdBuDYZLGpeLTWr/shJByhzuTqvGOHuRdfCKk/TcWetaQAHeo4nRXvG+/tg+0/ZbQ==","shasum":"cd0af5e8ebf1e21bd05fc6413542281e1b319fba","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.39.1.tgz","fileCount":10,"unpackedSize":66115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibTHCRA9TVsSAnZWagAAUVoP+gJctxETy4SqIIU6VFv7\nJ5usx9FLyHIOHFhzhZ49XWv3cF3mIEW8cOfWzmNJma4ZohSxECp4CBRhNDIc\n+3mNbke6gItUIdWsqm61ZDCgpZJAFqkG+irdEvbZknYIJVIVmlZN0MjRd1vx\nKvUDqYi9pML3HsVlF4D6Hcr5G3QI64HVSy5xjE4k7xOpirULKMGaYOSqvlos\nEmWyTXBHssXS84EnnCsWdBhTdO5ibr8++VMZNUekw6Wz0oGKqquHs8dkxTXH\nAhVtOJjtF0D1FThbxRzn6HNfSsa+QFoVjIXdIZfUr/CQJeWi+ybhF6OoYUEG\nvyRiSOUJrzYDrM5wUa3UJIUAKVNMC+Ji/fXTq0m0LtFUsewDMzTeT5ztk/Kq\nqlYQNoM6wTZZlAHYRYiSKH0TnT3nAbj0infg1mTYFBreG24tuFVsa75o6RFa\nGtJJK0D4zBMi9g8JHXtWhmcn/HcgY29829eGD6bcVqxvcNg3wr4z1dGIgBjx\nv3PwV2Zlzh8Wgd1WPlhu9VVukgdXHBt0HeDx510xHvQRT4JGuN0+NICCZQIy\ncsVf2gP4cZF7LmA+oYJNVwHF+X8+zlWQaAqg/PEglk/6fMXry5gAvtccZaRI\n69ToCP1E7cwVSE0YLB8184+vlMZoaUsCzWdsS//MwoEgFbyP1/ZDGDkq6XkL\noetr\r\n=XPEO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDDb5GQmH3iZ6zoWZ8K0kjTp8bfa+1S8mqO7G8i+4fQlwIgP+Kx5ebQ+Nu62EgD680m1E9OqtilY3d2XmcPlith8KM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.39.1_1535751366913_0.1388793730823379"},"_hasShrinkwrap":false},"0.40.0":{"name":"@material/grid-list","version":"0.40.0","description":"The Material Components for the web grid list component","license":"MIT","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.39.0","@material/rtl":"^0.39.1","@material/theme":"^0.40.0","@material/typography":"^0.39.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.40.0","_npmVersion":"6.4.1","_nodeVersion":"10.9.0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"dist":{"integrity":"sha512-ZrBtwgTQMSXP/LZ2Kxhe6AtbvmBXvEuU8bOZ+G/RgWMjZkAweaPg4y9TP39FeYj5Ie3OL0higSWdY2ZpC5kXrw==","shasum":"93a616819dce945de41f76cca0a1670c4038b12f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.40.0.tgz","fileCount":10,"unpackedSize":66115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqUJqCRA9TVsSAnZWagAABPAP/iYOLQYUZuyCs4QG/u1r\nLZz98g4xf3jK5/i6YFAH5y0DBxTbZqtRFLbsSXyZlnfckfBY+ZYWkCGtR04j\nH3cRz61Kznyb1z172hgOm7+53/wzgcbaeN/W8m5fbApdOogXEWVMzm5YKHHe\ni4EfHF8k3hCGMDAJECSlpPhmtwlKCOSkjiFDnvinQo5tt79y4p2HhrJFUQwe\ngGsmqG6HICULhDfaC5zQNPuvl1N5e/62gwitXf3goNjR7c+c3pd+Bcw75Q35\nt/NnpXfHAftqtLFn/hR1BcPCtA3sgCXE5JqxBVdLkZlLvyVpIpYDq9az5LVZ\nJhOsFrVr2GI7SveyUpe8tngA2qeBxRtLt+CbxhYRh/Nl4U20ZN8hJkMsZd8J\nFsJuDEk1ARNh1sEmLbAFMdZhVCRutEfY9nApj2EVfdUCVoyV7JVgWmzjIEpZ\nCjKFSLZwsWpyfTup+tDxdfpDPy82gWrIcd1W0YB6JUPZa+KLFzEUdP7qPVtV\nTmgPTtWunMnP58tBcdvlABe04MPw3mchpP27CECZ+GswS+zvRmIJBPPzHylU\n9JgTkWB+TC/B0JTJRZS/PTMTaxFy9Fgaev3TCe2KjQfbhhCcvIKyX7E4T7Ly\nUo7Y5JsqBgmEh23VnrWHm8zCxuBTrBWY6huAaP4sGfZuRKXV13bjPCjVhxsx\nJA6A\r\n=98vc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQClsadSUtRBZ/sHP2EoOREAYsI1LPw/XatyX4lpFWurqAIgd2mdoyIP+rn0TgSHfa9rEaJADUq4C/X6Zw/f1q4GVKo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.40.0_1537819241901_0.04297417093451017"},"_hasShrinkwrap":false},"0.40.1":{"name":"@material/grid-list","version":"0.40.1","description":"The Material Components for the web grid list component","license":"MIT","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.40.1","@material/rtl":"^0.40.1","@material/theme":"^0.40.1","@material/typography":"^0.40.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.40.1","_npmVersion":"6.4.1","_nodeVersion":"9.11.1","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"dist":{"integrity":"sha512-sZmP7vU/RMacQFZPx3XKbPFj0VA4oVepYjLllOuMFocF5C0GsN1xQa7uW6SM0SJh1MvXWvxY7mlbq9o8jF6lCw==","shasum":"e570e1b04692129ef1a8ac45401b0524dbeeb320","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.40.1.tgz","fileCount":10,"unpackedSize":66111,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8PvCRA9TVsSAnZWagAAJE0P/RJs+bLvEvDXI0/SPSCz\n05rpGAQxbk7snZin/w/NrQDGHGlmBRdXVYfgNJDfKauzc8fQ1RRd1KkN6B5t\ncumdkWngPph18nzAUHR2AFjTO7w3KbnOLPPxKo+YnQHqTVpgCRFcG21mugT6\nlzzmiZKyShQ2LlDzY8Gixelff13uT96vVx+gyEmFRRBcoSbmalgAwSZHihKb\nTdN0rCL6h6+sJqD/Vjb7KWzyV63KxU69Y/wTYJQQsPt2UypfjXI8Lq2hnXa2\nTZJidsJ3i+dr7nuYQFGCkdvrpJwTYLCEYYTgchy2cVLScaRoJnQKutt/NZQX\nZrS/pigjrOfqi1qtstKB8DqzCkivwKvlk1sQ1hzihSjyo+wAwacU4MzFDyi/\nOiWWX2uloycYLpyh/M4xsBLkl2iQGB1WdiiY59hMZWqukr4T0oVPkfXK5n2U\nM6O0RNJRUQ69+/3sN+pWwMps59rgCKj/i+t0YRTyLYJVw8IZyhgeRYiUz30C\nBLjRIJ9YnLSMLjpR37PdLYYzNdkgtfiDWugP8sKHfihwU8IXKs2h9nSoxwPA\nBOHlmbci5l157NeWGQ7FL17suvml2ftnstaQQVAsGws7voF2Au2AYzO/KFRZ\niTsqqpBFJtDvnp+NfHLdqORMNYcV4BfIc9WdZD7zdxsuHth3qxhjGUZ0AxE+\n7bbt\r\n=RTMb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHnfj2vZpjxxRTh6kcyiQEJm5uD+Ajv7P5tV0nMhNAIhAiBe3UKc5rctGiDehimsUfa3FOr9JKcyBtvJv4QG1sYgpQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.40.1_1539032045251_0.6993488056672688"},"_hasShrinkwrap":false},"0.41.0":{"name":"@material/grid-list","version":"0.41.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.41.0","@material/rtl":"^0.40.1","@material/theme":"^0.41.0","@material/typography":"^0.41.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.41.0","_npmVersion":"6.4.0","_nodeVersion":"8.11.1","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"dist":{"integrity":"sha512-vs0UyvfswW/nyPAoYLRIWEvMmfZUSKVOUSTnHC+PsZ5aXTwGCiCdUugMZdQVhPp9NkxW5mqmCCVroD5eH/yd4g==","shasum":"ba47adb032a5d1697491afe6ea3fd2d4f686ce2b","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.41.0.tgz","fileCount":10,"unpackedSize":66145,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12vYCRA9TVsSAnZWagAAlvcP/iZ7cG/iiU6Eidm7ghVo\naSkdO1svlqkLXa5Db8EgF7DT5RdRq0ikGP5hmJrWKAjQPNE/kDFoS0OoSQOl\nG22ao44yane+FlT/KXJxPOOB9zW0ayaCzooOQ08o0OmWA4GycbcnVLNA74f2\nZJx6yTCOEsIlgZPbnIqS0iW3HzAYiV94e39saXK0xzK0XB7t4dhTaKdgltGO\nj7Y0xgSXAboPXjswFUco6ZYK9SJM5B+rZHk6yD3VyH116GnRKSPLjoyyRYrq\nr0K7Mz7JcT2i30LbnAWn8jY3nw761ywACT2OhImx/Wlzq0BcUCgY6OLFyz7l\nEK+cM/UBjG/HdsN6a3KXm5apYGcQLlaQKZ++r+znDK4y1Nw76LOp+JdR9G2M\nCYqwCip6GYghZAhYogwuV9E4D30e4PEyM7rvxl0aWTOCh7TGnQZKISBGhxpE\nDS4IAmaSDBp98tQwAVJ6vERdT5c/OizAYgYoUw8xh55Gp5FhvuLXR2f9y7nA\n1Ssis1KvFVFl9S1YgQ5a05yaqH5R0MDFYR1jNul15iMnpIdTbEGLsPBukqGv\nV/ivt5ujVg7WCmZ+kzDjdN/0CZFr4SEvLl42wgv66HXpyRw2JK+lci5DTQMe\nrM6rbr+Z/gpdjUK9Vzr2ThYDVlOSqBro6cK757quTl/LKaj50h30fauZewqB\nvLTN\r\n=y/01\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkHQzEtYQovjw11PAfopHPge/QaPrspb4dfPHK1WYbrAIgdF475tCtNE3sTFdYGIzwDFHFuTU6OgZ9xyw8Y35dulk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.41.0_1540844503829_0.9514568086733894"},"_hasShrinkwrap":false},"0.42.0":{"name":"@material/grid-list","version":"0.42.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.41.0","@material/rtl":"^0.42.0","@material/theme":"^0.41.0","@material/typography":"^0.42.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.42.0","_npmVersion":"6.4.1","_nodeVersion":"10.13.0","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"dist":{"integrity":"sha512-RbvppdR+OUk6DBkL3w3tjHRFpKkCyBo17pXpHkV75D4HVAQ7s8/Ra9659T4zEORqcwhLUDGj5Xz7DhsOqQdtlg==","shasum":"071fc185a7359eb17de8851cf92d33b62fac96cd","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.42.0.tgz","fileCount":10,"unpackedSize":66096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwW9CRA9TVsSAnZWagAA3wAP/3v2y88QEZc4pCTx3hUJ\nCO3NI5vW3j+Tf3c/lYGo2yXlxcOkc6pUrJ8r9cITUOk1PJY6+OAa3FK9ivAe\nratAaIn+eK24+5LznOMIiSsKF8hnug8uXnYCvGxgx5gUJ9mw6WhIerlc+6Cq\nOTVbtVnibV6zHHu36BVqHtq1NJbTVHdqMmz4tus79QrymQQjtWvbvSkHrY9V\nxZNVFn3QrrTipltXrzpyrHoJUtMW/gnDYN0DUMuI2mbQmwMaDucWLQm46mY4\n6qRijtEVhSm8ghcmW/DesDCujLaYbyI8Yj/6w3B1PA+HvNGGL9zAYpffZizu\ng+5bJO/Ctxd7JtvSPcC/6n4DljjRyfzf2NqOMNEzRAI0xA0LrQI/1P4OSxuV\nE5Mfc1+027LRJNkMZL2humgZ2v5UhDH82J3YlAUsbgyXwV+7fLGeNMBbXnBm\nTj4C5SjsCWWV83rMXs0RcUT9bTb2QVIveMgXmDdZYdomubodnMAsYE09O3K0\n15st9IB3OZaHPX/grebbViQLnYEb5sXFVsCQFAUpg/W3dBOijsHEpfNHxU/l\nRnWaYSDiSSk1slfHLkOteFsDVtLMPpGOjMBpbdPu02sZJNygClHnkERgjBrT\nh/53VVlYbk6oAMKMlK//kTiMD2oFeRqgQSQ2ZMote8MAKUMkSqsGoNEjZrnE\nkIHb\r\n=INvj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICBxoPMJrcaxuPyg1h0PbirAymezYMcu7WZOHJ/zXlZyAiAJsySYdg5vTGSbjqp7zZNtTi9RWieXyuCY+ALA5JIUpg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.42.0_1543964092759_0.5083689516964836"},"_hasShrinkwrap":false},"0.43.0":{"name":"@material/grid-list","version":"0.43.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.41.0","@material/rtl":"^0.42.0","@material/theme":"^0.43.0","@material/typography":"^0.43.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.43.0","_npmVersion":"6.4.1","_nodeVersion":"10.14.2","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"dist":{"integrity":"sha512-hAci+wtgPPGFvgt5MsNkxFe22Se7VsUpj6fhODyBW9l1jxV1XKh1B6sdtv2yw99rbaygnreoyossrWLC6ZNotw==","shasum":"6f62213de91652ae37c3493d3884fc753a7e0091","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.43.0.tgz","fileCount":14,"unpackedSize":182040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM60mCRA9TVsSAnZWagAAICIP/1HhZenhmPJVLpraQW10\nlLuTSVDAuHHA8w8IvQVD6Yktt5m1/cKDpOua487D69Nz5LC3r0mXqFnbiANL\nejPZZg2bfljvurvDWODbiAfC+0I256GhVyaodSp4AOFRVZit7VnbaQynV5gW\nxtbZJevZt1Gn101FJCjZo5roMZZH+q2YWN0DB+dXBNxabbhrhM8TWen0mwhx\neIi5ac9LCr868Hxrx8DhABlvFB8VVE48vm8ASrGqM5YgIFIQZneK5PSiFeuj\nFhoqZjhU4aX0dRl0gdoSOAaUJofk3anBo8RoL8XK9CZZ3vdcB77J2ayTDfuR\nWXoiDGK2agvJ1B5vHTMaxA8G8jOO7qULzIHrcWdnuj/UkUCzBsaZRedthOse\n67Q1viuPXSksgxvhV/hoFEBNA1GHFYuS3K0uZXqtZ6ID94MQmYgkfZYbcktJ\n0RIHMqjFGYwwZAuXnA8BjBUHaNWu/DFi4HcJwiI1xwAMdQUgKHYonm+8BCMH\nmh2ewLEZfiqN64GiUHPa0Y2JLNz7TaJinepgFrUl7f5P5CUVqlcu804frwup\nESKqqKB+8NdZCGosImZScua4dHrzVICB4NXjh+ivQVO8SriOrwaqsLZWtpy4\nAmwyBMh3LhfSSXmPTT+xnSrCSU1XAdrXhhXl6EOO+L+i2hWX/oIKILvGM4Uz\nRI/i\r\n=QTQ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXHPTOoEd9INfF7d6x4Q/ndyCLqpP9jIe0fD4y/kR8jgIhAI7SWstw7ZeoZ5oSSovIwHKn1cPCNmRj1y+Yevz2r2fP"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.43.0_1546890533817_0.49733753339757336"},"_hasShrinkwrap":false},"0.44.0":{"name":"@material/grid-list","version":"0.44.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.41.0","@material/rtl":"^0.42.0","@material/theme":"^0.43.0","@material/typography":"^0.44.0"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.44.0","_npmVersion":"6.4.1","_nodeVersion":"10.12.0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"dist":{"integrity":"sha512-NxLL0A48K1O14ZZymFIyf6HDbF33+NgXYXqP2yosTC3Jw4iwmUcJTpFTmSw1U/m1xT4zEpeKEGJ4vjVUWpS9Mg==","shasum":"bd31d992ab1a910731e4a47c11fe91d44e3bc02b","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.44.0.tgz","fileCount":14,"unpackedSize":184073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWIMnCRA9TVsSAnZWagAALGYP/jeeAy5h3X8KxfxbtIUA\n1ay5SOOYWC67y997lqteQyoXyaqf8jIcCsOw7YibS+7cByIfIN/XpywHjnSQ\nQey12EW+Kk3GaNXaV+LIFdc3DSGCR2IlUUaHeNzSFgkhC5OoaMU/Z+33Il86\nSz4iH1HDPKzo5F3eXqw8QTFUkHWi63Bq53TLBr2smXQGwYSfAH2HDseKNesr\nSYNCurhOtzk7y5eIMDSD7kgmga2ol9mCh/pFdFRX8ggT906pmihluog+RLcg\nXXm1fAH+5YzrHAIYie86Xl4EA+0YQPSnSKYEuX67Zu5jRUT3smEPxq9rZAtR\nXs85rY0JFNW0TP56EzlQTKm+P2rHt/45tFZB9eqRkI7TNh07CEUqAuWAuhzb\nKv2FGVIcVqEOZkWeOgcamjR2PtKZ0A69DinSZmyatrWSySuU2BhCexWu5PSz\n8FGGMwi3i8Ny5CzQxIGch7VBntNkwpGqrLTe5BXs0wll9Q6a8J8ji5bStTRC\nkRyky2/HttO9FYk5P1f02zA8ad6w5om1FRpKxRczzevjzcDMi3hYqfu6Dg5I\n4n6VuLEf0z32Tjxz2Oip+Wt/whwZlIoMBbd0KopwuEzgUlZcFGYEIatMzj0b\nBk/4+IMk+4NuEDax9eTlBlH0SCGxCIeFo8+o/SdTRiO/r4P2HYvP3LTsdkoV\nGipB\r\n=93qh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCgKgZD9PXB0tVzQ6IFG7dzXZYS1HZK1ssc7wnevEVCfAIgOIMhV8HJj1jz77fEhDOMUbB18qYv2nxXQaPZWCXaStM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.44.0_1549304614481_0.663870450319314"},"_hasShrinkwrap":false},"0.44.1":{"name":"@material/grid-list","version":"0.44.1","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^0.41.0","@material/rtl":"^0.42.0","@material/theme":"^0.43.0","@material/typography":"^0.44.1"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@0.44.1","_nodeVersion":"10.14.2","_npmVersion":"6.8.0","dist":{"integrity":"sha512-4q6b33YnqjoxKhde697srXD0vtDgdaJdKnXXugngOkriIiW+OYvX39/BoFrnIFiy0Cbo8roJXE3Mcl0gFFo0gQ==","shasum":"098699f8938cb8ceb7081d8637f4a4810f9af556","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-0.44.1.tgz","fileCount":14,"unpackedSize":184073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIsdCRA9TVsSAnZWagAAq5IP/idjEzMPvn+tQ1jwgpsc\n4BNoaCYaJWjlEmsfRL50D69qcTh8J7erNYniGwaynqz/OZbdYDZquJsA9Y+G\ntIFD8gL/Qmb20pBnRqWYaPZaMzfnkjRVhAM09xs8VqScDNtGuh6EYcsadUpL\nQr230iZx7tW+LrlgF3iPUP6mIKDJNLlbRp3COuERNhWR+Sedd390SGQrBkLO\n+z6GZnlIshylhm5o8weII+pvulxKzN9myxGpNcUCfcwECcEJgBur1/sJ1KKu\n87AOum4ASqsIUUEyKEfdE9feF14HrM5PlzdMMRO1cS59/Z8ewuhT7AJjEOe6\nzqK8clCD1CQcSLAQaj48ade9tVQdzk8oETfdUu7aJSyToB8+x6FBK5ZlVW74\nJeUE9lLfLlftu2S3yM56ai/xydixy+STvAM0GkCiavLbZqZeB92LIVvbUD0e\nbxGlU7TQ8H0J4AS790I42cgHnUy1F257JG9x/UJ0Nf3fFDAQlhUZ33oHg35+\nTIwm1y/qicMEpG9WGOdthkI8VdX0cCccgfBhT+s6oxfhdRfNUG8bdGXTUyT7\n8agGdBp0X3pFh3klvGbdRjwUmZ4vtAudS48VoJNej7kCd15KkAFGMGDijMpb\nFglThblPV8wUlKXZdtfYUvDr2xJG0cbiALE4bOQHn9/SmtLykvEqDTvA0v/j\nAm+8\r\n=jLth\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE58TvDIqmtLrKrQl+BSez96B+KE7oN7y1w5lgo3R+qMAiBqz8hkGsKvJl5GEu5AdxqvUqoeMBitKTVPeBbCV+FUEg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_0.44.1_1550617372985_0.6391716657514614"},"_hasShrinkwrap":false},"1.0.0-0":{"name":"@material/grid-list","version":"1.0.0-0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^1.0.0-0","@material/rtl":"^0.42.0","@material/theme":"^1.0.0-0","@material/typography":"^1.0.0-0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### Using the Foundation Class\n\nMDCGridList ships with an `MDCGridListFoundation` class that external frameworks and libraries\ncan use to build their own MDCGridList components with minimal effort. As with all foundation\nclasses, an adapter object must be provided. The adapter for Grid list must provide the following\nfunctions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth. |\n| `getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list. |\n| `getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index. |\n| `setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value. |\n| `registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event. |\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@1.0.0-0","_nodeVersion":"10.14.2","_npmVersion":"6.8.0","dist":{"integrity":"sha512-BrRL68/crkeq509d8+2qkKzczjWV3A6jS9leWP/pOL16IAdizq1jLwWv1iVKMeWaIHaytQFXbeWw6JFLsr/EHg==","shasum":"902b940eb02b596a5a2873609894ec0525225c8c","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-1.0.0-0.tgz","fileCount":27,"unpackedSize":319504,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdyRTCRA9TVsSAnZWagAAlr8P+wQ68i5F+Q/AIRVsdVaI\np/FNj4+b1YTa9kkIa28xgqa1B/s8CFQQQJAZ9RqupdJJt1ZCGQ6tMf5u2WkS\nZ9Q8bqp6yrRUXo3PD9+bLFFBeUkYg7nG+b9tEIB9wMpWhRfCPX45SQoxACF/\nmejpaS+vXLiilGVyXugrwtxHVFrzSTL+qX07ryfwFMj8rtTSVDVaP21Q/Gbt\nYBoK4qrWF4Ig/fHz0nmntejIgZ6bw25mYnaXaCmklcfs0p2/YzHOgNmojYGT\nuzS4ohkQRM5RVfFAON+G9+K0Rxss/5SQA3wzQr8grZ0PkFr00PUcyx9U9bmq\nBtM+jmYCg292xqSUivRbY9+MIAxOaD7JzRvrsZfwmnpnCzTT1p1lxkBEK66K\nlSVBn6tEMGE6yXzMkEHvRgtmEzq5qzzIRN8m7UsXs8PpB26t/uJS47ACoppC\nmFyv2h+VJZT5aGyLhrZLvdjQBsA+U2BwKjQ0rrbpiGpoLk/30Y4o5kGy9eh/\n/aKQjVZJIxyL7AwbJE8l/+GGynyQ49D/UorodpTS7AZgvGUTqy+JvBAP9wo3\nkkFu92V0bori9cu/pdHh4ERFooHee05rE82bbJsk1UzlcmU3BXAI/iuEXPyV\nFW6NjzfMwlBuySQAJ6vAQ4VmqGUlxzVkpjY3/oqApTW0ETr1thgX2kThxZR1\nvWsC\r\n=MGFl\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBUZmkBkx0ihbem6iOCQj962/Yjm78hR7/nbraoycW/9AiBYVECYG1oH+wZ19awFItofNWmg5EVBNrS87DlFHGTBqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_1.0.0-0_1551311954935_0.9336143737631275"},"_hasShrinkwrap":false},"1.0.0-1":{"name":"@material/grid-list","version":"1.0.0-1","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^1.0.0-1","@material/rtl":"^0.42.0","@material/theme":"^1.0.0-1","@material/typography":"^1.0.0-1","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### Using the Foundation Class\n\nMDCGridList ships with an `MDCGridListFoundation` class that external frameworks and libraries\ncan use to build their own MDCGridList components with minimal effort. As with all foundation\nclasses, an adapter object must be provided. The adapter for Grid list must provide the following\nfunctions, with correct signatures:\n\n| Method Signature | Description |\n| --- | --- |\n| `getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth. |\n| `getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list. |\n| `getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index. |\n| `setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value. |\n| `registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. |\n| `deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event. |\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@1.0.0-1","_nodeVersion":"10.9.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-/6P1qfmI1wcMuW5K0YHERGelWu6bLnKl3JDXbVyQLvxzt89SB3WIG9p/q8bteGazVvKlrSsyXtgrHJycOyicPw==","shasum":"e06535caac996d73d4a0591ca97abf05aef68bb9","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-1.0.0-1.tgz","fileCount":27,"unpackedSize":319558,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbW1CRA9TVsSAnZWagAAR6YP/2+plEJtrdrSAePc6YLE\nBGxCQG3Vz3nPalKfRDtQUmL0w4fYVZxiCbY+gRJ/py+s20ebc6nBCOtxvSxl\n/aG17+MhjcxZZMCYTK5G8pXKT7h7NA0rBuuefRUmMoV7z1S70KpvIqnKTGyz\nQ52Fzu141oCYRU/kKOpPT7OsMztzHzsXNNRqiIatVnDOmgONWmYvkoN4EUIN\ntoq4AtKLZb+eEgkQz5EVtC2oi1bpypb3fJaTCksg6fdUQflw3U9cGyJL7yVQ\n+XRLNI/0IoDokabbs4MLG9lK8ByRGKYabyIe8fE3AcwHmkkR7G5EIaqMrHhy\nzk/x+vIU0OPT4TVwvdDvpFUP0fkrwpX89ngoXnBkR9k+Wy3Av9GFzCSGqxLB\nRiBK4SYtbEMWvkxidS/tFB4BtS64UuXRfHtkwZqk0xX1Ny+wFUvFJzIMKpwg\nsUdn+/S7GxMRzVuHgQfJz2yWYW0/IXPdspuJpdR3XKc9VvCqyCRTstMELKXM\nHa4eM2ejkNlOQ693hvpMeImHDlm2bJrhGkp9iSEtNR0TFs61WsduxTnxTUhY\nRRfQkUMfn3yCFoGuxN6Mc7/sM7Sms4DxSiIyafRGy8X5NGbY1vPYhKeTaPbW\niu/8q3SclYlFpD7KoFv3l+lN/74w/qJFUp878xF06K38tb8USyqR3gBpdQ5u\ncAXU\r\n=2aJh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD7WFM1hu6Oshabt5DOHOQ/Qudq00r7NxarXXFEHu2BGAIhANGlYIyxBLE7qk9Jq9SbyyhMNxdcscm7AxaZ2GveaIoY"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_1.0.0-1_1551742388664_0.3177148938787273"},"_hasShrinkwrap":false},"1.0.0":{"name":"@material/grid-list","version":"1.0.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^1.0.0","@material/rtl":"^0.42.0","@material/theme":"^1.0.0","@material/typography":"^1.0.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@1.0.0","_nodeVersion":"10.9.0","_npmVersion":"6.7.0","dist":{"integrity":"sha512-iPfBseL5spzMfydJxvrZ3MQBzPMeBFUEAuKlXBSn8SecAZJxG2RmcV1X5CWk+21L+LY4D7pW6mV9LTZy7nZYyw==","shasum":"6e3bb6964f989ffcf8c93bbf18e57e7727d6ecd3","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-1.0.0.tgz","fileCount":27,"unpackedSize":319550,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDaqCRA9TVsSAnZWagAA5usQAIWmyyQZknGPzXHhInWi\ndOQOSTiaoHJqYX2roFBJH66ecQwrB0K9kYiCrEde5nR5+plaxXbQr4czeKDl\nKlSvI40MgoshzSZV553wxjOH2w58rHm+652UvTpbok+UZ3e23D3mYL7OczvN\nDTDMIik5nSLLMzg5LAH3VUPdjwSmSsHBVPS/KPIIDJVCsPkljv/69DBvQrAi\nDSDt9UO8+Pe/roPO6Fsz+q1bA1+FjMiDlc95qA1417ay1fKkXkJaG5665+zi\nFwwHrVXDo/rpBKnwS844tnx/8mjKyeaBVfagAQq3FlZiVZIJsUZ0nsJEAlcH\n7Wrx66XR7t6mlyWGMKCl/HsDMtVdNaTFFj4cCZybxaFy1dOm+MGtctTMxQz4\nOfV5o6tonbSDqpmrbfg/II8ux83RP/Gn8HzdAPu8xcjh0oumdQQUrJ+LtyNR\ndRNTD58EnEZ+kcFCGYGk9gsIt6iaFEEv+RHtWelQrxJp1RSJa+/kyk7dGxQu\nQ331ntEyxfAig+hmCnzAk6wg17liruTvnaiwyyduhITXPEhMoV+wv5YL/8DZ\n2bxNBDD/K1Nh7q1xN+j8zfAOgChnXEGXyJ0We50fq7VRnpGmWHb2Kr8btKyq\niJsHYuZN4fv051qlytBZQuXYeBc+GmEfjjCjZvl9vADkouydR7k8J3n3UA5Z\nPFb2\r\n=WoRq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDSwIVwwhdhGP+6XWW/iNII9vJFeMFXtvkAww1+PdzNwgIhAJ4GW2+oG4n+Ny1VYlu/yK/f4FdhFRNluOEn19sRpx78"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_1.0.0_1551906474306_0.36547169225686127"},"_hasShrinkwrap":false},"1.0.1":{"name":"@material/grid-list","version":"1.0.1","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^1.0.0","@material/rtl":"^0.42.0","@material/theme":"^1.0.0","@material/typography":"^1.0.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@1.0.1","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-PIf/6OvBQwiWTlAXGEmfmJcMQaXjA9lUWsg4FxPfydbqp/KVGnT3fXeBUasokP1r/SVaSdB+E7VRrgzOj6AAKQ==","shasum":"5aed66f36549637f49ddb661ed975cb4fc1fd937","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-1.0.1.tgz","fileCount":27,"unpackedSize":214069,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtwNCRA9TVsSAnZWagAAw5kQAJnf9AYzllh5ss/oeQP3\nrKC7Y1iCdddMwT4qhUW6kJ3Htw/B9O0eRKMM3b0esAFpfEQVuz0Sxrx2sXRm\nqv0yWhenQNNt4FhNjQKPjmq27fY3B9nhsKWNvjdoRnYqHoCwzfekqw4gpb0y\nktuOM4Gfki8rWJg6fpW2ewW7FZptshDjNzIADAKmVmt71emV6CMVl3cvD31P\n8PSAPvbcyQS/8E4qZZPiMqG2fya4RzfxRxN12IQ0wIygSSkS1TTKggqbO04c\nN+VwQXd9aIufsD8tC/f8mvVCMT/ibE4AFD938B4wYVQKY2owY53T5R59OfUg\nECPGuXCy2NCgMLUX0TmoOmm1GaeZWxH16ECYiSTGYteabQgSBl7F6ZBf0t9/\nKet8GN+2ZJwYccumsr78RYEZOeVnk4G1sZTH83aYhdseyd5oxNHS+NEZs/w9\n1d2HbSNvwnRFvAC/twXUsDEddm++Vb/JFZhaDn5jJHxFxhqucf33YZNJLH9B\nw99wI4+rbkfIqgg1axL/ybDJ/vwaeJYadMWJyOuOGjsMXS9istdeiHuqN7rt\nfLd9ny6EjWKokc1hyJoFiRka0LGF9TlsWDHtt3dbEffXQU6UhH3VNa5knnhe\nlaYXvMGJ4UmsGKcy9FFTXXWd4JW60GERqwqnzNFbWQWgoTdN0uBl0Bpv65LJ\nBrZ3\r\n=vG7j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCducJ1w5ufffO7jgsHdjy3RJ5JqK82pyEMAEFENIeRAAIgd77kI6kavxqCsgjhxjMdrjbfUVIXxx6799dRV4RPpHQ="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_1.0.1_1552342028356_0.6866927199954"},"_hasShrinkwrap":false},"1.1.0":{"name":"@material/grid-list","version":"1.1.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^1.0.0","@material/feature-targeting":"^0.44.1","@material/rtl":"^0.42.0","@material/theme":"^1.1.0","@material/typography":"^1.0.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@1.1.0","_nodeVersion":"10.15.3","_npmVersion":"6.9.0","dist":{"integrity":"sha512-YukGKO4EzJca5DktfcNKCcrE6B3j/0CznCS0yfAoYagGZxsmmxa1wY4BcObuocIP31/xksRMUCieRbWpKzBhBQ==","shasum":"f92dba86ebd26480bc6407d2c6851214b7d21bbc","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-1.1.0.tgz","fileCount":29,"unpackedSize":226859,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmny2CRA9TVsSAnZWagAA2tUP/RW8+08Qz9KJkIQ6v8kY\n9MnuquM4FYY+E85q106Cpo+tCutic5iPOkSUowpvI648FwiFW92kc4UrFPQa\ntFOSuHxK8ulK5D2qyWS5Z/sTZwgKVOjDRqfbRmNhlj7CBDjdqWoN4Wqg45LN\nu7jD2aUg9JEZ5slFCcfc+p7HLfqeKQ7WEr+BtiUmMn84NHpvr79tAsJnhcWc\n21yPKAa4Z19jpSjmV9UTGxR+E9asbaQaAIXpEdK0rS9+pA7YMy2vIuHe7oLq\nXOr8yM/shY60Pwv5QNamZnXoKUJIK3Z1jS3vca0oI9tKDqu0/3C0IazeDhN+\niRxuTbd/qC6ZuFn81bTzaOzTCM+3hDRovcEpIBgSFZyyDcMiqq9XmmHHbVZc\n6wo8bq4aPcokvaQ2E4+QtqJlCjMzmYupwe8fkJFbJzDcO0VBFzLvNQEpwosX\nIxvUsaP/nFTwpPPsyDJWLUmcjoiguJRHvkfnIRaZiQPa1PobgcA3Hkfq1cDg\nHnw9aaDfvwyL4ad/aQ8A5Z+jMD7LPhh+FEjigA7zilLmY1ac/1S0YobvkJed\nKGSB2Iu5XqZvLVfQy6Y12ZHN4dpFWnuzzLbOpUHzTCpSliL0QBgy5WSKuN6s\nPp0BjHHhtHttK7+Hx8MPR0VBGFqvM9rK2EjTAslNhmwC9d3+xAx9cZKLKDWv\nJsYn\r\n=876c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICP38x7IeeBD1pcWtrvvhcylrCcjOkAQmPzpdcJzOKp0AiEAtNiTdSmoufzsdhfL2j7Pk2EEZMgs9bfGfqzMOe++cYM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_1.1.0_1553628342051_0.4369437879780107"},"_hasShrinkwrap":false},"2.3.0":{"name":"@material/grid-list","version":"2.3.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^1.0.0","@material/feature-targeting":"^0.44.1","@material/rtl":"^0.42.0","@material/theme":"^1.1.0","@material/typography":"^2.3.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@2.3.0","_nodeVersion":"10.13.0","_npmVersion":"6.8.0","dist":{"integrity":"sha512-7SrUnhXW2iA0voUUGrwYM0PVx+BK9fsgW8GPakIJFIsRO9ES0VafaOl9DQLsjB8q39jL1nYmwIf/CMfeAlN/dQ==","shasum":"159e58321407c49527bc5a02dfbfcb1a8445060a","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-2.3.0.tgz","fileCount":29,"unpackedSize":245648,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7absCRA9TVsSAnZWagAA8PEP/1T0S2oreK2HQDMcAnqh\nWlruMXBlulplSsNxWq+RKZ8WpDRYxRzQzRCsKlWJf4g4EtOYpEhyQztfaV5T\no00Wvmwu8oU5aRCmRKsR/BxWyGLqrdi9B079lAH/FagZc1LK4w7KMVdmgm+K\nFcNpCBKVKAa4KPCCi42TQ4hs0PkDGLlq3iRZcnjFCGo5fC39yxECdzHMwE1K\nDgoRq4dP6UbQBc+A917UI6IBSsQ7sttFOCcOMKZrSJuVOiLvK5G74NlBxeJb\nFysYeMCRlGoWwq0tgDl2FlbdLn8agc3Rb5l8r8zh8AGB8L78MZPPqjTlVfoX\nz1B6Xtgnw/a+oMtM+wEpuB1aZ0BmJwsBAF87mBJ3wiUGmyUvoamXFtauBf7s\ndDwY5+2twTKBG4b7FIN3u2VEFHXf1YKtbWZL2hEhMVVS6ix9tiZG6sjkY7As\nAbLxclx3dxLMDdlJULGmeP5CF/LIfNNOsgRBW+xNQFarr8F8/HXvlBXYQQEY\nVBrSoWnf9mWigISmajpRCSkQwi9txwBYSyCcyrD3j0BfbzlXDqn4qO5ZIF9R\no6chpOF5FX3B4MJx8Xd97/wCfnnmNMCbn4uXeM+BKHc/WwUAitfI41oIXjW+\n/JJxfftq62+Zf1qSplbPo07e9tNXHGwsS7zm4ukSNBxp4lsQzl0L6FUVPOXr\nMnUC\r\n=9FyT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQjRGiWqEe4tkGfBiJOHibhjbI8c/m3/IBDV81ODbXXAiEAg2MocYSUHC1uqLmqjAOGZe8XPnWOpoMYZyC3+6TTcEE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_2.3.0_1559078635479_0.05040230322564354"},"_hasShrinkwrap":false},"3.0.0-alpha.0":{"name":"@material/grid-list","version":"3.0.0-alpha.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^1.0.0","@material/feature-targeting":"^0.44.1","@material/rtl":"^0.42.0","@material/theme":"^3.0.0-alpha.0","@material/typography":"^3.0.0-alpha.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@3.0.0-alpha.0","_nodeVersion":"11.9.0","_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","dist":{"integrity":"sha512-BW44ycmgUagNJywA/WJjZW9P5eUb09cniE8G+uStwa7wZXYJzGN3PzAIHIJBCY/6ZmsIt7m3szzFEAy8X6bxeA==","shasum":"452e1f8b2e1057b2d89fa341a90fd3efbcb45ec1","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-3.0.0-alpha.0.tgz","fileCount":30,"unpackedSize":246807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHpRCRA9TVsSAnZWagAAyO4QAJycRX85jZITR2rxwOpI\nritFzgCIGbbVo2uzX4NFXcO4vznbBSwed7hyz/Hw6L7qSivxqyAbnEMaACr4\n6ZkKjqy2yOeSOqxw4kOfE2xxvtBqPNfbh8gDkq7e86TFgP1wuzCN7SmWXwKn\nBhNehTezk5CZvhCsRbP2qSWjfM+E1UjdIXKdfQmXftTULbqGrqxOJBCpeao7\ntWtiC9yr9Yy/HPBs2/wPiieer/7avBjQW3EhefZUov82lnsuapfwxg+u7a5g\nZJtlgL8ZPN6t9QwYYkKd55quu4nUgWD4n8O0CB/O0wzUdOD/T+AUFc8z3yOq\nrUlreXwgPiaOc2prczS7g1R1H0NR1bIYGTiMSzXg+VfP86RkWnIz7LE3v6sR\nL/RYirUYl1er3XWSVw5KD+SPxideBUhy3gH+58uo5HxVWKbFZEztLm05o6Gx\nIv4gqJCcdtAJMkM0yskugXVCJvwl/A6EMjjnSKiw5U5aqoo2HYnPLSs0tVq7\n1MP3I151UxmpaCw0zjC3w3DKYG7Fd/ptjZ+jeZOtdOoY7UgpmJ2oaeukDGMf\nvK6Bhf6kLmduvMFa0T+LiLHlR8XNZzV0Es0aYNaYJxwsVwKn+3zUH8Yffen6\nUG+NrZwSL9x++Q8Kdd+ULalNZH8Y33NaQytMZQLtRIYuTBAt5kvS4uGpG6Mp\nYOi5\r\n=JJDN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZOuWWw+nO2wQTzF/epeR5CMBoOVJnheCfonBc/OTyWAiANY/g4auPYtkUQoMYFpD41LH9sH9SssTDwJw3xAevGrg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_3.0.0-alpha.0_1560312401171_0.3982991418025943"},"_hasShrinkwrap":false},"3.0.0-alpha.1":{"name":"@material/grid-list","version":"3.0.0-alpha.1","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^1.0.0","@material/feature-targeting":"^0.44.1","@material/rtl":"^0.42.0","@material/theme":"^3.0.0-alpha.1","@material/typography":"^3.0.0-alpha.1","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@3.0.0-alpha.1","_nodeVersion":"11.9.0","_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","dist":{"integrity":"sha512-aqmmBpvOx9qY/BFxunCD8UDVTiWUTPH0rGFIreltDN3HPbuZ97jssv/s2o55qIXPyYEU3pNDhslqownouJnqcQ==","shasum":"8fdcd6483a2db183b3465f26fb0d1a2f21b435ff","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-3.0.0-alpha.1.tgz","fileCount":30,"unpackedSize":246807,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUwuCRA9TVsSAnZWagAA3GQP/0+wivH3TiyaDlI1Gq4m\nkWyapptoATT9NOPQrVfWEWxahlwRy0t4h7E0soGndG+YQlGogU7AH3jDctVd\nRokuBSMuJ7yrwtk6HM05FfexAC1KodY7NrroeWq3omRath1N9yMBejS9H+MT\nl8NPO0BhZUA61o9P3IMC9rnz16o7/7CUVjaigbjlPYNopjWtNmGouuhZDe6f\no9ZkzgIQvqSO7Yclmwq2kVZyX7vbeRBQOTd9GVVplWmJYZEg7n37Jys1yjxc\nz2QAEHp4AQbvLlCn1aLSpYXjhP4rDCzkj4JN32Ds7wYksmdMNSMv37nox2E/\nTF9yhbLFLJ4WyzP4tQXKN4RGVtZ+quRheoLH6zC8GyZmJPTWOqLiukJkLIfn\n3vTaqunD/QRF0BVTXj7MeIGWGYA0OK9Pbby/Kmylvx7jNxzYsHAXv5IpYwrm\n6ZHQWgZdMRDW/aCjEvbYSckPf/rgXH8lj19KiHW33/9BO9IUfHySTn6uPFAT\n1U4UY/gXcNiUNwyJYRpylZTGik6A60vawnwhPLXdAXD1xkgUl8vo0aM0As1h\nSO+ma9RgIPyXpZq2rHjtqOFTQ3CtFGVW+DicuL8aWJLMVMFGJ4YZ24q1dzbA\nHgSE6dM8qvazk3Oukth1Oa79t+vAm5VFTPml9EkI7JIj3grpaHPjPbrcms8x\n+xX5\r\n=BVZ7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC0J7PLNXQoZl4dBZqR90vtESpZOuhjY7zGJFT4S5X69gIhAP2K70Fe3jo4ZoN5WPk49cOFPvY/c8/BmOl0KGuAiOsk"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_3.0.0-alpha.1_1560366126305_0.31599825362873"},"_hasShrinkwrap":false},"3.0.0":{"name":"@material/grid-list","version":"3.0.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^3.0.0","@material/feature-targeting":"^3.0.0","@material/rtl":"^3.0.0","@material/theme":"^3.0.0","@material/typography":"^3.0.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@3.0.0","_nodeVersion":"10.13.0","_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","dist":{"integrity":"sha512-An5ioNsfuSDbert2kO9A8tr2gH8yB6OouLtuAm8pk8AGOioq17ovFuxNSLS/AvU/waUacKpo/pKfvYdZj1klYg==","shasum":"2c1d784fe2f7c96fbbe999081fb2bdb2df7a4aa4","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-3.0.0.tgz","fileCount":31,"unpackedSize":247935,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/pCRA9TVsSAnZWagAAFvMP/A58h0LnnMGOI2UzrXUZ\nIvzwWUtIbhttKjn4HH0UGFePI79cBI1YF/oc4B5ud1cpu1H8dw/f0vxjFU5b\niiv7NnkM+iRPZLWpNjZlLO5jD51Whe6aRksn673J9XUdQMX3flQnSd/9Leie\nSDgJaYOOzJreI70QXR4DR3TLdYKhmXLdi/AacBDVmdVdhNzUYjWVtQT9OWDn\nZuxEvwRvLhQ/+EnvppmWRn/5ioUgtaFGZ+u8AODGVyKqjIsNwOblVplcTzDI\n0iV20oEEpELZ+S+Xz92Zilt6eJpnHGypMkAb9MaFqFWg5zQIBuU6efhny1xN\neAEBvrugX4JJDTF4W8QcnCsUbxOA+GfEq47iCHnyRWqreOq36F8gebIaPxLA\nS8JROu2NsiefZMNjgFtK2arPEktJ0AFAR1OEuYh/sSrKyOJNVDMcHoC5+P4M\nPp0U36cO4uRzs5+WzMuNnVpWPrdWSCWUrBk3uDJmhtBWIFdvXu4WJoloEfsQ\ny/EZNk2XnATIQn+UBK56cgB3YCuFkdlnl2dDDbx8BHxfA0M1VDRpjnAotoeY\n2D37iBMljL0khIN/twIfKs4QXaN3rnYkc82YtoYzg4jP9DvVYTLrOs3IPFtv\nRbJMZB/cN8l0EtSe8QVxoWb/Qj//CtUbFdqVxtcyr47UB+rxSC9cE0atT2sa\n+afR\r\n=sm2n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFNmKrL99DXLklBnlR3//6RgMwJkJnhvT890j7A3Le6rAiEA42xUYksPubdqrcFrBvurtaiXBxt5qPfLYkXTHFsgG/Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_3.0.0_1561501672588_0.4953731858844157"},"_hasShrinkwrap":false},"3.1.0-alpha.0":{"name":"@material/grid-list","version":"3.1.0-alpha.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^3.0.0","@material/feature-targeting":"^3.0.0","@material/rtl":"^3.0.0","@material/theme":"^3.1.0-alpha.0","@material/typography":"^3.0.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@3.1.0-alpha.0","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-fHdQc68sU9MCApcmPt9dW22zaEbZ9HlwM7GR50RLZJ9i+cjYeZzichdFk2OxzqHiTPyf1kuhZIov781K67eBGA==","shasum":"e94876f142324c89050b80f5900260003d07abf7","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-3.1.0-alpha.0.tgz","fileCount":30,"unpackedSize":173404,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdEcCRA9TVsSAnZWagAASr4P/idPIfqcGGE32obyZFkd\naiRVMg0M925dmGl6xRlAvNCmKoZ/yCYQEs+hLrz0gzvffr09dKi9nXjeFWb9\nDKwcHgrf//X05zOCqCz0T70UAmqPcrPDybRPR6/toUgACmfYs6tmxGdqYg2K\nl0VYcRMbuBZo28oyFHosqGQWzWowuEfM89BbInr7Myt/KPmHwFPTECkuQDoK\n8wdMz1rfF9lWP5Pdu09vWEAdL9P960WQ3yBB0Bd3xHCxKnHSy+FzPbhXV6Oc\nKBtyfX9q5fNhs+Ux61SLA9VZztbcQ4ZdX4yWwtg6+gcFPsjcU9bi+l0ZFv8c\nVavZ7nCXt5S4z28pUT2kZKJ/yuJI3WTB1mpsFhC5pXc2zPMsjt4c2a68QF7q\nxx+Ns70vRdT8/Xw0z0tFPxoj0EOa4VcBhAiG7r9l3ME3ieBSV9Ez8XJ2Gkzc\nE6qg/88ncq7IbbeOJ8dgz3wrBDX0G9DKVJW1OSDeVvF6Xu6SUCmADqvpKp0l\nMGL1qNoUVn3qcG+yiZMmsknY2FUX2xya75EQLlF8+HlRGGyMrj8XosjaA0kS\nWnJ/57PstU2XBuJy89exiM5C62Ig0RQXpLcOjzE3wrIxNqzXC3KYeBHLJPEx\nbSx8Ix5xHEOYaY7fvlXNX5KOrqd/uWn1CSFqhjXoqXw4ecOyGdWz3IDgF4/O\nA0fk\r\n=HAtT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDepF/eQT3NduxxVegWt5cARjMceX8GqhelxjB1GLpnKgIhAK+X/s3QC5X6L3iMrFl8RN85IZQL2+4dyx0A0dYpuVfA"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_3.1.0-alpha.0_1563283740097_0.9601439530518148"},"_hasShrinkwrap":false},"3.1.0":{"name":"@material/grid-list","version":"3.1.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^3.1.0","@material/feature-targeting":"^3.1.0","@material/rtl":"^3.1.0","@material/theme":"^3.1.0","@material/typography":"^3.1.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@3.1.0","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-KZYWSNbYkwG+nAeXMOrJBiyb4xHHHz4Z5K3ubCccc05gCrs3wqaZkMMEzIgV6C3x7RDVmgEyvbCAdtCBB3EU9A==","shasum":"be58022cb5e47e3fab52f06dca8af06eb7b92f5f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-3.1.0.tgz","fileCount":30,"unpackedSize":173608,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjJ8CRA9TVsSAnZWagAA/s4P+QB2fTZDwGxtnGHsOi1E\nL058OhaLdOajvBWmhgBf3rBNiXwcUvKVAQqlNwRmSkbpkedNhBd7+zn84Y8P\ncPea6ftPXZZKZFRlzh6jn85ieNycfue6DOG46nmxZWj8v5g6+PKWps8mG3jU\nFEavIRg3biCaJ/5qYMHUpRSqhmBkP/jYavBILdEaRs5lvm8CC44vKJTdo6t1\nvQ4Br6yA+6o5dVmM8xXHIBj2MAmEUakqrTVKIat+7H0AwoMqVaSc9yix9rzh\nCO9adEji8+eDVchpI8Etzpl3Bjey3tS4Z6E+YPkQCpQYj1GtW3/2nIGuaQzP\nCB46ZWhImINrnzy/q/HRqefmIzCk2QyTD+V83GckfkCawQallYCPGMXxZbA0\nd9dtDg73YDL8adcrqCoJrpC69M1LRz1dRHbetEHIVjBaBbhLZluOlyCr5V/V\nVLU8+KQql0oT6hg2uBVm6tr65jjq3FW709r3Ju6sRxeGozfecg/MoEldQCJ7\nqHNO8i77Prkk4sNLTfPYCK8dc2RZltCFZA08ZkRoQaGRtX83BzEValeFOaHV\n/TOhRYw4DJ6XiwXl12UAToB9ok+g2bgxceDtQhhaebXmaa65Tf501E8VdtAq\nhxoroeS4nIjK+wAocH8eBxHaeyw4bF4q+f1Hsr55xOQPDfPgzii3kyp4Vpdp\ngtuw\r\n=OZXy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIANBygmVy6/pGLTwBGLfsuzdOoxqgVuLl5YSs7MccezBAiEAuVJme58aw+srvPQS8kVJCtNGggYdi4UklDhrM93qvfk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_3.1.0_1563832955572_0.05212776728204416"},"_hasShrinkwrap":false},"4.0.0-alpha.0":{"name":"@material/grid-list","version":"4.0.0-alpha.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0","@material/rtl":"^4.0.0-alpha.0","@material/theme":"^4.0.0-alpha.0","@material/typography":"^4.0.0-alpha.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-alpha.0","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-dclevNURLYb6K27vv7dzfr6DNbIkY3ZKEpYnnkOrzKM0LxizZRt9x7dYxENxN6pSGeX7/tiHnouZ1udPiPDwTQ==","shasum":"87643e0e6340e7d6ecfa2bfc88dc1fa4fcb968d5","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-alpha.0.tgz","fileCount":30,"unpackedSize":173849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4CCRA9TVsSAnZWagAAnFcP/jvds2JjjsRLPwWDSE77\nQRmj3mDE9/zBDvOqMqymA8C+eDbRjZgTuK6c5TyWPeRAdhv7RI/ygP8LSsWS\nIs5QXBszBcOMNjJ2cb7ysrtKVrIh45JkCd6Y1sda6b3lMpZbnWHFz7RUKp0i\nFvMpLfeSfgAeLczWIVmwerqYu4hzZgYc8r3NU5BkJ/kIFNocRJbadLBuQTuP\nBXKX+uQeIFsvuYqa9ChmMsBp1EhSwj8monGhxoQwvAtzWKJQw4ykdcdbxM/7\nQT7QS+V+1eCmIkqbW9/BylQZMa+y/H/yTen1+FIL/idSThI/CIDz3ehx/LRZ\nLDpDEvHJplio5AfKcxg3ESxtzlgs6ihfZpYNvufzCaAjH5+17xAIn/YLjQ+O\nhSB2i3DEWI0QMs0SK7IkH+6eC5NmWfFrNkyOXuA5go1PnPnvErrC5fXYO7il\nD28p2yqA+nyFnHSU5axgWm6IFOoQMdJR3+mMjWICccpWryNObQARx+xFig7T\nIwyl7XryA0xoVS9qaPqIb0HTdTBvvyMX3IfU3iwGu0ysga4Fj7F8qtC7GK+g\naxq5r/kXpC0gRHd14svMachqbdZWm4877NODBnpNeChJ3hFXu/YSJs9JZNv1\nnLLqxeu4A5nv2zKInSvs6jnKUBxIt8IxPo7Cur0N48yRDaMEBoiLdf5H1w5h\nnawB\r\n=srQF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIF6foC8DLPH3a1sGALS3oBisggUxKK2HgT39Ki4a/SbBAiEAlb/MQCFEdKQbOgpygrmcejsE04Cinmj9Zx2az6bo3S0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"lynnjepsen+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-alpha.0_1565212162086_0.8379818111852588"},"_hasShrinkwrap":false},"4.0.0-canary.0":{"name":"@material/grid-list","version":"4.0.0-canary.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0","@material/rtl":"^4.0.0-canary.0","@material/theme":"^4.0.0-canary.0","@material/typography":"^4.0.0-canary.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.0","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-dzzQZ3ZU5Q1hc8fjMvAvJ8fI2IT45XrRd0q8WlJ28PdISewMhxGxSRKalWzzsAZhMiu3RzCyT7Jf6we+MobWuw==","shasum":"343ec0d96ca24c86e167a4f65b105a979bca2745","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.0.tgz","fileCount":30,"unpackedSize":175280,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJEdCRA9TVsSAnZWagAAcocQAJn2YbxH1lHlUsMfXhyi\nf1Qx7aiN10Y9o9KRh+fUcSfHcyVqh2n/KGm95Yd9uTtEAmUmp50pYLlJoeXa\n24ag+FHEP0U7+5IsYq0n76k9PKkqWmKyy06Kj8RQC7WN7IUvsc0qmCJv7cBU\nzOggxqQDykL4capmVwUmBWSjXGUVkbPQwAi33E14unvWcysYQvsDSOuGDhXF\nxrKskoNIHd0ZgHuOdXirAlpv/usJYvG8XjAGKtViPLGoPG6dgaG6Fv+P0Gnc\nZKdUWPsgTTdPrUKaLl5zHwkscMs/7vN1M4Cf6mteEx4w+ZWk3LRc1hm+ZfYj\nRzn7jAtSsu8yN3+U+UExiXo8go1hj9APb5K9yMXQkhwJWQfdlJecQYvFSLC/\niLQkNuWZ5pAHsk0mUvnsEi1JfMLjTJCSyzPdlEqyr61z2eaJZ5iy/xpmKOzv\n2FxUhP1C2Iq0Rs8nEQogStrE+hhGvHdF1CBuO0oJKM0Oaj7uez4xzwP1gVGC\n9M7dXosmKEivz0/IrCKoUIM/xLcIMNs2X8LH76HNqvu9OcwINB7FCub68P0A\nCDBbepWzbHGU/3J+OM1CCgvgyg2+wz/rrDx+dX6j8rGkJzhrYfBRjXQts25J\ndIcCYx4C5E2bSDL3DOg+r+qnFnaVmJHCjtOe8p3/AvYZe0FArXWp/X4uWPaA\ncjOj\r\n=QCfJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD6x+nAo/PoFcb5/uKrfzD+tRuurUx/MzEi/4N2C73WDAIhANPbd9FVEJ4vNDt0qsDMq7pFu7EQIXiJ6zJts5ELnxRE"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.0_1567658268638_0.6648036027732276"},"_hasShrinkwrap":false},"4.0.0-canary.1":{"name":"@material/grid-list","version":"4.0.0-canary.1","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1","@material/rtl":"^4.0.0-canary.1","@material/theme":"^4.0.0-canary.1","@material/typography":"^4.0.0-canary.1","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.1","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-SCsCSlC1EOmyg2B0EVVrTaLbMWf/zL0D5XohE9u39UPnKNq8RP6Sp3x3NqwWMJKvzWQl4JKz3w8kXrUyJmB3Xw==","shasum":"8ef473a8582578a9b90afb7827a0e3ac5aae4bca","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.1.tgz","fileCount":30,"unpackedSize":175993,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQdCRA9TVsSAnZWagAARLwP/ieS2AK+os9ereRFTRQa\nsZ7hP0TcxGZnFuro4R37b4g48al7PjURfyhJQ7gUfAvSnXBR38zUlqRDii8C\neWmwNFaQKNIdyvGCbAJqjHPq6S1RPzTcGQ+wgLPBOWg1M5OSCgAyR8guf5Mx\nD/UgKtpY6GuSkPNzZwU1ceEhL/KUSOx+VJ0ZwZPmc2fTAK7zP+0TboH1uefD\nyVMZQrRIWlNQtIBBZJNStBl03z/1IEGAqgIE7mgPbHDnqIKpk3ljunkmKNl7\nr4gugCFM1SP8pwuTMoBAvgBakKdiJx+t2gcNLw8ZQ05nKbC4JRsioh1jmvnp\ncR+MBYpoPcWKbcJl1Oybl1HpKkGuCM0orwQIjrPYmKkF8zNUDrW9tMzF5VUL\nzBJUIoT0hXhlLB95EjcUzXqWQLJQ/4ew42vpQsXMhgFWRqtsJ6k/k1aZPiF5\n5Dm2oK3gby5/MUNr6g1mL0CBJNyoNEf2UPziN3ih2vWzsr14aMsIeUckkhaT\nT6pbU7HcLV7muyEeqWqP5y5CzainyyFPpspw21agylgkSmwIK1oYQybvcgi+\nYZmCJQvNBCoVWJ4xiJWgtSrV5yThK0owwPUE7/ModuYr6I4BZxKSz42dZZdE\nM6FheZ6XWeRfW1+S5XYyPM2OJr+I9m7xLtDUTAhV48l/P1Bm+x2q3IcKBzjf\nw/QK\r\n=7BfE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDZN2Dbao6zXuS9F9rqHuZFjELfzFfd95JzVfrW+0wJgAiA4nKcoMDchMLg/R9qDAQ0lAL29X/U2si4l5iHVmdicTA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.1_1568060444908_0.8190904159428958"},"_hasShrinkwrap":false},"3.2.0":{"name":"@material/grid-list","version":"3.2.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^3.1.0","@material/feature-targeting":"^3.1.0","@material/rtl":"^3.2.0","@material/theme":"^3.1.0","@material/typography":"^3.1.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@3.2.0","_nodeVersion":"8.16.0","_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","dist":{"integrity":"sha512-0sHV3MWEAoQ5EbZDwXLW+QKByzG4Yq3WqLkgNBftsW2O4QsPwlDYLJABYkgVIcghGCcQNHAmba48O+RW2e8ijg==","shasum":"378cdfea1791f569c4aeb69499e8311deff58f58","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-3.2.0.tgz","fileCount":30,"unpackedSize":176157,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder5mCRA9TVsSAnZWagAABTEP/0YW2w4lpC9/c0uhmtG5\n/4hF5F/bccaslITjbTveRP07et+RoSKfzM5i4nrbQM/0M2SNrqlCGHOkEH8I\n6Y7w1Yr757EioFWDNrvH2rlixTIx2jlsufisqpzSeTSqhGy5s/KX6B0NxG/8\nSREZoxRRz2kwbO+QN/STvFP06nR9ztgR5Pj/lnUakBNfAtonEnNG7xtx0m1p\n/GDaiZHxuML0TS8p+QpPQIq4dNC9BH+i0e5BuIyPqB4VCSor28SiCpDMH9ix\nvDkcDRwrBA4x37xI8LKO+iMOD0RPeMtYrY4ERQ8kFc1D+hCR2bDdAqlqltY4\nmgjbaVjuAwy5Y/6tOeYVtpMRXbAY3JEmdDcTdBlgZEzWFgztmcXrCZIAcI3G\nYh+z48mqwFH1DMQMZL+/klITO0zxnAAOgxV+K92wDD9bm0slUspXBXQbE36G\nWrEi6r97B9s4Wx0l8rGIIYxBd3kPw9WvozICNjlOPsa+KyCC5WhYPxXDRR68\n3YPZ0xu0/WNCrAi5XIk9S0WMA5NAC76bMRndJdzg8Rlx7+GYgoHAr6ke45M2\nB/N+Y6chFe/oVufsLwAfGbq4Hn8yo+q4kNE4h/uwihqfuL+w70Xnh+3Jhg1i\nXe7vKio2hqEC0gNhPp2Fr9ICdG2BSGXs6Zd5usXcslUkDTyh8Hig/py4HYhO\n8mlV\r\n=Aacf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDR79OIlrpBgVTOlpiICBu3F+GIKyaq4E+3hKWkzZEygAiEAus69R2dVBLp51SJl9jT/SpBiW0jKxt41MCC/Km/8f4k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_3.2.0_1568325221496_0.1510656060341269"},"_hasShrinkwrap":false},"4.0.0-canary.79d881baf.0":{"name":"@material/grid-list","version":"4.0.0-canary.79d881baf.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0","@material/rtl":"^4.0.0-canary.79d881baf.0","@material/theme":"^4.0.0-canary.79d881baf.0","@material/typography":"^4.0.0-canary.79d881baf.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"756806a2389389441b5b3c130de02948130d96b9","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.79d881baf.0","_nodeVersion":"12.10.0","_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","dist":{"integrity":"sha512-nzvTmaUqusNkiniBENms2/05f4K0ejfiQw12nI6RmR8j+VNLOI1Yho59kupW4PGhlDmTi7U4pNWIS4I7mKaAiQ==","shasum":"d594e9ace8e7e1f2fbc35af3a3efa4ef6730dd05","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.79d881baf.0.tgz","fileCount":30,"unpackedSize":177506,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev0sCRA9TVsSAnZWagAA/FMQAILOhi0QcjE4SjM6gJv3\narP5CFEza44B+qcLNOcjN6ehfbK3Q0bKDqEkzUeMqM4Pr+WD9Sv4XHNY6tcw\nEnq9M7u7+lYT0Iydw4BzyXEIUJ9oeIzZBruphxiu2IAe0x9EYLRjEzNCTXuo\nOE4u51T6kXv5FdVEVEAmGOa939fd4vQRiTORIIQXG35WbVCvdoB/BTBJ80Et\ntojq92SjDEIQ6Kn3yjNxWkW0Hy2+KsnPDhO1d/Nb9D0CGNU1x1MfQWnB2PaH\nO+KdIKTE3+FFICS0gRDUbcXEKt19MeyYIUL6ChP5IKI9Vf+rjU6o30OCZW/4\n8d60gtLsk63p8v+q44aGq/+VYigWzPfcVA847IEoL8gJaTAfM4d32u46fHyF\nDRy4JkhOPi/S7C7T/L8ABRr1j6EUhn9+7t/obJPaPqZLeZGvK14VlD0y1cVv\nkY7bGRlNZ+h2U0iqUzBxN7bLm6klAwqREYJFe7/lLb5RH+CHaSAhkVuh+TbH\nQs8076SGiachUjt4jo70cowrzYL5mGdq2ZOMco1K+9m9WUECXS0C+K+TrZvM\n+9laPyFzUkjTwyCoHpqVqIK0jDs+MAa0tkg7y5zRYsSvzVQqv/C72dhyh09h\nXbhJQBUTIV6FF03g3EUsI69EmRA+l3ZrainYQ3LAglmFdtUokw25R5LwYpI0\nn7iz\r\n=VWU6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkeaHsDZIfO2/c4rgg9avOb34Eg2t8BtmlyQPhRCCfTwIhAIgPkJfNw5iQ4hyVHfi78apv0wyndyJiGUPe94W9BAvK"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.79d881baf.0_1568341292083_0.9986735145748933"},"_hasShrinkwrap":false},"4.0.0-canary.e851d4f40.0":{"name":"@material/grid-list","version":"4.0.0-canary.e851d4f40.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0","@material/rtl":"^4.0.0-canary.e851d4f40.0","@material/theme":"^4.0.0-canary.e851d4f40.0","@material/typography":"^4.0.0-canary.e851d4f40.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.e851d4f40.0","_nodeVersion":"12.10.0","_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","dist":{"integrity":"sha512-ZDyx50UjrujiJUAyjciw3rQ3b39ox+s9VWE7PtL2bYmp0GcaRUpepIgU03RVNclcGbjADhRvakmjVKp0Co86jg==","shasum":"fe6fbfc5156b667c27d1708802d655c7a95bcb2d","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.e851d4f40.0.tgz","fileCount":30,"unpackedSize":179226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexX3CRA9TVsSAnZWagAA5BwP/2Z8EoPWuG3QPcgJREgU\nfTkH+9l5a149xNlADlPcr8fv48VgDTkGMPNIb1lCi7SvpLTqV9MLeimHV4+D\nK+yJtGW1kz5U0uUTpKtVotduIMecvbdixWD0y9GyWSPZHKtB32e+prYqiBwa\nHY+ESeDTjnNdXb1Q1qxl2FwMaQlULHzD8cQPtk5TXHuAGrodKpzrHDttz1Fe\nMkCo6nvCNq5a0Ao7eagxaGWxATD97SrrjqM5lbKCL8BnGtzYjYx0KccL8988\nTu6FzQ5Gyumusid+tWa9IUA1nTmTEX3Ur/xEwpAY6WWexrjrYkdnNqhErVG1\nT6zw/m9pb9xhpyBKvmL7KfHk+i9WTqg74Jjtt1ZtMeYvpA9718huJI9BFzO1\nRqn94TB2EZrFeMP+cs4kK+ue+eGGNM9ZJrwTseqELSSSO/5BHdC50KorZBLY\nBH58jfxxJAg7lnj1ZNk7VsFMtCi5B5RluVXzjETvxpD3ev0u5FdCTkUBxjwi\nwAfoLGFQkaaLiDsLwP8XwwF7RAdWThhLeWu7CUjW1qJPwUDJI82eINOt6DwA\n07qyEpRfjDulhq24SBibNR3n0j7NAdGxs4pi+NMjIiJx3+QND4URd3ZftqIN\n9pPoyhKwk2BV8knV6Kza8IWsmG9SbZDXzqHfzdFmLsDSyNo38ZylDnsKzPAh\n/SHa\r\n=D7Eu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDStnUFaQZPa8hckBNWLO/5WCkIRe+YbDJY+IGz1/ph1AiA0Z+empsYr39YybTMXbKc2n6PJwvynGRlEAwdQA1+gvA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.e851d4f40.0_1568347638945_0.011210970885032756"},"_hasShrinkwrap":false},"4.0.0-canary.905884690.0":{"name":"@material/grid-list","version":"4.0.0-canary.905884690.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0","@material/rtl":"^4.0.0-canary.905884690.0","@material/theme":"^4.0.0-canary.905884690.0","@material/typography":"^4.0.0-canary.905884690.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.905884690.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-9EBC0eSPV7J7Jw0+lmpud94692bJlu//jJDCWlgI3KkmYc7UCIgZ97f7IGCTr0Kvdhtoq+e93ZW8dZ7cKHDksA==","shasum":"adb63c1cbe8870ed50a50e6a37ae60004d08ace3","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.905884690.0.tgz","fileCount":30,"unpackedSize":179441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB86CRA9TVsSAnZWagAArdkP/A8sRL6yMGmpamXFKW67\n0ifNbSSxDrjWbAmm4VMXqi7Nl5AvZBuawlIgUu16neskLCanvef6aCth/qhS\nawbvwMKsuGD0xtFXmTBGMhpgqmm90HKQb5OAQqjg1srO7lvGCBosfUsQJHj7\nuW17JPNYftdxCn0P8FZAkS1G0gFMUwwxYs5l2rLa5Yae2Tnp7ZJvCebQs7Bd\nQtFheRePRrA8u7BHv3AsOC8T+Ha1N/zfDjlKEr6eRmt/Jt38BmPTWnJs8ciZ\ntNUsEcw0KbMaGMKuKb1N6HmP9TBRHqJBt9/i058wZc5SMdKJd+18Nhitaf4s\nku7yFKntlKhDh61C9ghOO8xcoJ+VljUJaXv2I9ro4TbVMQSrXJ0amDCnjW7x\nnXeqDg17mg+gazjUdYVn2PELCgH/i5vNy2XZ97lAShs0VXeQfb+uU6Sa367W\nkN2+ESS6smxS+gh1ADRV7eBRAnqbgzTd5CZwSooLmHbRE+VoWV2J5rgVWciP\ny0kuUxOh/34UrI3GNwztIrQzcimgRAW8uxMzyzyKeOFDQfASleRMFCJhMzAW\nyd+Xx23VLJwjrWpsavrsVA70FP1qzch4IZJRHtarzi3RIh3cuakynqQmDFBd\nkDvu8cFd589GOOTwS9vGYE43++v1IoA/labTh9DiUJ9b4JSPbcmeEuOEs3op\nBh6U\r\n=tcip\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBln7cXDWNC9vnTfNtz9TidIe1+BTgvMKaiplnSAilbQIhAMvjXfw2ZOX1Un1PpT+zkdrCDECCIP7y1ZfOY4BBvf1H"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.905884690.0_1568677690216_0.9856825380593757"},"_hasShrinkwrap":false},"4.0.0-canary.199534d61.0":{"name":"@material/grid-list","version":"4.0.0-canary.199534d61.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0","@material/rtl":"^4.0.0-canary.199534d61.0","@material/theme":"^4.0.0-canary.199534d61.0","@material/typography":"^4.0.0-canary.199534d61.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.199534d61.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-DC903TfGxIO7BIyswn90DHO9WS/EdWevHqdAdeg8p7+t7PloPHFhCOCvxeMbX5zVbGG3ggYkeCp9QM9eDx4yqw==","shasum":"c397744184248546c939eeaf303c916ee7e9e8f5","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.199534d61.0.tgz","fileCount":30,"unpackedSize":179656,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlumCRA9TVsSAnZWagAAGd8P/1VNcHKWdTizRcyYg9SN\ntDtL64eOR4AD3/DzzHY1RqgN1t5F6xbmA5bqpJOF079TStoxvgZBsRHOKucE\nl8+xiowoAxzJ9XguCFt7/NXnjNH40oTPxp5YvcFkc2GOeQBU8F5cUGRgKNzG\n02xvCwLwHLo1LFDjg320lxgFKugvVtzH2LRewf5tnFpMc7XExC9MpQWO116j\nN3fLmWP0UcO5qFWULBEjQJU/9R9KNl2bBy5MObaxysv91nDRHYN8rulEfGBP\neksFXsynxUjCumeih3n5p3KVEmBHKqcXFvJgfaaC7sODo/wkBHfbwykr3wsw\nKks8D75sMZz6n6SRR6mQdYVPxSkssbKwmrLbCmCIVskiJTex+NqLA5O3Anuc\nfjvkHSiWmp/kjmZtpeR+8ET+m4I+cHYBsXIIwFjaKnonW0uDEUXsT/A0Xf1b\nw01M8Fa38zgwAccbiEbMomwe4MNRFL/v975q7nyLUu7Nde4ZlinB2VN6bXOF\nwIYZdL89APKSsQC8PKNfLv/szAIGN3eUTkdEV35iYNaKt1tK7sOPcZUpbFTE\naJ0SEh2Mo9G5a9c+0V3K4KmaB4nnJs25AriOnS2ZsSjBTTbqCqcYosd7Yl5m\nddJrNvoZca3Yf55JeZCVSVIQJPWweGkdt8OZ92NwFa0NaNzfDZrjJcLSVItm\nHffe\r\n=Gc3C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCWuwFHd5qh6VgR3qfbPoIijH118DGD1YfCxZQuOzL/SQIgPSOBH5lthux8UfY5uM7XDrmXypqcm0c5hlP7lOPjIrs="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.199534d61.0_1569610661801_0.5711628090772001"},"_hasShrinkwrap":false},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/grid-list","version":"4.0.0-canary.22d7ad2fb.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0","@material/rtl":"^4.0.0-canary.22d7ad2fb.0","@material/theme":"^4.0.0-canary.22d7ad2fb.0","@material/typography":"^4.0.0-canary.22d7ad2fb.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.22d7ad2fb.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-LgnAq9t8h2FpiMtpPQAipDIGkqPKQdOxDf9u2lp1a/iIsICGALpM5YCoRatB7PRK7TJIPXVa6NhHijwQKlokMg==","shasum":"d1e2f747895bdaab86982bafe0aa067f3725b24a","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":30,"unpackedSize":179871,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphaJCRA9TVsSAnZWagAAxaEP+gIO0h0Wk1D6q1LcE3NY\nxS5r/bwjAqcbCfmwfDz3Crx10lHhL+AkLrXWAUI+JyaZLgC7ReyQsXZzli51\nXu6YAQIGDq+l7w8KgtDxDfsFikCN4mC2P+lNJ17xIJIovZCYZdigdq6DgL28\nAvPlQBuTJdHO8NajejxN/BFVXHrnhwQjjNoleMY8FOf0pBxulmQYu3bmxfuO\nR+jJtkZPfWzYjprJbxPGZ1fwZhTLoUoc7ItFpeLDUAh1SGeOUJ+t53jf4Yse\n/1jNIDwusa392xMloMpTCi4K23oL/Zed91Cdaw9IiJlv6Qptwkr5Jj5ZiWmR\ntcC0JthcsgdGaRtTZfbqAC3oGxsPMLoiQrL7TxUyVTDu12+BC1qlfEU0gH3h\npjIgx4JdxpB5R7oPvpb1oqoXYs13atv4P78mQ/mGC9gq2vblB6E5Cdp+1fAg\nIpgUqL7S2nyDws4nQ+djWKdb83c70HktWC0WwdgzTe8ni5DYFZ2eO3t7uIrw\nDoLPjUFvKXpyy9Yit1AgWJ9khsAjGyzcmzeX4RcnaEhAprepT9C7KcDsu1ot\nbV+knaGjGSZkLI58f8MJcLlt8tyzOmCQW3r3mxKPimL6uFwpIevT5Af+0yOC\nDH8jL6eIB4xOjJASDbuB+7pNVC9eoBptnaa3lGMlbmdzQbwLdBD3WxuL9AcV\n7D4E\r\n=a++l\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGJf8cCPL0GVotYfsMqXSuQErAvcvjlwwR2XAGPD+vhAAiEAzGpod/xbOq8uXQcqytUHc2DedT6hT/GUIty7US9Gfdg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.22d7ad2fb.0_1571165833195_0.6154438090874075"},"_hasShrinkwrap":false},"4.0.0-canary.735147131.0":{"name":"@material/grid-list","version":"4.0.0-canary.735147131.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0","@material/rtl":"4.0.0-canary.735147131.0","@material/theme":"4.0.0-canary.735147131.0","@material/typography":"4.0.0-canary.735147131.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.735147131.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-SjRDHHFCPD6zN3zwOEf5lKHNxDVX/exiUqvk7e0ho1BQlt/pbV9VXDHHl+HW8tfRlJtfRCjaqPdTIPKQ5+QSFw==","shasum":"d5744ed111332630fdae2f993545c158fe41f0db","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.735147131.0.tgz","fileCount":30,"unpackedSize":180296,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnEXCRA9TVsSAnZWagAAAh4P+wc13a+bZG0eJYAtJ8y1\nd/1sLPJTr/VUZvEqsl73CLrabjYpB9/LNZMXXctZKb1yx7ey/zboAFtswzBQ\nmJfYNH58l+uD/aHUA5leCamj/OdHzbNmVMw8AZhvPZZKIOKQTDpANNa4EEa5\nIaD4HMa+a653yRu6z7fSznhAkbGKta07SmzYHRXbK9v4ZzAoDD0HFAP+E6ce\nKJep6U7CSplhl/d8uUnw6EY2SchKAI3SB08kUGgW7uaVW/jIKPQZB6u4UBOe\n0/Amt4jSYYwDh3h8kmypxXe2LxLlhsWHIEUI+xf3Sn+GW3cGbiGO1kFvEWVX\nn4/zfj2uVTM1AK0gkPDlSjCHSWeRxphflg02mgeHSOhbR85vn3XHE1RMtl8/\nmc3t/DQh3KEkWU7xE780RDtMOEXMRcNaFVIXrRTvlJjgcT7qhVLzH0cQYY1f\nRlngOf75har8eG0mKjtkaPN8U6EvxOC5auegmCW4mWyewUwabidgQKeN9P1q\nh6/I2sDtwaLXBv5bitj3R0TamEFF8CgB7WKXs51xSokKNX/lvPZ7CE4IU5qx\nmmYWEL5kITagUei4hmGNu+y1fXsxhcpznYoZSO4h4hcnO3fgjobz2ljj5Eqa\nIjwOawbN9/iNfLJpn5scAftN2en0AhnAoARlNrMjVNoIPP2Ymty1Y2tQtiuv\n5swz\r\n=f5c2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHNt0Gv2hpydPf4IMOy2oQycVjFpwjKzWWYV53sTTvtlAiAnpIxYgqrJCa4Xi+y23p5f480VyEh7eRf1Vp3V+iepcA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.735147131.0_1571189014478_0.2893796885849065"},"_hasShrinkwrap":false},"4.0.0-canary.062ade5c0.0":{"name":"@material/grid-list","version":"4.0.0-canary.062ade5c0.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0","@material/rtl":"4.0.0-canary.062ade5c0.0","@material/theme":"4.0.0-canary.062ade5c0.0","@material/typography":"4.0.0-canary.062ade5c0.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.062ade5c0.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-KMRQi+lRzPBc5ve5nhfJTMtThpvjSOLG596nhGH3KeKkUDp4WgWFzh8mUeydsZ+DyfU27WWmFeJ+JrWjP7Mzbg==","shasum":"8dac5b47d21425bc26ae86f26ab72bb0b0d39cc0","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.062ade5c0.0.tgz","fileCount":30,"unpackedSize":180511,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp71tCRA9TVsSAnZWagAAcUUP/2sr2p8mUzOGP57/tpo3\n8HUx5SXgKCGDQ6njNjleychHWnECQ9j6rHYP8o7egHkjBkeVxVYUOP59ff1B\nHGyEKJG5dtIwWm1zdbW3RdlLFrwOL1sn0+cmwPoVwxQ2MG79SePO42fcFuN4\nqME2shemlMLdDqE+3gmSfB84jggKGlWyTLynnMMamB7TgUIR3sTO9nXtcJn5\nBSxsYV+SRBh/TvMQyL6imy5qBrmfmrzjV5dQZhrzPB1KmUG5gFfg9Da3vdx5\nqhIw846fQ8gSQjD4fyryteT1C9NVy0N1T9Ytro1Akj7uk1R2C/x/5U3hJDsH\nJiJcSXhHlwYfCbRZYMRERelY8XNr8gBQzbiFR/AU+ofFZEgHBX2VPkWk06ni\nZiLcc2brUrpjqVRSA8mI4sejOEwT0e2zP6awfHmOkJxahOWwToMSJiOuzbtg\nCGWZxjVUJHDwOgfap0zrGQvWnONqRvrwJCXogPA+wqq9nFOqX2OYcRWBtFKY\nhAUB0f3qjC13oXm8CSAd/0n62Egl77WZJJlUmtlk1UaFGAjBUoJ8HwtvnFmQ\nwMbXsWPkcdUM17m7AeE+XtnshhMBT62WWqjOGLjsFLjAU8TPuigvqf/W7kYm\n48dGn9B2QbbW3cHVGEpSBxZOfjCJHRnIfhjSUPgwv0Fha7u+qFZS5qMtrlcZ\n0SiF\r\n=J/1Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC5+zLbnfRgaxoXJgbBJ9CqdwGXPZFY6Ch21pubbki5VAIgKksdGgRWZWmRAwMXTzmFK6VsaWiD6/Qpqo8v/zrIkDI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.062ade5c0.0_1571274093101_0.45857422131135306"},"_hasShrinkwrap":false},"4.0.0-canary.774ad4f8.0":{"name":"@material/grid-list","version":"4.0.0-canary.774ad4f8.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0","@material/rtl":"4.0.0-canary.774ad4f8.0","@material/theme":"4.0.0-canary.774ad4f8.0","@material/typography":"4.0.0-canary.774ad4f8.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.774ad4f8.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","dist":{"integrity":"sha512-iK3t6bFzsGa1V7E0hwPPWjUILHnF3/oS0e7p21uEo46WIQty3yRVwl7POr+s4eGOB27VDERyk1YSCaYrajOCqw==","shasum":"7159c417e9d80053de94c723f4714e1f7ff88009","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.774ad4f8.0.tgz","fileCount":30,"unpackedSize":174032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+hRCRA9TVsSAnZWagAA64AQAIa/+gDO6TiNlSthpVy5\n0ZiS/RHwePhz9TrAbs6zbDe5mqhzO0b+AkWnlnMA8wwa71m3/rd/gJOiUc6S\nFim1WowFtzJzPZf7bSB32N7wAaFspP1f/uzjuomSQc7bnN0Icdbw2A46Z1AR\nCIULGF57IuHtC+N9WAJbojfFJvT4Nj0FEPTirMqnjjix+W9V1wXXICaknsYC\nt5mPysjWHCE8PWc20MLnm1cGPldv+X4moqvvYX1A1/b0Lf5+nHK/ywyaj2RN\nlhIZluU0svXg4WgGTPdyxB2ldHZrsfAv3jmzl2Ro7NwGxbLBmbN/wIC7oLdX\n1xvgyFz+aDGkHhMDkmie1Uf07ZS55Um0THU3GyNwPOnAagdr7UqqDQxdZuqR\n0tcmDYbM9rBMp98FPcJSJaagObLgFsS/Y0X3GYzxenAWuYm0rRxXsM6uLMEu\n0kiQTeGLdWFNjQi4YsjeTMV9++HfcvvKIS9ZTGXqOxnxY4aZAUJ9qRAJPRyc\nM/t7YMRk4ETLRYxp8OlQ7mNWp043cYJqLlSpiYMUbrHKmz0KkVfkdPz2IayA\n33bbZBI52QiXaFqqwYNl+Rnb++O/QUxV81HJrHudRvCuVC6mRQcG+B9Hj/30\nA/C6x9+wYlbS4je5yaw08VQdtZY5tveV4pmBCdddOulb0mh6pYukIzmomWUG\n+eag\r\n=dR1k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDd0xfvfDMl4J4HReBPJsA1kjlUFzycMTbBXMi3+JMUwwIhAKJsnmBPz1e7hbKYj1kFGZGYXjProlp9quUexBDdQ0Q+"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.774ad4f8.0_1571285073025_0.5267468791743353"},"_hasShrinkwrap":false},"4.0.0-canary.5916d18c.0":{"name":"@material/grid-list","version":"4.0.0-canary.5916d18c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0","@material/rtl":"4.0.0-canary.5916d18c.0","@material/theme":"4.0.0-canary.5916d18c.0","@material/typography":"4.0.0-canary.5916d18c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.5916d18c.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","dist":{"integrity":"sha512-qYWDq3b/46oWpiPAsMFu94XOfUyYtlJTCfL0r69sRzNlsDQxRDuZaoT9YNJJ1Pgh9VYjAAM8RBbu3vu8Jm1VYQ==","shasum":"3aa3714b210f5c27d37df113c08de9ebb1f88149","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.5916d18c.0.tgz","fileCount":30,"unpackedSize":174216,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhvGCRA9TVsSAnZWagAAGtcP+wUe2VYV/gYILDisPnCv\n+FGvzhgbp2GAZWwOV03BHxRSDPPkvG2cy5a1ZnJtrqEjwIUmXvAOl6tNGjyA\ny3ohWzA5GH7UtZWZsPOCvY/7LucTmCL67XR/lRJ2qBaUA++kvURuUePhe0Jy\ncJnEIqna5qI26OxYAIOHPXqCB99ocH1MrV8s7EZrVWwiml/PmNWykjs68UYJ\naTl0AgGGW7yoz6Ex/Kusv8+zfOVCFu1JEAmcFRmCtpF+9sFOO8Je8wFhCkXs\neItVswYzoY1W5IKxx+KIzqayAixJFdiFTFdbjadJtLlzNTaaPP3E44YjV29N\n6dbpwcJp271LrrnIOPI3RQqZqMNpuY2iO4Xjct1P+z8xWejbZu8fvvu4BSHp\nDJ6ecakj6donIsiIP85vA52GZvODRK39jV1R80qwhWJ6Th8e08cQQzPVqobW\nMl0WDGpYyo38srBuZC4eULIKK/3dKOcjjCYeKcxXS5FNe8BuMa17ZDSj1oy7\nOsU1unUqQ0hNufF0oLET7QwwDibMyGKGt6FKoMMdlxnHUWh7RsSmYnLdZG6U\nmNikf3dHwn3ExHwe4dZSUOPceIo8/uYHZk2Ggboyl7lt2p2NsYOxfO/2NFtG\nG/ooxeWHdbOe9gY6DcMLXukaX8wjviDJrE+HFf4kidr93rrQR0dwe3vdqyeY\nWIM8\r\n=3lK9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEbCHa8FDUVAaHbijth0/6GLm4nv22IaL3UoF9yEHSfwAiBwq8/f/JjUYpe8sc6OhbrJt2SuqjlZrYgJdA/BkgFTrg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.5916d18c.0_1571429317800_0.7948752821262972"},"_hasShrinkwrap":false},"4.0.0-canary.d4141c95.0":{"name":"@material/grid-list","version":"4.0.0-canary.d4141c95.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0","@material/rtl":"4.0.0-canary.d4141c95.0","@material/theme":"4.0.0-canary.d4141c95.0","@material/typography":"4.0.0-canary.d4141c95.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.d4141c95.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-b+SnRrZaoL/JZhOtvPylqiGeVcbhYFF318Bq4jcLN3ysu1xg0snaoNJYuM+fFdVZppU/IzXInTBj6PQMUlyeBA==","shasum":"4f6c061b19773ea242ff5f66003cd7a9a3417db7","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.d4141c95.0.tgz","fileCount":30,"unpackedSize":174215,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQCJCRA9TVsSAnZWagAAgfoP/2ZTuSIEAe4q8DvaP5yY\nDsN28dBn0ZezMRpkgmuwJwqvs18384ar7I7DiGYnlQXHvFFnkAHjEnMwtRlD\n2WuQpIuLZDJZEIP4Iqlbkie/SSiYSTk1HoTje5sM/SCc0cI8Ffle5Z2L/SMn\n7B8Qxh6T1GCmUUhoyvxLbS7qx/ncwF20xXvffVrh/lPGvH3XbdENgTkUUHjv\nyYrYZmGp3E3iMXDOCOn8QZxIWLXWvd9ZgMy5lYKFK+RdTW59G77MgBa+yL2O\nugjrFlnPxKHrRKvuTzFG6w98L9TVW4kjQgxFi4TihMktMCPHGbVVrrlXeXbJ\n3/ZwqY8go58HG8ZKq+AvRXdj2ZTbRaQLCnyXmAHHwIRx2if2lQwjFpvi4M44\nqjU3+iEUuXJWaTvDHllUYCWHqUMPKGlD92UPw54ORic9Qv07eu7HZKHJvip+\n1ryotxa6wjGe0QqVUqBN7rSEMB5gVkK/jWDo3ZOWLmy/jnAzPL3nHdI7LS5N\n5zMgFw6icm8OUotMkIvGZH3UIUMJUvcdx528nIrlYlXSZ/m5abma4/nSMmET\n8wSEWkMa5vooavoGZjIGWNKTTMaH+hWCLEmdpiXSo5ikzo6M8fymaiL6sypc\nr9huPs5WNd6Sn+Dnijs0mXsCGntpMRTbaHWth6Z0r/nAx2BLdGrpX+tlGtKB\nfW3B\r\n=78xs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCpXg8Z/HOb3d1UTOBzRufaI2MpBl598x5WxOVlMZE4UwIgaI4ln1pdgbQ19n6FPt3pr99Ia3CgSdGftJQqS61LvNo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.d4141c95.0_1571881096742_0.44290130417724427"},"_hasShrinkwrap":false},"4.0.0-canary.2b878b3e.0":{"name":"@material/grid-list","version":"4.0.0-canary.2b878b3e.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0","@material/rtl":"4.0.0-canary.2b878b3e.0","@material/theme":"4.0.0-canary.2b878b3e.0","@material/typography":"4.0.0-canary.2b878b3e.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.2b878b3e.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-4UxHWxfZMq1snzWDqsGBVIJR3niV2Y4YtZt/PRLT2EmepE1L9YGaKhXgrr5g4A0+K6tgjAnPsw/9s+1P5byXjQ==","shasum":"627d5a0bdf0b5408b7b7290bd30d577efa50c09f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.2b878b3e.0.tgz","fileCount":30,"unpackedSize":174325,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslmhCRA9TVsSAnZWagAA6rUP/1euvkA93pTkonEOoH2T\nAxtjLljlgCIxNANdNvdD3u+PO9Q0dDvDn+PPXg9W0gaeHES2o5EMYqyi58co\n7K7VYygM9GR+OGsumwuO4FpT2jthQLITZ7olr0YdTLF+biTiPIYPRiKJwfYc\nD3RfkKIU6UzCaQGoPpi/sqaCrF+tN7CZ7LtQB+DI06g4LnbIAnqWA6GceYST\nqgOE/gq5K4biuuFgLMHdP19ZmpOeypvsN5fG1Gge0IIDTs8fCYdzfRQKrI/N\nlPz5vFj8zMOvFooqkTqMdZJd0d8lQboTcrWe4X7Cx7w99LeIuW4tTDEuJ751\ngCSNlTenRgOi7/8CD74NK/VI1YAR8hSBf7y05/v6MQzM4H5CZMdHIeXJUCIt\nVRQlVqaRAypxr+RSDzEI0bhjjksGgWyxQz/ijJZJIwfKB594rmkoAqQUan8d\nW5NeJDJxBkIr5KfPW1hkKc0l9ajxSe+XluaEKg6HEr1X5ujWvgKvMa6+hYp6\nb4Kqc00pWfQW/ccdJD5OUQ65rhq4f85lfoQ/Wh2OtQK0y2wO3LPFGDwcxdza\ndGy/tlqqEUEewUqrNaGoK8CqdVArMHzjQetWpyPdnjjQUKTpdHIVQpgF2qw9\nnUhRv0bvyfG3QL7DSgOUeVlVJaVFJkflML3b/tJXND7ylHZrQXiOBVkXLRlA\nmwyM\r\n=l1NT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuMvuC4K+uMJ0Cfcr//mvuK8YoT/E6InH1DyUDot8tnwIgKnQzbwzpsSpc22Rani8B/B9JAupQty1KTayDR/0lP+U="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.2b878b3e.0_1571969441230_0.7723324612614217"},"_hasShrinkwrap":false},"4.0.0-canary.b06c0efe.0":{"name":"@material/grid-list","version":"4.0.0-canary.b06c0efe.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0","@material/rtl":"4.0.0-canary.b06c0efe.0","@material/theme":"4.0.0-canary.b06c0efe.0","@material/typography":"4.0.0-canary.b06c0efe.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.b06c0efe.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-9/X48AHZpFEl7Kj0xwzpYhuLM+yPd4ZwmQLvdasNgltHs81Y1fp7ZRJcXIp3SyI5APLnLT7jFr8pEpzIiI7Lgw==","shasum":"79f0f196fc79087b4ceaa1830383db1faf94f616","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.b06c0efe.0.tgz","fileCount":30,"unpackedSize":174032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6LOCRA9TVsSAnZWagAAKl8QAIjjtwm9/TZ7+75C3yXR\nFTpcYx+A3mk82G6JQ8cUjKCp6ovrxf+8o4+7CFQbiE338iWh5hToSVDISlYB\nft9IMcxpCnBYPJsE5ioQWBrI6Ee0M4WIHg54uw4/4IONXUC0mSpo4HFkU0kJ\nat+ExgXJjohgBpzOIGEAvm7X4J7iBSVcP865UX4C0U9wDGIyQ+ZGzE05sEyn\n/xFVkTMSN949se60+4i33FGwF/gUCacH3wXmTj5e+BB5LcwP+tWEtgM41RTv\nnOYEpq1JI35BSdog7JemhH2cJBunZMcLrJ9GxNsBquqFOlry1QnkrhKl5MUp\nw37lueh9NqQx4SHSXudWbil+Fwcjp8ceuJml2ujDYSG1/QgpJb9JDUQzF+iq\nnkrKezM9YAjXQISspjcT9WoRKf3YkavDMcnI/jsILLIEv2hOcrBcB6O//Q8Z\ntziVaa67RM5jM4pf8Tub74rTal22viKoDZf/q+DoLnnf03aCruGBL3w1Hk3f\n+pF6+Af68ptuAgeADjrzTIxk7tWQrHswjkRNSe7NI0sTUmfxsbD7s4cZRuQu\nX8nQXHHWrODqyjRh3OlIpwBa6xl0tVENtdxiHyhOqcIVTc9v+NRqgPBDSN2f\nQNeG4NAysYdHnqCUbHQ8x/bYuhVv79TYLpbcJ7iPB9xMBB+cZ14z0YeGlrPT\n5cM4\r\n=t2Sr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDdmy19XoqvXiXxXWjRsJu1BQlQbq+XzqNdNtNBDz0nAQIhAJ0iOqMR1w5kzvUosZq+7f7b4S4edJCGLqMu4/A0W9jx"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.b06c0efe.0_1572053709798_0.9729769840059861"},"_hasShrinkwrap":false},"4.0.0-canary.01628efa.0":{"name":"@material/grid-list","version":"4.0.0-canary.01628efa.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0","@material/rtl":"4.0.0-canary.01628efa.0","@material/theme":"4.0.0-canary.01628efa.0","@material/typography":"4.0.0-canary.01628efa.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.01628efa.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-B6PcpRBfL+iM48A1095HcY8Ab5wEZ/zFGVhgtKGxGvCJr5l3RZtg7VlAUVlAIJxYTwru1niciJwZZoKNOMl/fA==","shasum":"da91f3d18142df6815cb57cd9753edb0e94a8149","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.01628efa.0.tgz","fileCount":30,"unpackedSize":174322,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4G2CRA9TVsSAnZWagAAcA0P/04gO1PW0ZdAqkB0cLxF\nH0xwbw7WC2ZXkJShXzoS6zFPudWc8V989kpSa6rl8csNcJsmMbjCtyXVER9q\nQb87+yXda3DYHr+zclDCTWnMyicLqFnN0xiR7pR98jm04qVKQ9pdH4SUt7Xt\nlELIrKT9M3HJBzTm8owWKA+BCPWadU/hbcD57NLVkh1H/k5dg2Yj5dTBo+5I\nV/ohf710XxLW0bTFqz+kCc7jCve+KhwfbD8vE2RYkX7P5pGivRMGesnINKqU\nJ5vgS+EKX0aDPwrxFa37CMMtHzS8aeliwERah6z7GwJLlRDfmqmSKYxgNHMg\naDTkFHMllcAFR2BxhoW4xSxJu6WRnfiKbD6FcOmxUpOg1TUaiD2b0olSNF8G\nJThaV8sc9RwveexWtkS8PzB6Cjsozw2+2G8x8BXUa/HpAnZQLs7I0eJQb/IM\n12cYCYgPwJB6ErQGQkB7Nwj3tKiuJU81cfnj+vPpO0qbisfJUWwXqbDfCEsX\nClb86VmaUSitddP4RPRxGur2ss2uCy79oY5joTHtHAVDiideM8xpsyDRmmwk\nf4twvpJVB/IzQj07VDTHhvxzz/nL2gwECD/nVAGfPYwmxl6B/EeCv3nIcEDL\ncckoco9GHUFdaahwxw7KXnQ5EdLee2em9akN0MoRb5199C8zEj+4olsqY+HL\niGx5\r\n=Zj5F\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBxThupxKrs+gIR2FxmtHtczmAEZRxVvfe4Xxh//mNH1AiBduvOsKHZS+Hc5NISftDc7b4kLqclBaZ4EVDFL6wiWWA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.01628efa.0_1572307382295_0.6932411364880942"},"_hasShrinkwrap":false},"4.0.0-canary.b5c6d66b.0":{"name":"@material/grid-list","version":"4.0.0-canary.b5c6d66b.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0","@material/rtl":"4.0.0-canary.b5c6d66b.0","@material/theme":"4.0.0-canary.b5c6d66b.0","@material/typography":"4.0.0-canary.b5c6d66b.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.b5c6d66b.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-/WXoOwDhGPMwL6xUNEeRkHMGi/wutyRXhGGJBNt8141KGIK+RRxmBzqcqrvZ1Wlf1P5GKcxPzF2LxyRLcwGg5g==","shasum":"f1635b45dcca6e502817eafe3f443a74f61da4b1","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.b5c6d66b.0.tgz","fileCount":30,"unpackedSize":174209,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH1dCRA9TVsSAnZWagAACJIQAJcOEjjovLCMTapE1MBg\n/55xXa95aISqNMoRsx22wIL+/4TjeP0l4V/FRxXbLP3T+cJUNLO/DH3IcL5t\ndHd0VCTFI/fCjrhGbyMAWFflyIOJ2N3TUUKamXqPiAnx3ERnlwY4ADmPNNwV\nYSdE9cDA4ADeXNpblLYlx7A5YdcddKGRyl+9V0l65Slzvk4zQCZoGkl7r85J\nXMylpmsJCwUMfjmDuHda7k8VsgWTlZa+kjcJZ1WFewG2ITRkoedcYCkQycIc\n5PNhwop3NJeVsxNX2W3lQaCZFEdENBPKrmYuTbBDj4su5CbQKFEhzeAZ75bt\nYT5WdLYVmoIM0gjkYtqCj6kEVSgUlultop5X1Rf/HSwUbspHyhN0C0drUW8O\nZ7fjeDIxMJgAeJWqeMsg8e10/7uJc/pZJCuwIH06llT4awS29n+taUdD1WmS\n5sw6KKltau1zvDcZmnw3wZchMy3wyPP+ZBhx0wnAZSOJ8ZVdS+zFXJyUlumZ\nXXsvY8yiKHpvHK4WJTUfMLncc9M+sbOqNkDJBU2wpA6wFTehdE10EL8uiL+W\nSpiJQj6gXWXngQlPJzclQYsIntQ0FRcJz7+X8z8y2fEQcBiJylxr0E37NI3h\nT+d22PpwJajT+YJ2PTcUEE9OPlX0QnOZ5I7vqJUi9D4grgb3W53Ycxy4xsdl\nnrn7\r\n=s1l7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIIgBYCABb/j9VLS+Bt4yvbj4A31IImQGdbkRFKRO6QgIgBiQNt+Mk/zlBae23BsNqwWFxrkLGMLqpL8PkBMSbfZA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.b5c6d66b.0_1572371804651_0.6553810229852712"},"_hasShrinkwrap":false},"4.0.0-canary.cdf858ea.0":{"name":"@material/grid-list","version":"4.0.0-canary.cdf858ea.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0","@material/rtl":"4.0.0-canary.cdf858ea.0","@material/theme":"4.0.0-canary.cdf858ea.0","@material/typography":"4.0.0-canary.cdf858ea.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.cdf858ea.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-lsdWC+0uuUfbYP2K7iIXYQIbAmtC71OCsiOXRh6L1iAGpC+BXDNe2ZRszqYWBwNi1IlRMsziob/9PThX1HQ5ng==","shasum":"b40803c0cd6adc037426e815913540a074361b7d","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.cdf858ea.0.tgz","fileCount":30,"unpackedSize":174032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHJgCRA9TVsSAnZWagAA1RsP/izByeyzvkHFtTB8VnQ1\nOppXUrUm8Prhy4QhGvthlBdUZeWMq9UTkpDWasUI24K5DOcHxI5c5o8gbCx5\nM9Iw/teCCHD623iwBpqvClYIqLFcVWXpeuX9GB6TRSHTTIWb0vQJe7gezhrY\nUxos2FUqwShF87UA+k2pMwJ+7wQ7r5hmFjr7BIIZHkyHn7aaCQiWjpfDDMl6\nzjCjEjwsYukw4T6pL3UAT1LeQ2oeo0EtDFTiIyaRX9cOIb9o81kVKUeuwmGn\nOLSThBaHXV8VYAg4VRymz9egApknwf9YBmcb+hXigS+0nbPKnsLBafLJp8zN\nsmR0tGzVXWiQWsrpEK+sj4y/XVO98yTYQFbKmey0HS62lxVCCniNoNFXAums\nxaTOug2lL4eDX6wZTr8/Tj5xPu7G5fruRLn+fXIDTgyRSFmMT2aX2F+eeNbj\ns6sytT1giTC/bVjh6SN4Uc/Rurc+Y99Yg8YKGVFiY3Q8b46YdQ/lfX90T1e/\nDaXdI/yleEjlI698xHwknHejL5C0Y0DnQRmHl2nvY6nco5thBKmABHx8ezCK\na9AeV8gQZTI9ZPD5HMoRxsvGPyzy3tyfbD8bRv2VgyJRyZ6Y4RNMBkPrtPIe\n2o0eG71nT7pBAd77oiV/orTYZe0U2BC9Zq/CNK3YSdHnrXWHVbHtzVnS9W5U\npf9i\r\n=5Mu4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC2y914ioGFeWCvG/VtjMfdg4vYDvp/DIis7dKmspSoSAIhAMjbTiwiRTOsvXwUSPGfrnyUiCF49Q9dk5q3mXSLBkyJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.cdf858ea.0_1572631135761_0.07561822032337173"},"_hasShrinkwrap":false},"4.0.0-canary.719b57e1.0":{"name":"@material/grid-list","version":"4.0.0-canary.719b57e1.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0","@material/rtl":"4.0.0-canary.719b57e1.0","@material/theme":"4.0.0-canary.719b57e1.0","@material/typography":"4.0.0-canary.719b57e1.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.719b57e1.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-vPBXLGv7vG6dHZBi1+LPL2t/41V9K9uqZfxAjZYyVtl5qt9PySfBTV9naKcsaB47k8wRqOC08pve/yn8OtFysQ==","shasum":"99ad565dac7e870912e94ec34d8179cc1c913a21","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.719b57e1.0.tgz","fileCount":30,"unpackedSize":174225,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI8hCRA9TVsSAnZWagAA05AP/22UU/HxZGyLolTDa6cJ\n2EEwhxpHkfWqPLKktHoRmP8y/WClcTUCd+cwYrWTFW/gaZzyyArUSd7xDkXs\nEKoaRWp7BWove43b/fEJc23hZMVURuc0cbUlC6Mz6hfcWb1ONtHNRB+Kyhyb\nOyNhtV4SoROZddnv+y5LFe+u7N7s02uNmUeoZapVl2iWBpzNfx56WSvtWFWB\nXXlB3o9pC0n0oVB/RuVtvVVLowrGje6o37hGfInEVbM4idacq6QhRZpLy2vm\nMZApnh0rQZRRaioUrfwrA3//mktnQ0cPqgtPQYXj/Q66Xhzw4eaSML4mZDHd\nq59anZ06q4s+BKarYCT9CfBPgbRGDOFcgxzQvl4upJHQ/I0PPr5j/uCQYOn1\nSP7zjHjoOG3BZm7Q/jghzmyIUCaypNYIl0aeQRLDsX9JScPzYWxjtGUjYAsD\nJTLsRu5sSBdQ0+eIDRhGIIGuOO2KTlurPvaeRha41gAcsDK4bR5MJPytvNXp\naoaUSU69Djn3yeDmhcemg10lR8NSEgkKZhyaIRpQH5x7mERxEG8IH045JGuW\nw9gnw0NQlWTagT9HihYrc8/bfDNpa6dFT721+IRgZxFmHw2+J+qozdAONqD3\n+26DggOnuSi7LnqkHOPe01RbzbeE9rAWoYYxO63KxAq2YAn9pwRMEZkC5PLf\nraAg\r\n=8Jdr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEq5iLFwyuw0X1meCQDUFrxpJaVET3fC7M5I5mGYOFIKAiEAj0TcuXT1gYUvHNAJjRGl2kXiHXaucR/SpwCvXwbdlgo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.719b57e1.0_1572638496718_0.9394288084093532"},"_hasShrinkwrap":false},"4.0.0-canary.97cbbdc2.0":{"name":"@material/grid-list","version":"4.0.0-canary.97cbbdc2.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0","@material/rtl":"4.0.0-canary.97cbbdc2.0","@material/theme":"4.0.0-canary.97cbbdc2.0","@material/typography":"4.0.0-canary.97cbbdc2.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.97cbbdc2.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-yH09rSv3xVejFNhQqd9OGJUNWVkfbEYBfI7TSk/xRaqYnkn+UVHyNDXAN74Suty+wiMuS7zGlujnkzuyGX698g==","shasum":"a94d9f0f5a0f730be7e8b8b111ad44a1f5643290","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.97cbbdc2.0.tgz","fileCount":30,"unpackedSize":174238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJWZCRA9TVsSAnZWagAA05MP/jHuyAcM6qWnDllgpWTy\nOJBk7ED+uMDDjWECIVkjIaNmhWXXJgEOM0tRVtYG51+kmMANVP4BcT+k9TKz\nWecOgjXs+4K8knQKglW7Gyg5x12i62+XfUIpnOJz4ZsUWjjrEi9VqE++CwoD\nVd0O8ypwVineuZ/N3lIaGTVi5stkhSV5QOCr9T4t4NuhubMjIaTKerVfJWyb\nyigAA/Z3Rx3uCeu5vu4dmkAY9/nLSSYt+Ntv5SEwi4oMBiMo7bniny+HC6Lf\n0dOjEg2Hkou0HJeFqwLvN/L8dlLNVBmGQ2maCukglXKnWoQn5IKaHvCdZ+aI\nmeHLWp/Icd8QQvK6ZtpFzdPbzB0HZ5ogOxzaNpiOZrb9JO3DX7IEJuZm5CgG\n5h5ZGesCr+wDK7kcwx8a/EVuA7xLTYp0fNQ8/ZyPlWKN4f8EdJQd13lGWulG\nKiRe6AoxgcD7i6iHW6ZxCyCTuaow8wUn4Lf2L8F9Y2l467aqaR9SFIdnRHcP\nxZ8uy2P9pr+6laqfoydRxXPb/HB1gyTQ2ENB/s20ZYPZq7HCAReBMjGCk2Ah\nBEtaPUOb12/Pacb+TkEeB+X21ku6s0+WUmdvFCDbi4xEYQmqnD5lZRXSp9kF\n/YBao0PROwEhfFIGN2bAU5Mvs3399TXqMahhlKSsToXa2tD5SGqE23fVsDV5\nV+Uy\r\n=KWf4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIA1HkHcuRa7SLkwWT6EwyXu2+Kjm7uD4Muh2Fweqgw/3AiBjncCmdJQpJ7TT9kcLuvuNbSkOJgf0JDqxcQtHGl8qdQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.97cbbdc2.0_1572640153017_0.3040246745583235"},"_hasShrinkwrap":false},"4.0.0-canary.8e36b3b7.0":{"name":"@material/grid-list","version":"4.0.0-canary.8e36b3b7.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0","@material/rtl":"4.0.0-canary.8e36b3b7.0","@material/theme":"4.0.0-canary.8e36b3b7.0","@material/typography":"4.0.0-canary.8e36b3b7.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"62f51968b94685823af7942f779c63658f2b0350","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.8e36b3b7.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-cjIyVVGBrBoOg8QfCzXByEY9g9bwUmYCIqT/uta5DZisdEuGxc53wKhtxolcl/Mq+OAXah6kKdyC+axfhoBo6Q==","shasum":"547e6c443b066ae65d7e37de40259d30e7a879a3","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.8e36b3b7.0.tgz","fileCount":30,"unpackedSize":174032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ0fCRA9TVsSAnZWagAAS1kP/iLCaRjehJKVePL9CR6c\nqTM5mI4v6pUgIYp5FIL9lXj3UvVK0jb5YhnPd6C4PUpIw6ue9kf9Cjy+Rdms\nTVw/qDkYxS8FbCQAUlF2whd4vf4KkSnF2cDJemEy+RrZ05OyvvNEDxdVAZmR\n8WMggqQcb37q/G50hviooHcgSluZgp2gwX4TQ9PrrobuEkhgf9IskF1g0xea\nQSgiTdU2CAQCuT5DqAwPVynohjJDD3sf+08Eom/kdxUiDAKNYvBK/XrjLD9z\nq0mQpngHvFDbrBCu+APzk9N5v3fw9nRx078ptgresHSAbneCg8m90UE/hQWN\nQTh1XtwFciyapVZ39BF86WScK6ODyld0omHkiSFSKtNWb+eGlDXSWiEJYp0K\ns3U9VZ55XNFTsn5X/9BLCfCAEC3CxwtndtMZoHeH0MJb4BZzNsIfQZ04XyHC\nw0vf+D0BVnK8gNwUf+04B6OwEx0xrRKASrED/mOu42eMvrOU4grKF5O5Dvqf\nBHE4hmvo3QUdT0GDCIfzqirgELj05kQhjoyTd2gjQqvnl8x8B7ARvw+ZOTaG\n+G3IVTPJUQiTdGCsPZ0ySQ93L5le45eK/i/udpxMO3R8qvb0uZ/DecpZuUmU\naF0pI2iMdH8zFc/tSqLNZLxCu9E+R5iiiw6LEAThfWS2ruryNgZNqgwalyDd\nBJKC\r\n=qMV1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF9iisRcWDY0DsOvzYnxfca3fVpIlmABVg7bYIEVHcZ+AiBNsue90j/2HhnCJ4uFbzthe0Jpmqvgty9lQec58fUFDA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.8e36b3b7.0_1572642078896_0.403149902917602"},"_hasShrinkwrap":false},"4.0.0-canary.62d3a09b.0":{"name":"@material/grid-list","version":"4.0.0-canary.62d3a09b.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0","@material/rtl":"4.0.0-canary.62d3a09b.0","@material/theme":"4.0.0-canary.62d3a09b.0","@material/typography":"4.0.0-canary.62d3a09b.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0-canary.62d3a09b.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-d9Ifc+WhqNHp3rI0+zXbmwsFSG2wWii6oOFPhYZky1pfNfyfWg5sjEElwNSgU1EWPV09qPJKIUlgzQboyonORw==","shasum":"987ad58de7a6d61f963abb8ea39e66d55b940687","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0-canary.62d3a09b.0.tgz","fileCount":30,"unpackedSize":174032,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ9bCRA9TVsSAnZWagAA4OsP/jlIBeMCcvLJ+k5NKOxo\neEvvPJDopnJIqwHMNdyQBmF7BZknfFC1+0K38czqmtTvhuZc8sf67Sd6Js8F\ndtV5XNTx0lFWZnnRl/0rMxNhJQ+L5797CdR8smkOzRhBrBXXHQqhwDWc4JQq\nis/cuvTBLyd6ip336iz+2NxfZ6y5ZT3zCg69h7mDGUQKM6ff5Le5pMegAvrA\n4o63AfV1Wq096gS968VOoffDX6xaXlSZmt+T/DgXdKkeWrCv5XEL4Yy93odr\nX2s26SrtYVKD4Mkt9y77tG1Twhsq0kvoBcYwSuZI63rhz7sklgtkWf44adbC\nOkYiREIWRq2Zf8JgoKqx+3g3trSgrKck7phVYFcIhKNf8oRqKvqcLez2SS5J\nDIOZUBYiXfvWO5+lalvf1qTjgtYx/dwSRKZ/NELIvrx/R8id8tNhs7Dk4ohO\njYf3NHnkTSVix/ulcaYblwReEgmaLOLmG9ffDMjk6LhV0mylh5GoI5ZwJudZ\n7q98y/SiuBg2+Y+Kk64Hsje380wSzDdV5pPH+TRBnm1UNq8zJXJX05tNczhu\n9oV1bZLYmH+4YpelXn8q8tKeTQarhlKMjiy0HGbUEJLm34HrDxDdR+/J/NgK\nqHYzgOLWNXdT6Yt6zm2Nc87tNAcAUsmh4VDvmXZ12JE+kgCX84qBcewRc6SM\n7dqB\r\n=ylaX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH8QdXVwsf2xixamDjm22N07cPjI8GZCfKcHOZ2UDsG9AiEAr9+EF6vEiofBtJB3zZJUWSFCqUmOMcjQ4Uujn1la9Sw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0-canary.62d3a09b.0_1572642650917_0.5218752899202714"},"_hasShrinkwrap":false},"4.0.0":{"name":"@material/grid-list","version":"4.0.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"^4.0.0","@material/feature-targeting":"^4.0.0","@material/rtl":"^4.0.0","@material/theme":"^4.0.0","@material/typography":"^4.0.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@4.0.0","_nodeVersion":"10.16.3","_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","dist":{"integrity":"sha512-HdkvmBqa8jx7j9+NuWlSawCTGN8Ico2wjWY0tpT+0tiTa3xbh2rdGAMIu4przT5Quyz/a9DDRMSIM+xbLHsUOQ==","shasum":"0436a9eeed8b4414587c077e0c43f8828a54d2a9","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-4.0.0.tgz","fileCount":30,"unpackedSize":180579,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcbgCRA9TVsSAnZWagAAU/EP/2UDjKHuUPJUWfMMjLji\nR+h5HLKk/stfzjkNx4FOVUORDKEr2a0QXaSPdCoSxm9zEwpbWWFJqAKPv/ia\nbCToHXRewjWdq63KX78tJ7KUI9Q6P6kiKoDoK5VNDrP0c2WJsZcSK9hVFlHk\njy8dJBXEgWOB8PMZV18N6sBWEsb5ypasiaD0I787PakDtWyVM3esq1LaqAhK\nJ5hXYhALA0uBGXLa5lCLJvHfxDiy4nt0kTW0y+iO57ixFEB9ZStQlo2FzeP0\n6JC83Rpin3uaDChfv1xWIuSqpstlUH+0z3fx5cFSoecvmLgLnm/d/ru7PTFk\n89nFJvk8zspPB2nrQazs6s4mInDG7XhGpZCDbZGIIc4GJiGVxo0xJOr/r9s6\nPKPBbMWnrTGpPbC3IlkQdfh4arGOrXwtFIXZyeb9LRhoiT9wOGPSfrJNCYrg\nJ5KfaWUX1SyhCBaLe3/ilnzum4dvqkJ77aVkjzUCOEAD1fhVRO1Eg7fiAySU\n9tI7F1bDaYovdFfS20gs8CRJss9gErTycRlaDlCQGuRhusrQybNzqToYqR6B\nFurk5CgcC0p2UtPrdcXMt/OXBv2b34nnISTmIEZdNgv813th7+N3+d6solfX\nrptfRykV0jpxcYVwzFVqhKkSzUCWTKN9mzJGcXHTIZosQO13E8u9+Dh1Ffg2\nt7rF\r\n=viJv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG03jOb17+2lt01OxX8tVc0Dbyt2pgQHfMjqkL23RELLAiEAxrQc6m+IdQrnknlA19O3+93d2IoLP5eo+bVSfQV4pwM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_4.0.0_1572718303617_0.30660100349277286"},"_hasShrinkwrap":false},"5.0.0-canary.b5eb51e94.0":{"name":"@material/grid-list","version":"5.0.0-canary.b5eb51e94.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0","@material/rtl":"5.0.0-canary.b5eb51e94.0","@material/theme":"5.0.0-canary.b5eb51e94.0","@material/typography":"5.0.0-canary.b5eb51e94.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.b5eb51e94.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-mlwo+huc0vKDCosKRKfcWkITeCVoNyXgwIAzl+x8zSdX4pbQmUfZFKk+73Z3wzLPT1/rX1olbN64GIAnl0WiSg==","shasum":"80cc58964c72bcf3caa457a9b6dacd081001e651","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.b5eb51e94.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGOGCRA9TVsSAnZWagAAdX4P/jLEDOtGemS1nX4nL2is\n0t5mc18chqsFJtIWTY/lkcXhRCOPpPz5iGR5WfSqY9Chhl7FsslvZ9eIWynx\nWGUy9P/oZD1YbCya4pwJ9avqVCtP3l40vCnVXPxe1AN8fQtUzH/zypuMn74y\nw2bvGTh2H8Ti/+VP1s8ETrl/fGPneWksxVA9k9paMFH+R1qOpjeHAEOCbhFm\nMW8hAOCd0beTrWTUaGS31MMl2GRnSIqVftG1jrvpO3EHj5hpsvy49rFkL2Lg\ncpi0aD+8Oyejhxr9/mv8UWzzkOfHkXapLkB+1mtP2I9+cI2SGTeN78qWEe6J\nc7I5CFdFCizxVY2PtH/Mvq9CvwGQba5QclVFQMAJND5UUFY9sjpm2UcLskgI\nuH0oT5qpDiQF33b6L9sn6s+clREfc27WfXIsTu6fJHZXh8zNo5FhQPXvb8A4\nEwon2I1KEPi/ZXVUjZNwoxwOM2uvuYLNKdBkhlQhlYCIQgndEIgcRSYWwohv\nW1Hz4s3lPBasIwLYiV7CdU7c2lfTWmsswxJrOV9yjwpxc7DzZRnEgWtMHeUW\nqtBSALPx0MJ8p8lo5mygXGxBrBP9Kb1Rb+/uAus+2KF6iOR+GtUVpF74TA4d\nUmFrKUhtgmAMHrxqRNSjDQIF2f9hQn5wLVpgz7MGwK755YUQVGaOPBdUdAcS\n+vlS\r\n=6UTG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGEVqh1AZASFqzW1q2uxevcYPXoL6y2/PQNdoEKWo05LAiB98Bbf3HEQ0iI/Lt7qk2/uhDQQjQDqpVY2YjIsMeS/zQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.b5eb51e94.0_1573151622052_0.724735849047762"},"_hasShrinkwrap":false},"5.0.0-canary.58500806e.0":{"name":"@material/grid-list","version":"5.0.0-canary.58500806e.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0","@material/rtl":"5.0.0-canary.58500806e.0","@material/theme":"5.0.0-canary.58500806e.0","@material/typography":"5.0.0-canary.58500806e.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.58500806e.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-6MvYH4hUKWiz46u5w+sKjRg4jJtfIDXGGTlM/h/wBvv667i3ewTxZo6M1TtIn3zRhWvGneKk0AxVtvgF8fb28w==","shasum":"37ca9e8cffffaaef066aa171e06241d6701ffd74","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.58500806e.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYtUCRA9TVsSAnZWagAAfKYP/jk3oJMiIwcz153E1Uud\n+su3XU5V6dyhnPQkSykpikgyG18az7JiPLM2KxmPpp0MM+4YuKnqmQAwQhHs\nYRlD3KdBtWmj1l0YkafdH01ofdC0wXZYKQQfPY4eenZdfJaDcU0T9f3NeiUb\nkpV43Z+IMfkAANkkNpvjtyhKsfrfm7E3ytizaadBbLP59C3WuiINYVkKjYE6\ncFL9eG4MqznRn396sSfGVU/t0I/yDVbumChUQ3pnV1rIzXu18nmF2SmFHN6F\nMwNiKF0hSdL/oDMMIxpzYuprIcw7/qIUCnCwcPcCHRrOVqE3RMzA74LXYrTJ\nbfTSAxG4CeZZeQ1lpZRj7/2rH8Zi8jrQG9qOJtWL9Borx5mEhRiw5DiUvt3F\nuVRmvEaQXMM2RIfhtjVmZdhnq+k37CO8rX8GQBW6NUqbGIMRMVWsY4sgcVf/\nHCYwuLiCo9tAj/ww0WikXWLtTo2LVjHUeTbCvCh3ZRcLD6viBphKsEnvHgAu\nYECbJoJ68ewqTMLNELNYlbFaA9UZuB5QjrKRiptbca8XGD5aSfg21Yj6viIg\numuw39GrMkpz7fSI1EOQ3f9c3fYa0X1uCtkYq91HxqEuV+g7OI/wHO664E8N\nokrzS0gCF2J4a2vBQSIu03hxpTLpTfoYDmORGW/kDKd5JRyj6/U2S5e8UBUV\nCK8v\r\n=dGVJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCV+vvLDIW0x4/wCCB5kj0uPqKUAo2aXgRgFkjQ/7efQwIgCMMIhErAldqMxYKA6zsR6UYCSUCOl8zdIkh9bgW3RXM="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.58500806e.0_1573227347633_0.35321593223059344"},"_hasShrinkwrap":false},"5.0.0-canary.66299b646.0":{"name":"@material/grid-list","version":"5.0.0-canary.66299b646.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0","@material/rtl":"5.0.0-canary.66299b646.0","@material/theme":"5.0.0-canary.66299b646.0","@material/typography":"5.0.0-canary.66299b646.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.66299b646.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-gJ+8K01wSDsWcpPVmX6JsZE9LnqKcYdMHS47Ym0SX8uJnr/OET/EhoMxdn6wxsrnef+6i+HyZc7EkpSFT7BdZA==","shasum":"b4412c99d032dc4375c6268073966a9891781ef3","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.66299b646.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdEpCRA9TVsSAnZWagAAOP0P+wRRQv9X9ujZ61L9b2R+\nrvJAtStgq0gTLB2UEtxnPjKVClHFRb2azvINf+eXp89DiHSMOnaz5VZ/sA8w\nYRid/cMX/zWAJ1ROYjSjmBK7MOP9Et0At4N9u3F6ma9p+xvURGUu1gPF9AKm\nBgWqB+kVZRuDG6TeLwCifiqKeb/nmzK00vFNaX94RA2UbWHFvILVs5/miQqv\nLe+l7BdZv/EjKGVwkC/E8XTTk0BAB4GMLUZnOO3sW4pCj/1JnN9eExsI675Q\nTt8nmy3z4d0XhzJkyJtJIIb+Ye43Qz0sEXyO5+m2krbBniAABwtOyBCkzXjU\nJupXxyVnu+VnVFYpltrAk0dil4Hg/DKqrDKilhzZGyUYfGQDtQqJOM2soXss\neN6+z6Vvte1UkmYZ0I+/7TBMGfG+J36Se2Cxd7xISeD5ahROzMWKyQKqJas8\nlEstldz5v/f3gDQ5Fscp4oi4AllTcR/8AjaZz89JQP2KcM9j80N138Fr7TYJ\nnoe7KwSPLth+9C5hI6oP5yB4u4JAZTgUtJwd5ufa0UaYMDmwtl8cHQ00SWGV\nC8bkD3BGhKUs+PlwpYGeQzYExz5eWjI7KdtnF2hwZ3w9n2dtC37zppCgvmzw\n20ieDswG66hewz7PUznmoCYfpJtKvk/07L1u1DxphhgGc4gJfC1BmOwo/f0i\n0b9i\r\n=c1fE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDkx0BaAAZWnXSqK+F5GB7TpYX17JeD2Mn8Mxvu/TWyhwIhAMbvSmrEtDrGo0ZwMJBLVp99dYjPouON7Z4hY5JTIouF"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.66299b646.0_1573245225154_0.48778317306995556"},"_hasShrinkwrap":false},"5.0.0-canary.821871e04.0":{"name":"@material/grid-list","version":"5.0.0-canary.821871e04.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0","@material/rtl":"5.0.0-canary.821871e04.0","@material/theme":"5.0.0-canary.821871e04.0","@material/typography":"5.0.0-canary.821871e04.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.821871e04.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-a6+9dwQIbhkc4zrJmLo5sLWZnBqd0hm33e+0fKDeugi1C2Go7rhmTqNH6k5C3Q2yb7Zyjoh/tFDKoIBSff854w==","shasum":"ede9a0d53ded662ac24ae2839ec2995293488418","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.821871e04.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd3vCRA9TVsSAnZWagAA9psP/AxNQtqW/dfBiqqpYMIL\n930hxVqZOmchl3wGd23c/uwjsj/K5BiQ3T1Z3KJIhPc2ZtlN+TWmzA/hbn06\nDEMmPowYdNBH0575icIEJnbX5XJJuiKbOp14WmVeWK5f3CpD7I8OC91ITFUo\ncydBwKXeVm20Wt9cBNfeoGp8PssDjqu5tlKmpc69vmZHracNWI7nLVucpVnJ\ni4f2caf7K+TdQaCeaRkUW6+fFQf1uA9akmLeXe0O3Fyhksm9dpQgBmXpGA0e\nDMZJ0NuxBWenEmeOsmHT6J0wrM3vABXFUHDN/kKMyfA2MB+7Dm75mlWYJQLC\nZ1mexRIuRjscIS9PGyooEIk8qNTRvnF2RxCyLbT4SIww8uWyOs49VxrDVvNl\nKdZT9W6CFJzhnFJNHErST7PQsdfN8DFs3Eq/dx3XLHSNCKtNrQ0tRpR5608o\nSPx4jWq1b0po97Ht32+xNegcoL3P109KDknXg+8VULmOO324MDTOBp0xG6h0\nVTn0igmEUmFdhlZkbb9M17ycf+zzis2mUDN9hWNKdHCzly9bKYCS+34k0Von\nh9+m1NYzO3QYfQPutB34BueSY5+oPf6OaLSY5FvloaQaI/0iJsUDVIJm4huy\nGzqHGAUCoqfFjLrYg3vfOyIhjIN8Z2NhrKSX6JqPH7gjcMCw//szBxM/F90h\n2e9Z\r\n=bIQm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcgboYvNmKC6NGkSwlQUYIKMjPyqQmB7UksxjrbPhzdQIhAPQjxZc+aXAlC3cgeAbM4X/PGp4+kb1s7iYnQrbTsT3T"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.821871e04.0_1573248494842_0.2956593741002651"},"_hasShrinkwrap":false},"5.0.0-canary.491fddc31.0":{"name":"@material/grid-list","version":"5.0.0-canary.491fddc31.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0","@material/rtl":"5.0.0-canary.491fddc31.0","@material/theme":"5.0.0-canary.491fddc31.0","@material/typography":"5.0.0-canary.491fddc31.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.491fddc31.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-t60k+uwf44aVMXmXakWcsy9pGRPU7TfdLdDhqA0v8Lad1kg4LiO06aiCZL7e2bHEcBi7B2FqGG4axuoPnhs0kg==","shasum":"f2280eea5419c7be8f3a5f905cddf545c00e6ae7","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.491fddc31.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxecUCRA9TVsSAnZWagAAxVQQAIiAWiPq5ndoQch3WdGI\nQqEHPb5fOlGYa+OLIgs37J+N7+vmhmD7jPuwoCkUCxsxuMsBN6tgW2Bo/O7k\nMIqkb4SISJkusRroGf4ury3T2k/2zDGxrDhIIqWl1rTe8gruBoIq7IwDB6Sj\nNBLP2z0yNk/5I3n/nKlFagZpWW97ZtbYo3IBXlqFEtt/1qOdLQDRHgqKojyC\nAvaG2HjALA4AMuSeJ9KxusywtSrZvZ1l4iGxoF2UlWSi2zQwfquKGzikcSFP\nLXa/J99UMoDt/UQDWbSalnPR0r/No0WF9Z449+QstxgT/bfdhbr28MzMvJJT\ne2oCM6ebbHeO8Q0Ie4WGkFQra2PDburzLfXRej3lpnkt86sIyiAyRxoky5U3\nuBxz851iBXCy34UMntRurdRPkEQTmoTbeYw4K0PTbVzJ4iit4A1cGOksOvGC\n1iR032oPYDDAKrpBCyNoFXsisE7XNXffUQxKUEt4J+IEDkLO7loe9Le6T0AW\nxkQYoIXYCJ+EoxdoeQHvOQgwChmQK/bvCkNAAk4CIa3RloxhfQ7ZFUYVOSFF\nmeBbIAABnuM+e1ion8CFZRh+nYuK++aLz5eks38w/hbMEimOx9AWpXQ0XAA3\npsx/7S/RDOXnMu+m1eRb1HoD8nfI3iZAvvyhb65E3uwAxn7EHy+qzX8pOk2y\n1Z5z\r\n=gQ68\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFURVC7oNFfNAcSFQYvEh3zHgy9T3oGsdMvs8r161Uw3AiAgE5ACd3P7FTH9zm5ID0RR8tvG1/aTf/l9kwD97mRaXQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.491fddc31.0_1573250835972_0.30073653201071315"},"_hasShrinkwrap":false},"5.0.0-canary.b0cecf145.0":{"name":"@material/grid-list","version":"5.0.0-canary.b0cecf145.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0","@material/rtl":"5.0.0-canary.b0cecf145.0","@material/theme":"5.0.0-canary.b0cecf145.0","@material/typography":"5.0.0-canary.b0cecf145.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.b0cecf145.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-vY0oJSNj5Mx3loeWDqNDsIhZMaBtIRaQrTrAugQOVB4Uqjwb/GbxAgB9zXr7zdsqCWowsTfB2cBCDXdtL0r7rA==","shasum":"31b0d61b2e3d4ca0248e48372d0adcf07c7cb427","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.b0cecf145.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwiUCRA9TVsSAnZWagAA8TMQAIJOmUaORwC8rHZTNawG\nSMqwjLyRLUm4UpVSkV7w1O+Gg88swUIey9BibX12oGYDQVgO+CwM6phOVsyC\neVY+Vy6Zg5BBnqZSB5ihz2NDmV1SczvCavjLtLomZ4zCFhlF018JbzVUEcyM\nzZrrJEUVcgZDokVN4t222wXCAzyoO7q+TqxoKHv1L5uMbBn28JqZpImKTRSM\nvgIX+USpp2i0Fz9HAEOtR3KzRHPDat6lZWDemQDckfYfiIBoU4oxS8krQ0nx\npOMKIHEvLhvlyvbXvcESsN7QWVFLcEaaimxApkGslIiUJzjdLuX18rC31A46\naXxF7exCvKFYtnLqt2Yats4ldrKBFbvxR0rVpox9bVE1wmiJNodT5bBrfGCx\n3lc5k3c5zuVcPlnk1Y79ZeljlFn8SzgqZnsb+b6JR+3b46DFtbNyzFAwkOCA\nQF8RyCXPGYfnJVinPAjk7ux4cB4Xzc3YNBuOH94yJju0in9FIeiomvOx63ny\niGTpM48YqG8nAM6MLiiUCmKCLuf2tUkTtoiGtX24+oL1SJ5mBdqXJUdFDfDZ\nH7M9B1PytUn1PW6Zba2AtQi/88WMjbjvWJw+ODtDBCZgMk6lRsH2zzqIftp9\ntqMtQ6O57iyTY5NSvLj3QmAf4aacWpFr1HwcidX2wlJRYJbHF7C9xJlcVNiY\nk85K\r\n=kePL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGDZGymdJzkM9zKu1Ewt78vPDCNEVyxaVBQid0YwCBGtAiBrzwJEo9UyOWi5yPRtFn9K2/ytldwflHnMco3+mnmrqA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.b0cecf145.0_1573324947718_0.9368764711430921"},"_hasShrinkwrap":false},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/grid-list","version":"5.0.0-canary.afe0dd1bc.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0","@material/rtl":"5.0.0-canary.afe0dd1bc.0","@material/theme":"5.0.0-canary.afe0dd1bc.0","@material/typography":"5.0.0-canary.afe0dd1bc.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.afe0dd1bc.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-ZWcZhYZbZ47iM+bRBx3qheQidMhJ5frEhtadWES5kuG6CcPAt/OLO3wbDnReUKFIFUBJHcRFV+K2SgBSCQ5vSQ==","shasum":"c3574b4fed1784423fa409a846b06a5e8484a71f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYBICRA9TVsSAnZWagAAS8YP/1BLifsDsW1PHfvVa8hB\nxDH+WVCak+dFaYXGJruILHWU1/Bo5cNzKAxFMr2Zpd5LH8yCF5oBLFwfDYMA\nEJb9hT1Zzv/1BYwKSXD3SzFkWS0R9p/9Osy3q7xBdBaAR1r/CqmeRs1G62Z/\neTPN5XEo7+QyZAJR2+3NAC/W5xsbGF9QkafPbZh/hcX25Gjx3MgiS17ld4Q7\ndAhDixKI7TEyHEh4KVOt7oKyZAPcCwQOXbzVk9hJKxSKvfDszi7hxzd0DI/U\ncup9UDcWe8Z5qhK54IruacXHPxACAP7XPfUwPcWD1OQMLkkK64YYPMaxSGro\nAzr3R7+4VuyMNgdK4pJq/D7AiOSHFE2DDou+5klVtohlgdC6fgpwa0VymhbK\n0JUqTuNPG75QT6CRHX6AfTsRgYtKAY1/AOqe9FzntGSJpZXHTZhgvSDbGc0m\nKnwuf2N2GNUmFlTLTaPYjzhXXhC17HT92b9ZsY5EcVeNgisIK4rAOeYjk7fh\nF7xOST084svJAA5ki2x8xUSh5m/nRmxv+Bk2GoOu2VsVN6bzjoy2CclcXTEi\nySe4xlVEnuKeK285ViUKHSZSRapP/7N+Hl7xZemw53eH77nHiAyxce9svVE6\nJm8o9bhzvzAQayRSHEqTzQnxGTJoTZEeK4wFH7sAz03rhHBMkC0n5LFCiAxk\ndlcp\r\n=uJZK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC9mhOuLQTM0DUIJ1TblPfeX9ZlMSDPD5bLBDEazW53TAiEA7kxQTc4/W8W9SpSMJRYEyTftE78VsDLir184rJJPCA8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.afe0dd1bc.0_1573486663981_0.07227307914438641"},"_hasShrinkwrap":false},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/grid-list","version":"5.0.0-canary.b4cfdc40b.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0","@material/rtl":"5.0.0-canary.b4cfdc40b.0","@material/theme":"5.0.0-canary.b4cfdc40b.0","@material/typography":"5.0.0-canary.b4cfdc40b.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.b4cfdc40b.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-+wZIOPsm0H6N8+ssKT9m3uLWB3cBItpPkjXcGGeYQLIIABDIMYWL35kUTzGTuNd5Ziaf7B86AYFkLI9cBlR8nQ==","shasum":"403206bfbe05460f5ccc008f7700b169b1a12827","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXmwCRA9TVsSAnZWagAAyo0P/RcnQ5m+2Yo5R7XHruyi\nnsoFr/wWup/P4anyIzSmGfrJrhNNSrIDY1qOxG5pS2JKnXodXuRCE1vU+Gvt\nXr0KSndQWvBdtCjLzzB8SObiOO2WwpniTOHQoffC2QE+2MjFKpktiaJ23D1Q\ncKs9lVcueh1nHP2HPXhYZ5C3kNVVHqnsdONQ1Fbnndmkb43rSe/9TZk0qImL\n49lc7MsYAhsedNPKtSFulAZy9+XWMMXxzitIJoyJdo9Ht96NlaSgl6Ro0d4r\nhIxZ4M+yTRsdtV7lWI5n+jKHR2J8E09rq53VAdrszXhnop+b5NmRn941iaPl\nJtk6NTBpWetvoOPffnzic9fnydQbrtKpdo1xg05ko+v1uOZLdw5m9h6NUBsL\n9AiYMSmc2JXJ5RvoYe2LSfrlhYBsQ8E2JUQrMtjWSNMNKPgt4SxXy7goLeAm\nV+gEGbFtLfmEacZ7OPNA006GtjPbVVPJQ+6grV0RyI8Jd5G+56emrwxhiNlM\naicb8rNO2vbEqLHd/opy+BhbLmswokWO6dKpKRfY+mEV8UMkeFdo3cCgfHPh\nfMAb6w9ytoHKnnxj0EGnddKkdxhk5ojAI6hrbCE5YJY6q9GvV+xrH3pwcbk6\ng+QZsdJcRTgnDLvwHtMVv9fTDNVy+Nyt4DHrn3TPBup+2ZdaYPVhzx0MjSJz\nnRNk\r\n=OjtA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBvUfd7fuixGBDBKF8DXGPVETL+vModr/HFSzjnf80MvAiEAqClMUJM0p4OOWa8PYXoUAfVFmxcQd/nnx1kuIHqdXa0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.b4cfdc40b.0_1573747119865_0.3890922601654998"},"_hasShrinkwrap":false},"5.0.0-canary.525989b5d.0":{"name":"@material/grid-list","version":"5.0.0-canary.525989b5d.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0","@material/rtl":"5.0.0-canary.525989b5d.0","@material/theme":"5.0.0-canary.525989b5d.0","@material/typography":"5.0.0-canary.525989b5d.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.525989b5d.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-HEvB5sATlqmLzOKKD0zc+nwjDZfBQszyibkNZ1d2ax5f9Nh47jG8Ng2cz3Fcs/rdNsikjG/FYUr4jFL+95cSUA==","shasum":"48379a8e79c1a85f95cb34c92b5535492740d319","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.525989b5d.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzeOrCRA9TVsSAnZWagAAwfQQAJpEhP67KNUfoWsi5lJc\nzeKY2YYrzu4IzsO582boA87ATCDRSAbHxqMyepwCqJgjwu4o1whljkgYQyGP\nYKiZX2fsOpl9jp3LgjFmpZTxwv14CdYb01e5K0ZgBNYnlsNApkn9odvvYtq4\nlkN0z1BUTm1UEkeSGOtiKSXtGayB8bTukEKc+sLIl9QpPCV5ixLjsr6r4qFQ\nFQSKY2jMPFM5mZ32D1Iyp9+YsPc8WtNuLi4FW6f0kDNjDFD11oOACtD9uL/N\ntJy8oRwvZOWUM5WdY5lF8guG2McvOPwkJVZhREidwJJlA/qbF63+hB1f/Tak\nCt9aB3F7MDVklJEoIPWLX7rKPW8Y6EisLgt/OekWn5cTLYpO283ssJhj/0RK\nolwFOFGtCcgNgvNR778oKObUHDEWeacLZ76b/uzd0RDcRWBXa1P99lCVhi+v\nxIIpvyyk1aouE5pm+jiuiNMvOSm5ovI074t8xy2L3DY0+dNqpnILCasnnXIV\nYKerxYKkujBA45vAkAN754TxfjHfg/uJ0bD+jJTheIQvl+sv7tqH8+/1H+Ys\nzxgLR0rsfS/MTStyjdvkz5G2V9f296Z2zg9Clcv08yZ16dDvngq+Ge5aTFhy\nMj9ou4mQJs+9eaxY0v3fQADZ+cnBgR7qe9LmICiv1DFVd1ik/kYE5q131pZu\nXKQX\r\n=bH5e\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA6N14w6ldOffM7TBgY/Oq5HNBiy34jN9WCmOOc4oyWPAiEAgVfc41CBA/mMssKrTBgR37j2vt/2GK4kUMjkHsovCV0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.525989b5d.0_1573774250648_0.8751522019782481"},"_hasShrinkwrap":false},"5.0.0-canary.7084b403a.0":{"name":"@material/grid-list","version":"5.0.0-canary.7084b403a.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0","@material/rtl":"5.0.0-canary.7084b403a.0","@material/theme":"5.0.0-canary.7084b403a.0","@material/typography":"5.0.0-canary.7084b403a.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"6a82bd7664073498cf25876314019948f3295c87","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.7084b403a.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-BrCFLECJ4bJcY8B5nSeyus7huJ4bsU3FuiSIcdVhXYs34YreNqaVKZ6XsyK2+YbCMI3MEz2vDcNz2B4DH7UyfQ==","shasum":"77e22953f7cc528357df2b91640322005d2f0a2d","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.7084b403a.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfn2CRA9TVsSAnZWagAAvPgP+QDeeTkmOP9QqU1DBsWA\niMKU50RZSXOc/HGPaks9N0G5o6GEv78MScPUOOxLliXF1r7+cZp4DaQcGvgn\ne4/Z8C3WWuqlBB7BA+J0RiSU0orPYoTSsUXCiuDIYq8OzjgpA7H79SPchhBk\nfpfIMyOV05NA6HzVFzXR4wJd7ouwnBqQePLGScZj2lDxk07/gM2e6/vSjjUX\nhmM77UISyHP+OkK0JiqHyAxxLe74FCcjyZJwmJ8mfOP/XFi++n7UhYQ0lK1t\nTBSGR7JqTK0DDAiC2P5uuK73mh1lisBObUw0w6dQJk0dnbDkI3/bFr4t1MoL\nRKoShjdSqPrjP2GEsYNL7GUGB48XI/eJQIx5IrJwDH1it0bLIOmaS5y/v8sN\nr+sBMHsiYtKKTU81gun28OjSbhxoh1MlFeEovMsxVS1u1Fy9am0YgxRVZBRv\n2cLCGHZjpgT8CZSTX2GJs0/XX0OeyevfsNMyIDn8mQ5MScxfev/lWfRUapiF\nO09Lz7+BElCOqHXtGub8h6uCfUcIfpuZE3Y2PwmVKaowbeOuOsie17EVux9M\ncA0cQ+rmIWgcov6do/1ByNqKJ8dY/b15JaNqHF5axeKhPgHdGro4iFMqRTC2\nB5rRKHoHD7BQmApKLHDklU10QBhvVpZiY5mUCTe11zJ364DfpHFyuNnPrxYf\nbNcc\r\n=woEt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIF7gByE4VmYkItG6g1q21BrLfPo9vRtgYTYb5tIkqwIUAiAQ//zxcEs08scXblMLZPjsG69y6LBdBjIHI5ZRqv7TNw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.7084b403a.0_1573779957627_0.8508529783489873"},"_hasShrinkwrap":false},"5.0.0-canary.3cbee6dac.0":{"name":"@material/grid-list","version":"5.0.0-canary.3cbee6dac.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0","@material/rtl":"5.0.0-canary.3cbee6dac.0","@material/theme":"5.0.0-canary.3cbee6dac.0","@material/typography":"5.0.0-canary.3cbee6dac.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.3cbee6dac.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-DAyaEFdsjCVZlM58LCW1y263k1Hufi7+HVlyttqr+NCRwhyah8DYDBEp3CZqPrYBxO9u6piPoBJoZiNg0zMiyw==","shasum":"48017be403e1231e06b46ab829a8d23c2a0a82bb","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.3cbee6dac.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyeVCRA9TVsSAnZWagAAx88P/RWcbYJfPzEDwzuAyot0\nnyT7lvl2gYQXsTbL6xF6sGEalE6+pZFQlR99sHl7cpL07gW5OAB+guv5GdiX\n1k83wNB/UNpJgSUX635GSBXLIcqFjuE+jYqmHJWhdtz/LfoDgM2cA8fymHAX\nb7yVrO2g281j+LOA4d4IjHTr3xD9n45+63TS/Mk37/OgDsHIhr/3CUcHoz61\nPOI5Z+Ykdu6hIMhqVyPMUML1hgn+N5DDnW8jcF7Mhf0NAJMbvlv1KMb6uOsE\njIEnMy7Dm2W8Dhbh9zrBDClofLCCDnytpV5JT/wgVZgRJx/SNE1h9ffmIy+c\nlXTLiUZ4E1jb/BzXsmOYTCN4Z2gavdkqLPkFiTthv/wqOhCkPTiNzw+Mxol/\n4tDNVERVATJErxOflBBJKg0vWtCh2+H32Rg8FMaQZtsbqGll+9Arl/VC0J79\nRwwHONp98hWGUSodUiWO/AlJYV6oEJNlG3TqhGifew5QR3Y5TI0dXbzsYSW0\nfVxNFnDsw0vFMr0IrTIMG3rIrxvK3n82BpnI06QV28qg7mZcvZzhZ+17NNkP\nV8dRV3E7R9UmNYJ2mp+EyOJSdXvJLCMivTvaaY+kTRMjT261/0pcaTWyXFvP\nkpvoglC6sEtZCI6dmsh0bFwjSS5QJEJLcoug1dZR17aGsvRxZTcpUlZoePtJ\n0acS\r\n=7UfL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC5JcHrqA3c4zIAbeimsJ5ssIct1aj7XTj8l3xw2sJzLwIhAL1S6ATmTgNr68wV1bwF3JpJ1BmLgjdsK/kRJSqnLyeN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.3cbee6dac.0_1573857173256_0.16696513214556874"},"_hasShrinkwrap":false},"5.0.0-canary.591a6ad44.0":{"name":"@material/grid-list","version":"5.0.0-canary.591a6ad44.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0","@material/rtl":"5.0.0-canary.591a6ad44.0","@material/theme":"5.0.0-canary.591a6ad44.0","@material/typography":"5.0.0-canary.591a6ad44.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.591a6ad44.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-YZ4werim9V4z/BAKmgYvmIcDq/I0I49SbwsIGOmaVfWGrYi4wWg0k/j+ojiUzdN/KNwXkOA2pB6dHS8SJzV8Uw==","shasum":"6c6d60dd97795a009efd3b8bc39046f07105ad59","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.591a6ad44.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3UCRA9TVsSAnZWagAAnV8P/0xWB+VAmOwr5ZR6CRKg\nlFkMTY0yOaaKKHdgvshHX8SPToORlpnqgYa7mGRH0z/+szWYs7Y1TeaWwAMJ\nF4kzjBOZ/env7oSaZNQ//4utlgtk4yMFpW3TUHfJGM9CUTuwR8p6L2U9RvAF\nX3tCDVVMTDqS9ZcmuxgtlfIUToxGzOomTR5ONSkcWHnsKK5u53j/uJ45s+Qh\nTBmn4KZMfAV3SKXZg3OuZTemDY43J47OIze+BQVpQgg1HfygQDWAUOXapT+w\nWqzrGH9N1826ud9l/qb+WSUIRn+Qk5bs3W1IxQaggtLi3syoocgRbJVtfMRu\nGryeLSjnoEZH6GEdWeHrh1mmJYmfFUHTUTOIBHTOH19NpOn9Fkis6ZFC6ntb\nnzUl3HdLi+A5n2kV0MvcCtsEthPeFQ+wTz1EuAK1kKbqUBnqlHnzX9WzKea2\nh1jgW0ToIRpUAH0sspv/0MOIXyvGm1zAfZjqMmrfHsjSSTZp/isyKpVri2k0\nCCD9Npg2MySUzIMTIMz/ldF7FHsWsUj7NZtKGIYRmzwIybSBmWSRVbAYnIx0\nDdq7rsfO6zV4SjN6ZGwLIgnlVCivjPGL2KzCzEoIqB/SSAl9ugbzOdpiURjD\nqmREauQ4rbPsIOT5MYEpZnjPHF3Wdqpl3HbVCHNQ2JTz0YqlB7OlmaFe9GXg\ncGC7\r\n=sKJK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVoOayGZRJMTI3LCGwvjlo1WCuA/aQuhIIb1g4JAJVLAIhAL9kCheJwQuj0AFSEaBxShbdRA+A1qOy6SDEOjS0sQYq"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.591a6ad44.0_1574120916257_0.8814532447909345"},"_hasShrinkwrap":false},"5.0.0-canary.5729943ba.0":{"name":"@material/grid-list","version":"5.0.0-canary.5729943ba.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0","@material/rtl":"5.0.0-canary.5729943ba.0","@material/theme":"5.0.0-canary.5729943ba.0","@material/typography":"5.0.0-canary.5729943ba.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.5729943ba.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-AbHFhABnksDeDF2TtDgrdbEzBaTOwjGvd+nOQEUdQS0GJfM3EM6D11hz9+ULXyjY1COEFDi+15K0pHOxelTRIQ==","shasum":"953059dd6d97a1618129125a57b314be0d01a754","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.5729943ba.0.tgz","fileCount":30,"unpackedSize":174148,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1MzgCRA9TVsSAnZWagAAbxgP/iC3ovGmCIqzAbjN/JiM\nRwPzhe6fbhrfwsD5JhCPlcODXf+22QppHi+yPz4AsyEXOiI/d1TqBhgCs93A\nlgx0jfP3vqbUekI304Pd8iIIpQUtuChwGIem1Dloak/9b0cUQDorsXaXuL7e\ntgdpx6pTKxkMklkwvVIiABp3aHzXNaOhEaS8WZhGiUm6sc51e2euD9CsCEQP\nW4+zGZ4txcVEDxeYneGxuM3Q/OItojcg8spspGUUcZxkcdCHLrqpWOXsUaaf\nN/d5ttnWIjoLqec5qLWSAtT3cnxPWejzn4RK77pDNAiK7e+wH+XNPIeNel1I\npGin4xSmjMqrantbXqiRJMCuslSr8jTzQo5piRlf7vfXOGPIlqpXfWPrq7AS\naiVRiNpMsEubFs/MgZi0KOn4JH4u+8Qi4M8wgoqMvPd2+BrV9G1BbeQHaJcv\n0ADx5KxICRIb4sdE+lOZxeG5WYrGpWkF/FyNVh3ym/TLMAbA1u9Xif2NYzoC\nTe7AdnEIwnwqI8pYYxM+5kLf5f5B7VzoyfNuytcgGl5hy9IqQaRs2rNaWWRI\nuJf2z31qOitvLQjTGgkSwHVLMITxYJPHQWcqzEpBNRm6Wk9NcU3njT9s5w0l\nxfB+2ZbOmVcRxPGjj0GKZrOG1o1hwllbHgkG0dBqUuqETgSFMoMqb1URb2pn\nHpyH\r\n=r5qq\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHLxrjKS5r1oDlGASXNbE3GzsVpm93O14/UJQF/3nHWeAiBsjpzWREe0hlIwSFzkrKHRE77CsLwr+knGUKlsM84+fg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.5729943ba.0_1574227167802_0.4330337510478115"},"_hasShrinkwrap":false},"5.0.0-canary.e89750dc7.0":{"name":"@material/grid-list","version":"5.0.0-canary.e89750dc7.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0","@material/rtl":"5.0.0-canary.e89750dc7.0","@material/theme":"5.0.0-canary.e89750dc7.0","@material/typography":"5.0.0-canary.e89750dc7.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.e89750dc7.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-YNq/Jg7brQBs1SPHCfmdZ1cMzKVtGUCIfCErlnzPifo1s/MLfu34G4e47+8Eo7nzqqElJwK40sova80SCdlymA==","shasum":"23825d1fef66465d198083b62fcd3d09fa541134","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.e89750dc7.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3drxCRA9TVsSAnZWagAA9mEP/2hqD/YkZhTW9QSzT1/W\nKSZGBI9p0foXv9Pxb7l5lSFmIzQojIR5RQ2KpSc2joXQugSPtXEyNcE01x3X\n9Ln72n6LOhlX3uRtw/5FTCpM2HSFqBn8siqiu6RWnz2yec+b5Qq5/BDWP4xy\n8Bdn0ec+o/Ezb3/VMytex+F24d6gF2zJRjW51WN95L15qZ9LYsE5csPq0K7+\nkO1SIgl59IXkYn5CuhrBCMv2QI7mWS3qTKF42N8j/EV4mwoANVy61xrJ9sc9\neVihNQSbxdSyOeMTMeH4uvNdz1hkLdawtJAPqZ5j8XvsgKWiXE7DaZ4iktqE\nCpk0UR8KDm6PJQmtWaqJ1XDCMEb6/3QTUcIznGghtOugxcRo2oS+sL2LLf49\nYMlJ0ZokI9dHVd2Yk5LjbpOnv+XoMMj5V9GOW5u7BKHSZLbMSQK2HFseu8ad\nsbJy3d6vN9WnEPlH/nn0YZ5R1ViIdCVLHlsu1IAdpOWiTFLbRb3T4j05wWWF\nRxVaQzlqwTND5OVL3IlnxYoBdziSTqcasdSzwv0/pCoZ2ZAI5afuzCRlJAfc\nJ+ucKj08cYwfPwWdhrUj8rdBJu6gOcUFLYix06ELJOLoMsV8kbmSBi7GwhbC\nCJZauVwpuKrT/0JrRPTemvvVvvxqEZr7x77NH9aRW0rj9gbYkmyE8YnAkZy2\ncMEB\r\n=YUUJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCQAHjQgcz+So7/ECKd8+B9rY5KB+VMxCj0Pt+4KktCUQIhAPwb7Vhig7CqwG3H3kAn8IXDMuDbxcdAxAEyjdtCADYh"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.e89750dc7.0_1574820592664_0.9654615592939608"},"_hasShrinkwrap":false},"5.0.0-canary.3e560b33a.0":{"name":"@material/grid-list","version":"5.0.0-canary.3e560b33a.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0","@material/rtl":"5.0.0-canary.3e560b33a.0","@material/theme":"5.0.0-canary.3e560b33a.0","@material/typography":"5.0.0-canary.3e560b33a.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.3e560b33a.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-gWAC/eyF99QXvLm9TFHQ8FqofJGgSbMAEIscS9XMt+JsqNCVxHc4eZDnS/70wjkYJSANAStXPfUSDW7WBePy6g==","shasum":"3b6c07ecdf749baa8c042300f985e221688275e0","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.3e560b33a.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dseCRA9TVsSAnZWagAAYr4P/jaL2cIuviSkLt5zwxZr\nVSdHppBLzFFRr+FI1uB0FXyXSXZr3A5jnAzAT9DuXjSf2JhQKAml5DPX2+EU\nX++NE9pj+9hPo446cBoNpFT7zcjzbyxo6QOiLY4PYeVAAS+fVPtf1hElYABO\nx5PTYx86IkkSd+5OyxsuNiWzd/BbokntSTf3kNaS835KI1/kBAnCXac/p+nP\ng1kjcdH1Rwv8A6Fx3sq36QYmpqZPKAKV9PB5naCsLWsUQBPVqpL92aDagzUR\nzX7x3R5Dh7SPdqGUsxOJbBISIA4clVApk/DnliEPPI6pT7e2KJh+bj9v/mm+\nTjJWUhg+2ZbiINr0LIWDAIAbVZPPxXoyoTK88tpHkrwAtsyvGQrBhKAkMu9n\nhIF/2oVYVtSLgjhH41nFKgBew1+yelTYty+V1jANdXW1/FTPXIWdXlx6f5xN\nvSWP+gMufLuQhdXv4/7dihk8y5Pz+EjJIje2N3iZ4dOBygSiBLkKlctkJ0KH\nKyPYuQkx3oC9UNjNPIsGXY2dTZ1JMmGPV7B8+eqBkinShZ3uGiqPwnIJWAz8\ns7G7NRh6czbU9m7SRvD8eIBc4p8KdY30VtlTERdxO+75qxdp7VsS3IzQFEhZ\nrMfD9rOdmm17zkbtoLU7tLwheIAgFgwLtvlmUSzMeIj8tzD3PBCBoWobwKh8\nPbLd\r\n=BZf2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEAXUT0aESG+wvMSgNeE1O/ldyGfORgSFVssiOU0rV7HAiAVqABVK0KnlA75T6gK29Tc4xeqGfVbu0sjNSq86HsFvQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.3e560b33a.0_1574820638434_0.6839979373509444"},"_hasShrinkwrap":false},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/grid-list","version":"5.0.0-canary.7fd17ce5e.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0","@material/rtl":"5.0.0-canary.7fd17ce5e.0","@material/theme":"5.0.0-canary.7fd17ce5e.0","@material/typography":"5.0.0-canary.7fd17ce5e.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.7fd17ce5e.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-LZxiA3DIL7+8CgRhgb3a9y3DBo6JwuVmkxwuNhVHTUdKkOrLYc6Tn3rWsp2KyNqaq6R87G37qmDwkRVNi7Q16w==","shasum":"395b51723c131c471017eddb4030f7d362a9150e","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dswCRA9TVsSAnZWagAAREoP/AoZ9o4ABH3oZbxzwt5r\nr8yopkpWh6eDlq4g2wk1y9QTofoqyyTMF9KcunKxkAomj/3L/WF1xOSKP+tp\nQ7otfe6tdEmqVkYjoaefxu1uLYx22pXSE80AtZTUPru4d28SXC/sYf84uOGr\n4zc2C1r2Jk+oMwJ9ht3Y0+J/14uY2E1Pj72cAcp99Cud2cfqRmF4427De1QB\nMbPHjbnJXgl//Wfe45yAQWc3KDILmcYo6L1VPB5eUa4yTb68o6DeBbA51EzV\n74MBFcAx+1EvchpmOHoA6dmgmxxST8kTo+TSx6iHcjA5wjyMoTCZkTPZTNQo\n9ZWBIc/EInLEewBp6z5/b3N2aoPGUsIh9PI+4Edp6rn9WaScJ9XpLikCh8QZ\njCAPqd4HHZUdNFpGJ0dKRcmJarC6zWb6wo4uNEgWQQqOgjq654ozKjAr2R0s\nWZ/zCaWvysk9SkVivDGDFzD1MzMFaWiaa3zQ0yYtm7X0V5Q51fOLqJybmmPH\nf6qIP4r/twNm8PIavl61ZY+LHZA/DdAmf9tiVIX34UTo0Qi5U1HfZ7QAAMFp\nYyo2iCArpngV2E7XGwGIJeL8UpCVxhkf70w1BIUZgyEvlUvEss0g3F+r1S+v\nvaO9q0H+BSXB2IEfDPcn0UfSkWexknXvxLNyIaUrVN0d8DRTtsaSsRfGRYQX\nM5da\r\n=rk89\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG/r2Y9opPJyxN66wrrufYTvsK8pvOyhRXRarkiGkdq+AiEApZpaAPaOclBdWqM7ObEpzjPkAKMdOm5/xb3bVypyKGI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.7fd17ce5e.0_1574820655923_0.34396139738926257"},"_hasShrinkwrap":false},"5.0.0-canary.ec729683b.0":{"name":"@material/grid-list","version":"5.0.0-canary.ec729683b.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0","@material/rtl":"5.0.0-canary.ec729683b.0","@material/theme":"5.0.0-canary.ec729683b.0","@material/typography":"5.0.0-canary.ec729683b.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.ec729683b.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-dtYOy5Ea5a/BoQmJugQQmY7lmNo9BBDCX32KJoeFbLTSfpTdIj9wAWAE64JaZPvLaaZQGiSBJG+yd/pjIROQtw==","shasum":"1ce2330119226c00f55f437be2ed703b884798fe","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.ec729683b.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pxaCRA9TVsSAnZWagAAJQoP/iUmFSQekQetFVsfvjd1\nUxn3+/1H3LOyspXQhZyelqVMQm6nim1kq29E2uFCJrFT5mC1FufW38dzHWiy\nbA6hhgg/0TD1eAfuK6SLUYmejrpDyry17xo1sLCkbHXtVCkKL9socGnBaRBz\n+e67lrfEDXClpDVhPIqW6VjDox8HeJCsRP53ckadlp0JNqwEfxsiXnL3Bozp\nNCoyX+NYaNj7KfOJPaeBSbTTsj+FOV3wKfMGh7jmR8u+D82cWl5M0L1dJNnM\nYB/JhHqvJpw+kOTM5sCypVMfnFpj3jKDIW1mld9PkyvC9QYPLvIYNeKguvaw\nRdNMVqvMfTT37I87rlSLjvFMVwLnxkDRBzfV7524aQrU/e7GjOfIWnYGAHCB\nCwe4UMK3EddHpu19SUbkIIeLgiGxnMVyEUzmTHkfE43iaWfYBO3NFuCEPcrt\nIjJVYTs3KYNT/gmsOw241pVDVL+2hAJmL3oNlYfSinQwYtFp+Y/CyehxGtdY\nvLmcb0lKEPHVAu3uG3JnCpXIpfzSC/M17pmC5g45AgbGsHnNVh+yipaN0nqb\nq11aNmP6H6GNbUce8r02/gqpTImyvUAZ+dgf80FmmuBJ3IeYLT85n0HKu188\nxOhL2MLhvoI8tL1zd48qV3P8IyarSWvj6yIAbqKbWSx6xLS80Q2xK6CowAg7\nWGK/\r\n=9VhD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETUa7jqkKBm43cYuqeXlSF37JINIHtl80KtGeOTnXgfAiEA444EkuKhgUTFQPOMnSLccvZQQZ4Eeym2Ihree7TO3oE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.ec729683b.0_1574870105983_0.9371802269860161"},"_hasShrinkwrap":false},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/grid-list","version":"5.0.0-canary.b8bc4a26e.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0","@material/rtl":"5.0.0-canary.b8bc4a26e.0","@material/theme":"5.0.0-canary.b8bc4a26e.0","@material/typography":"5.0.0-canary.b8bc4a26e.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.b8bc4a26e.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-8hpWnWemqd6s0b9tLh7nXxJk258Hdyb6sEjJXA2hwN5WowCmPi/M/37nKe5sK3TmjViynm5pk9p1Ld85klFbeQ==","shasum":"3de429dda65254d677a2c7b005a17b5fa36d8f73","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3suhCRA9TVsSAnZWagAAGO8P/jv25uVm0mgp1DKZ6ik7\nWvqjlYbBdPO3FWmnbRmBIg13iHEGpGilCgbZ7iRIRzFKMO9CJTuqXehGAsD6\nYFd/k5aFaT4g0s4bsF3L2IQSM/4kVIivSbQEOlJ/US9ylIWfzdwiBwbbVLot\n1tPrdIMuCEnfFlTbzQV8yMdJlSFEhW4B6MEnFsKgTJGosbFv/ij1+zGu1W4P\nDI1Zot4wSkJ7ylJHFwmwVfebPd9VYUMl9qg7WmFORl4UA4hoLjIBW23E4/+d\njhP1I18aZsHLWF+NnFxArDc98ZhmRrsn8rwDznr6VVlTYO1MUnRGnHZFLwAo\nE4Vtjkm6qOdARvpZqLigIC/vrb51EJiR7KDQI2a1ZYh+f/EYHOXZkI+huyVP\n/8U3u+ntr1coEu0W3Q4KnIllft/zdy2lbb9GQFxk6TZZmVGS//C7Kksyme0l\ngv23GOrhdaqdcGUe/9jcxLz1xEAcQhJGRoudW+mFMC8FHUHywkw030Tc/QAw\neWpvKnkk6/WUVu+vWMKiHlsxglinrydZqMqy49Tead99G+3EfAaE4ISS53Nb\nn0AnOHJpwy2x0VbevGpSCFsk+ky7Z8FvprcIzJCfZ0sr0U2j7Bmy1XIwkyi0\nn4B5CAAGwaY7eJEwTIbfIkWT4MH6atd4TiQrqAsQDA6kPaL1+Zo8q86C4GLq\ncQFX\r\n=M9Wm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEr6VRH9dt0e+HTtCRCQ2GXo7vLjWedE7Wq7auglLGCZAiEAlyv8pkhjHgbG7NCrlBapW3l1GXDnQz5q67/1kdEQ2wE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.b8bc4a26e.0_1574882209510_0.7753149153408438"},"_hasShrinkwrap":false},"5.0.0-canary.f978109c3.0":{"name":"@material/grid-list","version":"5.0.0-canary.f978109c3.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0","@material/rtl":"5.0.0-canary.f978109c3.0","@material/theme":"5.0.0-canary.f978109c3.0","@material/typography":"5.0.0-canary.f978109c3.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.f978109c3.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-flcHkykm2pz9p2V3UE3uK1ADU8N0umcKCVjnJ3INNmDrGnIC0tMWDrFQw9lr4dKzvlE8oO6avrbuoC249jss/A==","shasum":"e5bf17503173b15b5bd9896938a47293681fd5ef","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.f978109c3.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UTPCRA9TVsSAnZWagAAuXEP/3LBxfeSwmYegRX43PYD\nyeUeMvtTZzFLR+eVnAY3UTiCGYRYwHta+N7NHrckTfx3mqgMWjCHSYLC7UUl\n39T8Y5lUcXxHHqqXIZMT6KGyFzTzGR8+ophO57b/MTkOLiY+Xmg2lcVPYTwk\n7W3x7RT33HqKOZdrw3/almB8ydTmygeJTeSRCu1sCXXxGLRJWu2SAPxzPUXB\nlyQn+QcPnGb6Ws+i3UAWSaUT4sqO3w3VBtk+g0ygFT5QVyvkb9gA3SRlR6s5\n2P28MPaNWvH/SvYEcRL1kXvRIzBq+TstkvceuyJsOCjL8GezJvmg/UtbMMYQ\nsOti29mrCw9608fMc8zgUhLEjZ3a2ihx423F3mNVMVHZRdr0hsjxA1t+4b0y\nGiW7LsIzO9yawMgASf2W1qZ3iH3O8D5XKDBAc0iJLStgTlX9L4S7Qo8lIbD9\ntNBv8h7Hxd04j13CCjjfCqlGLvS9xvXzN5KxlFC9cHFCZDZ2nq0DtVyFWgFp\nt9cgKRfthYvNKL/4nWChVdxB4DyGpz743gvSJxkgXdU98x02jP4aL1p1UUV3\n5PDAdfhxffu1xp0KRSplUU8rNQ9N6tsp0GU8LzjRBMmcyilWamal+XU3wT0p\ngQQOKMDLof+cDn7jFwlJSrW3V0DtXzMMlcHhiNihGoqeIaHZQSSTvknp65Kb\nTPok\r\n=BbzC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBTwzqG5S3Ezwy+IOx8SbSUzzc5U8ZpvaN244+HPG56UAiEAmjfLCYjz3jx2wrNmd0QULvL8Kxqn9uIZYj1UetWAbdU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.f978109c3.0_1575306446852_0.9477116303909787"},"_hasShrinkwrap":false},"5.0.0-canary.ad9dfe706.0":{"name":"@material/grid-list","version":"5.0.0-canary.ad9dfe706.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0","@material/rtl":"5.0.0-canary.ad9dfe706.0","@material/theme":"5.0.0-canary.ad9dfe706.0","@material/typography":"5.0.0-canary.ad9dfe706.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.ad9dfe706.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-hjhZGwkcqUaSVOhm3Pu8pt8yUCgl6MZ6X8QAEM+zWALK5LzHAWjyIZlxGYym5nmUGHMR85lABXJyzjC7tq92ZA==","shasum":"0065b27d11005a99df710881e29af9f90184ec7a","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.ad9dfe706.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u0wCRA9TVsSAnZWagAAxY8P/1nWOdxRUJ0Wstjf0gsL\nkgtGarWMCLIz4LlwY0N5G9xRfKv9OXhiPFEkakc9quBBPyX23EYyAEVilRB3\nva7SqTqvvBvJq1VoiOGaKR0EU1KwnWjghDFbjfW34PsVIqDiW5FBRpztWTfv\n3qJysPDqCi8k6KLJcRFoH/yEKYzh4IBnWFUjumTrHJhzlj7PPK+tZG8uFSF+\nz4u4YNm3JbpukpbJ/yLPXtqLzqWMxHEtjexOrwlYNgQn1X9IeeDzW1RCnn/G\nOE3T+VusOHQjUk+2WZG8GwacDJldgbFE1Ff7i61b2U14R3eiZ7icvcXXutx3\nBUDttBe4A5FO/BAUaquaSIbipW2FUqGcF9DXi9r0EEDqGyBV+ZxouNRb+ix7\nGKwJw43X+lzO99CWi1D7WF/hR8dGCNvoeuZ88fsm3NDZualiNKhEXO3MrRqG\np0/dut8+bJed34nGOBgTTIhafWQqO671foPtn0ePyIUcqzv7Lp2PEXfAzd4B\nGGa4mlAOYBQ481SSsTOP1rtBD64E8YmQUoPeQ2vVfTqWFgGqOIcodv6slUE8\nO/Z2FW6JSD1Mh76QjjIyshTlKzAHA/jT18Exnbo2yd1hAKMyQWuYBBGW1Kkh\nTsC0ijXtPs2iKMUgRBa6cAIA7mL7KzBmM4r7BrzJBAF+1lWdnVZXLBTR6KHK\n0sSC\r\n=Hgnn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8YKggmj5OPf4akc4wCru0VqlzdEpm7qZBGN1CQspGFwIhAPlb63kvP/kcn+1B+4QHfWLUJpvAC3gmQPug9vFfDPnc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.ad9dfe706.0_1575415088494_0.8663817982485764"},"_hasShrinkwrap":false},"5.0.0-canary.5e45d77f3.0":{"name":"@material/grid-list","version":"5.0.0-canary.5e45d77f3.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0","@material/rtl":"5.0.0-canary.5e45d77f3.0","@material/theme":"5.0.0-canary.5e45d77f3.0","@material/typography":"5.0.0-canary.5e45d77f3.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.5e45d77f3.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-Xn5rbPakJbMwFnCIxb52eUhpv/BuVYsQMxi5mSeF2HSvlfHBiepOF4uWtc08S+gkGE5iS0ZewZPWpc26jlBxLg==","shasum":"8cdb4325d1b71ee98405301468a75b96bc384856","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.5e45d77f3.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u18CRA9TVsSAnZWagAA+osP/1BYjBl7yePrW7UJ6S/a\nm9Iv1dR+widwcbnzYEcqtEjoEo9eYWEHKz1q1hh/lganEfI00/eaBDEP0T5x\n749OH0F8oF7F+r3LCIpVX3JJMDEPeSGYIm+z5YBwrzCw2axT0irs5dgWRpGx\nHbGyFakLsPgcZufju2sySviHX70sIYQCqsrVAFEh9UJDGik0KkWB/rRq/fwm\nhgdpbmKBdyY/16U8WKcQexV4zx4PcfGyjgCBiRzelzh5CN8/l/9P9aoRJT67\nNIppJgvAYU5eobiJWsnrWU3fxywPEZwsD/ZapVve2wQ8EnDSJcapIB+KQ1Qe\nBeDNStZa3Gj+OAzalSGhzGtV6IUBKu8UJ5ZrUsZeqv9Yn0ep2HUOk4xU41el\n7JfyjitIvKkLK1M7SEG1OuDpOUgyMkzWJi8yJoApFQa38MNyK/NhAswmCe9H\nV3G+1IIS7ZWtaHV7K/fmQ7fgIBzOxCp7daM18lNHGRo6OKuz/PNlka4zUxZE\n3jRdi3YCTZKIGqAZCZove4YQs50EB3zgKFlV8WlRW9ltihVrw+edfqd0uBht\nWxIbzVTZnWlgNI4fiFEgxBkKTcAMCAaLgV+wMs7USTr6DxdgeBoMPiyDxqiH\niJ+A5ndl2uffoXphqI2pWgVpTlodPJbnPc5+gbCgPcf7pq24Q/8rPe2fVFQ2\nyfai\r\n=aVhg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCF4JvQhju7svrcZgaZIDkQ2dtKnjjSx3sjcEl2t5z0HAIhAPT9qM7kKlN26207KiD5theXUiu8crd5LwM9dvdSzdVJ"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.5e45d77f3.0_1575415164055_0.2500423035910446"},"_hasShrinkwrap":false},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/grid-list","version":"5.0.0-canary.d10e8cdf3.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0","@material/rtl":"5.0.0-canary.d10e8cdf3.0","@material/theme":"5.0.0-canary.d10e8cdf3.0","@material/typography":"5.0.0-canary.d10e8cdf3.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.d10e8cdf3.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-JmQasb11SmePb4+7FnGF3txEyoOaHUkO2Cc/Q1adxPNqZ1x2LV3mGDn2e1nEDW+QhjvSnDL4OGyGWdYEeWRO3g==","shasum":"0366b3c013c4358dd3793f38013f061078956b7e","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u21CRA9TVsSAnZWagAAkM4P/RFkTWs/+P13Hi3j66N6\n4vHH57Gv3b6TYYwlYB9nGImwqt4worFXZCf664G7KYli/9eG37fvw4YFhdVG\nEZeRUj9uN8aqGX3oskr5raAsTETJ08oH18tWDEKO0Mo7nkjWdrr1rjj7f6Is\nLdhoU/1kT0Cx9VRUrAmNv9gilWZ+x1eBJV1AxDZv79lKI51kQrM4rGYLqltD\nHJgvoAxF3JXRr0CRkYmkmwskzijk3XrfVFeXnW9tUPvhbPGFddtVR0Go6Zbn\ntMqA1zsLjYW8COEJNulQuEJwd8DZTNOo4dGGhE17meyiMwdmJDpOXTKXd6wt\nyeSf4MM+/8g9H/wbrr4abAPAcpMdVDk5cbHf/f+p+UznFJoSCj2vHOHN0f7C\nsaMUDGdtE+RpZKyrmhwhi6kUN8X6pXeSOXtMHsH7xuOcdZ+uN+r9aD+pf2wa\nT9g6fsnHgWu2K9Q/u/h+Valt2/RcBE4C6e78bSs91YGNbhW7oCIYX/q5LJ3a\nbT+sl29f0EvO75h+NPTl4yoaa5ZLvaerynrpkFcnNnrGvX3UT33kqSVwAuAZ\nd9vSPi5MaZC3DN9q2470wIUK2B2EBRq/9ohdimCozfxF61B/M5UBxEIrpX7m\nbazfNV8Q1eOmHLuab4iqf0I25UdZOv9N3EDBw2r0MV8WyX/CgzMBZ9R8VcNn\nG56w\r\n=6lZJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFKq0C/MaGSjvIMfm01ON2fmF0fWQM0xaA+z8ITLe4KpAiEA+hwYJjww11mqdijhDWlkVKRczsx+KEhm4fuxcjKRXSc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.d10e8cdf3.0_1575415220706_0.5139764922790908"},"_hasShrinkwrap":false},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/grid-list","version":"5.0.0-canary.a5dbd8a2a.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0","@material/rtl":"5.0.0-canary.a5dbd8a2a.0","@material/theme":"5.0.0-canary.a5dbd8a2a.0","@material/typography":"5.0.0-canary.a5dbd8a2a.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.a5dbd8a2a.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-/dBy8tTR5XanpwECBT880Q2wFFOoflUI60S5FkvAVsIjDGI9Bp1OGkfy5YghqEXU6W5WQ+HU91xUDecm/hbHnw==","shasum":"7e57e77fdd751b8af506811ff440e00b411e8c2e","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vXZCRA9TVsSAnZWagAAy5IP/0bbtzx0GpOLTCzkj4la\nU3CFWxhjbWoPnXWeMZQsJNwKiJQC9+0yZbV6eRcZg3oOkG5XkXCTDDXgq4wF\n2yblWhkxrmJZpyeIjLOD1QMF6mCcyOe15JoMbxOE5c+z4wcyob3lf7LrMYkT\n7UzDLMTQQbxF2KdnWTsAfkRmYxjHftf/pmZzntFydY95R+RsrYDR3YaocEJ4\nX8kBv34iayjC1cArai4wfYpWhOx18CkIzaGFFAiXqZVbe2M016/u5k/enBX0\nZ0/E5gxD2SNQHGAxtppkwMzc3CZZMlQIGVkiCZmnjs4MlLhREs/SNL610XL3\nqDpfQIrQw5olXNUeMEz/gYqde12RLL8ylurAj1Ujsr38SOzPg7OgrXQowNDu\nhJ80/QYbQqlIMEJk0BFXfMh3YwQgM2pJncuR9xyLRbb2rGNoo5qf1ZN55uad\nBdjcY29gAnn/2PLWL+zOcivEwjcTz6ugTkp2ytYsYz3kWl+E6DXMg1jAdS/S\nM/8/Qkm2ea5sFT/y8BIPlaAhJSlR09uI+M4RrjW3o1CxoztWfXIPGyRDNbcs\nwRCFCMw2YpzqbteOYvJQIxH8ThhRqxMNMNw9wBgDe197EDz1niABAqmdnF+p\n0EHBrXYDQP2k6q2a9pevZjFPb9/r32ywleiz87wLjF0ramaV6bVe5LV1q7Tp\n194o\r\n=1dLz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVUXPPB4J9WRRg7FXnCBrTUoBhsPnTYe1aQQZp0SUscgIgfci0fpsA04ft9LS0fFzFS5+YZfEXdSE/8BjwJszhu+w="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.a5dbd8a2a.0_1575417305076_0.5133744343236586"},"_hasShrinkwrap":false},"5.0.0-canary.ba879b68b.0":{"name":"@material/grid-list","version":"5.0.0-canary.ba879b68b.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0","@material/rtl":"5.0.0-canary.ba879b68b.0","@material/theme":"5.0.0-canary.ba879b68b.0","@material/typography":"5.0.0-canary.ba879b68b.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.ba879b68b.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-Q70cdCsXLz/rxvqi2AS1+n+pk7cPq4HMcxVVcbhXUbtVwxFqT34W4d4/v0HTDI4qScbd2q19EPTQbgScv8O6bw==","shasum":"abacef688c74b6f89673dcede7b2be1c389934da","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.ba879b68b.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BWVCRA9TVsSAnZWagAA3f0P/RgIjdiYEBAkVDXMFddl\n+O7FwdSNlJl0H+lsBzBFMik2eIHkVbsZe/rtRbN4Hl1pmvtWY6JCG74STyqM\nnB++Kxn9aZrelOfKD5Gfam3XCmNB7w93txnHi12ABhuRjAljCsppGsVIYjr0\nwORkFXQq4SzKfnXYmix6veYOyooZIMW2rOZOpMj0QHpc/rAl8kraYF3sUUvu\n6pvMXtDZkp8vZ91heqqukxyfi6TDVXkf5eXw0/0tCwJVlLWQnfTHGXjeEm4f\nMECtmzmP0yssEWV58KN64vRLxmTNNZLhpI4r8N1+Q2qsHPRlKt3FWAEElBxc\np6iF+uosETElI+zLJefSxDuR9/ciCVWFiyMihS8CT4B3jB2Km886+zgYHPTa\nsW0FZlCCAo5JWmUVqQw7Xlml+xuEv8xP8RsG+c/iTktgUZH7SvRmI92NS++t\naUpCjvvftTF4gfoE2DZ7dCLFArvPnvAgE3Vymi5kV23wZ+j4PWk48GMClplt\nic+xiONFyjrnxNTQscpzvuGTAgvsHAoNBy9ZQ0NoB+ZTnAuv9Evz8h/Qy6G+\nkZ/aFskziHmGCgwbCmjVanY9lppkMR1N/d/CGUyA2I30zkRl8pO9vBJ6jHs0\npHfHlQMrm3b4tGOEem+AYNV9j6aFsjO9ORTFaUWrQYHAL0QcppKA6Twd4oCK\nRF2X\r\n=uV/X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFlTxNJBfgeIrmsSzV38dmnZQ5F/iTHXCb8jnrGVuq/ZAiApSlyT/zRQekTFUGkAmsQtj1Z28CbKwIDUcGqhlkSYew=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.ba879b68b.0_1575490965471_0.06569878811819407"},"_hasShrinkwrap":false},"5.0.0-canary.aa0eba489.0":{"name":"@material/grid-list","version":"5.0.0-canary.aa0eba489.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0","@material/rtl":"5.0.0-canary.aa0eba489.0","@material/theme":"5.0.0-canary.aa0eba489.0","@material/typography":"5.0.0-canary.aa0eba489.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.aa0eba489.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-MYBQ01SMN8ryyRTfh+wWnZSg0gqXW/Ym9RK4mbV7+mYl7KlhyBPKgGcMydz2Rlf6h7ij7MyZ6RLRQOiaT4yRyA==","shasum":"7ac6fc5c8a8294ccf1827a3127b8d71b9bff8786","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.aa0eba489.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bXtCRA9TVsSAnZWagAAul0P/2t0RG4tY+L97koNaz6e\nZBqPO+MxADwUm4mQw4zT+l/eOg06bdX+SuG/pNtZsQgI4CRgr2NCOpmuSa6J\n/pI+F7sX2JPgtDyweloGOwzD1Rdh5/67bzvpk3crOrLzQSdPxeMjmHeHc1ve\nIWG/MTx/RxGWZ1qOAY42uYFR2yjc40ZAuczGqK+0s47LaaWRoNe/yg5JDTVf\nBCnCpSt2Yl3LQKe1S0nziJ+a6+rD+cxfz1J5DSWvlSIXfc6IBuFiTrLz6DNO\nOBbGqbipVrV8Ma5kAYzRGj5Xrog/ZSaq05E7gdy3QDvxozcZiJl/Su7MfajP\n4rbWCux6/a55ClQh1Zn14R43NySfGjZaX48/wSmgM/NvoBN/OJP0w22JoSyY\n7vhaTcqf+LVrcBCg4prpw/8dj8J+6kryCSgu8ij5M4KkQ4aXw6pPy69o0pnh\nF68sWYIJxv5gMEZ59V37cgqtaGc5CGvDGv90+ASoUUDjgAv31/ZZGesKnL6Q\nMOcX7Sw40fR+K0Rz1A7OYUWm5HUT1kbDp+wt/DgaJhS0pDig354PeR4B70/f\nVX0T6jVqJC0hSHARd01plfVsJsBKjArMLgZ/aQHM/ci3UvOJTOFeYGgRBuiq\n8sqgPQOZSM7gxZmOLkxpGGx+S2aGKPmOOrg/jLlk02cANBoRKMpsh2PwcFyp\n40/E\r\n=h6uI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHsGwED5jS5xHTu2xTypUA/9IgreQmmi01zoEj4l4eRPAiEAx+pnw6WNVP3QtLyrmxZOgjAegba9ghxbectkYkxrGkk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.aa0eba489.0_1575597549309_0.7173021421489283"},"_hasShrinkwrap":false},"5.0.0-canary.cb7b71a86.0":{"name":"@material/grid-list","version":"5.0.0-canary.cb7b71a86.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0","@material/rtl":"5.0.0-canary.cb7b71a86.0","@material/theme":"5.0.0-canary.cb7b71a86.0","@material/typography":"5.0.0-canary.cb7b71a86.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.cb7b71a86.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-zaPg0vorsdjXZ84yV8vEAAvhnY8nfRplazSbj3WTlQ5PgoygKpRWIuc4ngJI9AovjMrcHv8WfImcWEHi6mOHpg==","shasum":"2cd9b69cd586515435795addedc4167f1ae013a5","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.cb7b71a86.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uqKCRA9TVsSAnZWagAARUQP/07BvvJE1snnrUg+DtK0\nMfQkd+RnnrZG2Zgk7cY5/om+PLtZqU/FoFQ8MYACND48G0oB9CRIvFZoLUlc\nPqv/7lE6RpkRllDIMC6c6ItJjjEkYj3I67q9xAOPuWBauN8O9eyCxpGcrE8S\neARzFyJpoRxc6x21NxNLHfOS3KKLmocLWdUWiBO1rGTsjP2ga5cB50gGykDQ\n+YfNTseZpducVeVNEvNtRVuNbywXO2CJm1/P9stLqUvwz9ZhGgRNAxmhSEVi\n44Tyg/bM8HAjM3E/zucSpa+aS94d6DGnSe89PgFJwl5Re733xCIrDCsaMM3N\nvJy/2Bqc73Ts4CSjrFShbafbBpioSGviEYGG/lstZAZCAeTyJhAOz6XHEeTK\nVw6ToU/POpzjyvLOhRTUndvwDlC1z3FpE/q7JX4IdG2U8Zbu2PBe6mnK3O7e\npr76KtA1P5FLRJRteQmo3iSNsL7IbiM1ckeRcLAg4f/l0gKJvgf07HhUGW+x\no6WclFYJHpv7xZoERTRsqkjd8U9wneH7/qWDv8/fV8jFR0cdT2cQu2L83ZhA\npsZn1h2qEFd2BMxzAOrYQ74MImD+g/86WPTN7wBUQS+JTlAP2Py2LjTnfoAa\nrq5qTifKFxQGFeviJMYUgm0FU/JnjuRmpvdGhLmojELXaPaQw6d+kSstX21X\nEWp1\r\n=YZ6Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDtI/hexadj6oEtXt8eiKnQl8VqgIxwjz3R8U0SsAAAdwIgZzCI4P5sbmTA4ckNFY51JGNQh7NchvvoR5omp+PIVqg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.cb7b71a86.0_1575676554132_0.09388131636035602"},"_hasShrinkwrap":false},"5.0.0-canary.50f110a6c.0":{"name":"@material/grid-list","version":"5.0.0-canary.50f110a6c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0","@material/rtl":"5.0.0-canary.50f110a6c.0","@material/theme":"5.0.0-canary.50f110a6c.0","@material/typography":"5.0.0-canary.50f110a6c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.50f110a6c.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-DWga7NtpTMUr5TRJCxlLJCsp7bxgSMTpOG2Ws3S3RSXdzFJohLV9lLPbfaOUpc6X0zGzysO9wfQDwJqV+JcMrw==","shasum":"c80ffbd4a0ae53f8bd7bee37065eee794dfcde66","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.50f110a6c.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7877CRA9TVsSAnZWagAAfvIP/1mrnwe9d7kpxyielaU9\nNHPNkpJEyhDIK8jwRo4SPaPNCStMoKmrb0jaonyWQaiP2O1FFC9gM1tp7qhe\nweoiy70jJ4OgiNj3Ph4316psBP8woW105kWoCbJ9y3mg5eiUsBl0nuY+i/WA\nCeeum7q/lTVTlLztnbujHI1YyTx6rztjXEd1j3PQDmgL3K0IT0qfwGySH5Vw\n0mpVjn0xbw4ycGiY0BTU4nU+400tUEw0KeGNN6srTZQhAuRAx19mv61SdYau\nmR3JfPSbjL3ZQLRK7xwsTojCBcYrGDihhWD8ayOcchs9WSRm36aOFMN7dWH5\nBdmBJ44tmYlqKj8XyYtjkx5XmVz/8/faFQNvrQaabzv/yYoEuye7D8QmztLR\n6zmK9ebTY+wmoeTzHixR4uFiJ7McAVqpOm/Wh1JcjPQjCWUSjSBjrywgg6Vo\nA25wGG5AyS7vw/rxIUNud9CRyOnHfq2s9dOzluYuL/blEPHO+b88KvDkTACu\nrxvinLQx1gBQVZLZC5NPwca2x0B9FAVEc5Asejn/zXHcdfP19jbd+PUdmh2W\nBC/RqR75iI2Xp7GhLu9nmz/2fss0bh/dcwGuYsffnBqxoi32OAOrFWCHPo26\nFZmSkrb3V8zG2QYDHoV2uSe90WulaV3wlPcyj8uni5ROVYIJyLuKttBAkA2E\nWT8x\r\n=vkXb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCoAiZA6Vg2WFUvzMOyLiOAc4FkkEEFOK0h2xdx143xsQIgAXyokIj19jbLlBNEmmAbDLk1I4Jy93Gl85ENlUqpGto="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.50f110a6c.0_1575997179101_0.7054896014250196"},"_hasShrinkwrap":false},"5.0.0-canary.878a08b7c.0":{"name":"@material/grid-list","version":"5.0.0-canary.878a08b7c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0","@material/rtl":"5.0.0-canary.878a08b7c.0","@material/theme":"5.0.0-canary.878a08b7c.0","@material/typography":"5.0.0-canary.878a08b7c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.878a08b7c.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-8qbxtw6adllslEDz5VtYxA5uaxkS1p9SxLXnil+eD2FW3wWT96Wv6PmCE/8v1KbEDr45QJ2iejyFAqaxB/jiHA==","shasum":"4b1fbe572c361bf8de9ed0084b41c30d2767b24e","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.878a08b7c.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U6YCRA9TVsSAnZWagAAN5MP/RfGIC5MQc1kPTIXySUY\nBRgZ94LHyspQCv1aE4aMcjDMBsdnC1FrLk5H0tmVekujRxXOvweS2GepAjfv\n3eE86MGhBb7wmfbtF3rDC9d2L4SskfRz4vm8YfhXVau2byAz8Tzgbj8OciN6\n1lFehiRDn+AhxVtPlgB6z3P6Bh6cjqyW5oxaS1lD7s8Ujf2okgLD9hNTwZwe\nuwChiJ3ANkGYzpbi6toZER+08aY9+Wx2T7KvviaQmv/7GfziYoF05SWZbjVh\nS9/T4I8lH/3Tq7TJY8TCaPQbomUSyaMgEdpmpbD6yibIJ1WKMadSjufRPKGV\nShhHGxhVhWzyZ1ifct4fW3hxUIqU+2n19ah4kiJaN859bdE8I8cNEOIzzdC5\npZ5I4o1bmU0G0f54OgMG0nfw1VI8kZ0PAda0A2iigqjgu+it1dQi++43SKSP\nTqsLdEdfmtuoTpqNaWd2wNm9k5+0DtHgyxd0gyS6Ukk0q95i1vmeTZRVdFgE\ndLDn1Fy1dFoa6uSMD2GembT4DrxXaE3Z1b8Ip4MfmVuNiJSP8OeR2ffHZNyd\njEJNf51lnzVCW1ThKBYCaDOc9yXoUSjX6MpS0PhWFm286/bMQOKsAPM3oOSk\nBwLeyoll8Eqo7kxQhXfQ+vVF1d6QF2JTkWXHHztX4Tft4WtKFzl0XAGPMKr/\n2/t0\r\n=/kCL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDtiqcKdGdU+gOdBMbCuj4hByNZEzEWYWvNOi716ydFbwIhAO9q8cFrPiQPbWsOrbcVs0AEXOu9vFUWfG/ENiB6UL/p"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.878a08b7c.0_1576095383812_0.2419005970026673"},"_hasShrinkwrap":false},"5.0.0-canary.397905b4e.0":{"name":"@material/grid-list","version":"5.0.0-canary.397905b4e.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0","@material/rtl":"5.0.0-canary.397905b4e.0","@material/theme":"5.0.0-canary.397905b4e.0","@material/typography":"5.0.0-canary.397905b4e.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.397905b4e.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-9E04cDZ6/8V/+4mSKRa+U2tDl5CLmDme9lC1DjbodFw2o/YlSYYRRkJgab3z/STPZtoF0/lprFKth8G+3DkUiw==","shasum":"b357250ae97a606cdfb2dba4541f1c59aeae844d","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.397905b4e.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8ao3CRA9TVsSAnZWagAAolkP/j0U/B3xlmDTZi8iwSwg\no1GccKpqWHOx1NCudydOrTKENZv6bqx1+06WhMQF/2EEHOZJv8dvdUeW9bG1\n2dPvyKtw0k9ZYlt+utEwp/8wQgjZhpA1olJyuW6w0hxxvuK0ZmEWd0xXgBpc\nmSMHYx2YG452D4sJSaATBlq5j2cnr1JU/TeTbqz8+zzcDatOx6LfgMCxcUIn\n42HbxOpJg0WkwjpZm0Q8xLBgEuitbfIB3r2Ksh5QwAxg/H5u8fuyS6WFyTBM\nWYGq+iLVHoe6XLGJgvYTmBjWhY2KfdBrRzlZRxjbgVgIl2SSyg2lOLxZJfON\nasttmTTk9khCKr66hsI9VNhuFJHN4wSWzYdsyL4FhltQTyH4p+Zn3m/mkU8V\njCzblEF/ixRU5SPZGnFnAD9f4r4vlKNdOveEja9DcDQ3VurgqhXCSHXsJhKU\nnTj+JGQlsjyzxDVEGKasTQ04OoYfQO244ei4WTKtvjYz+vQSEcVzvmCO+jj+\nhIMgNqn7KbLfkyyUccxj+mHdZobHL/AOZF8dYNsDNQILxsPcDJSgjeoWuCTG\nm1k4lC4VFzigfBUQoiKVqwBcHhTAhV20Ak0u8fsGhm5bQbpeCeY55eVvRoOs\nUxBEVPF5PSeiXNqqjIoV1WbEd6zpSIWmzQo9Wa/KWRPd3S/SMcWbiediDoL7\nksnB\r\n=YHL9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCTDi5bkx3qvubl1NBv9J0E4/CGM76pLxzN1JS1u+5ygwIhAIgL4ADHf/w3uRYnrHzpqdPJoiMZVotDqNhWyGIremQS"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.397905b4e.0_1576118839256_0.6393097212038805"},"_hasShrinkwrap":false},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/grid-list","version":"5.0.0-canary.1fbf5bd1d.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0","@material/rtl":"5.0.0-canary.1fbf5bd1d.0","@material/theme":"5.0.0-canary.1fbf5bd1d.0","@material/typography":"5.0.0-canary.1fbf5bd1d.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.1fbf5bd1d.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-C95/n9WVV2YHHz/7ur8V8HGjeI1VrGvTGtkUeucV3acAQxSmVh6AL9P2GPxtdAhu7HmIA6/pL5jotorcMo7Zuw==","shasum":"dd0597e537f4600295bf378401ce0cec95a655ed","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o4ICRA9TVsSAnZWagAAckMQAIqiyawY1kCBWzcI6Ez8\nsV1tg/3ANaZmGma22A2Yk9kN+1E7p46J+uTgn7SGFLqrkrC43egc3+DYd6+W\nmAzjjOXqcXrsOk4vuTEL2KKg7ngeAcYXHoXYJ9kGZ0AGLb/kuQCkD53RUCbS\nSttZsQxmDiFb6dwiD7NPp49RGhXMZoal1LkI0sdL3bqAkvmnW24e8Vwg34aw\ndqmTDWSvpyYMqqZE5PrfklBVs1QvM7kobLU687nlAcKUR3bp3zqV6t9rNfYr\nZipwEZUq0V4HZsYH9oZsg0pm3jXpZFbxDzWfd0nyn/tofs0+xMk4izW5ein2\n5KiOHaL5OKSvBc6Dypr2UPUh4gIoP0tuPsfoth2IFGPFPqzQX+HfdkpHyzVS\nPGk8eEn048Y6/SJyR08saHcB8+ARS/LmXDh/bkXxBAGYUpYvS0ZAWTrym/9j\nBrEENH1ntOF3qGbn247J53hrO2Lf6B8u97mNM0spCPYxEwYfE4hKSlGVy5EC\nPAMclkkVLTuu1+Dka7W1WQ1BK3siO36FjrUeKXF/49cr8DHOvlmIZO0ChuXS\nlmAo3f6zl99lTYR6yrqgO8tJRVDPfrGHE5LshtF1BTj+ZknaGuxGvZviJiGY\ns+KsOl1xT380i3Lpb5FxS2xFclDFhSjcj+GsPmWNGcS8yKDr9xP79+AIs+2s\nY22I\r\n=Xitr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8G7gEYhJxusixe0v3P7ERxHN3aubidiyJcbxKeIxsvQIhALu/3WsOCJb1GbDds8ieFOt4urQ9Qz8XVgprXwcApzEw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.1fbf5bd1d.0_1576177160123_0.4929759316145137"},"_hasShrinkwrap":false},"5.0.0-canary.b723dfa78.0":{"name":"@material/grid-list","version":"5.0.0-canary.b723dfa78.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0","@material/rtl":"5.0.0-canary.b723dfa78.0","@material/theme":"5.0.0-canary.b723dfa78.0","@material/typography":"5.0.0-canary.b723dfa78.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.b723dfa78.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-m45i+N3HXe4NK2GlKOejngu+l4j0vpbeGCnCWGcwjMTC1z8nbFAMXXeqmC/ZgabkFVcaKd6fcYdxCN1umRNTRg==","shasum":"57553c3eff7b511ac1f8879b6bb286b8607c29e7","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.b723dfa78.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p6QCRA9TVsSAnZWagAAUx8P/3Q7UL2798e1c5hS4x99\n9btZNBMGCmhzy9mIt0afpX/uCakD3iHVI26YjGGewsUbbDuWwjyeqALTHiJB\n/YZHbgXHRZR28bLo7cE0ysZFj9vlOd2P/Y7Y9lE3+Zj2YgbkcptJ28rApM+2\nxABsBmnfgR2sNK+mAiFKGFg5pTOCV6bczDjGt15DeUcH4yS4g3Wovxp/MNem\ny8b2N35AbICc8jXYbCWcmvKFP7EoU0HtvZdpwVxdVpSAwNfaAtHKpfTm5Swj\nOeOymOpA0lGkbWJsqeXA+xoWk1UQT2qWgHEOGlpocgCMGqouNtUzSMi5n7Fe\nPpNvSgSSv6un+uCSzcZw0KnPowF2/12ekmCFw5v5zkCERyqbhfKxEkLPuXI3\ncIBiZYem3sVMWBqnewkLOSUdy9HbBXxI8/fZ1rtHYBZaWhr0AgujIsl2pCkg\njzwjBBcK8J+2e06q9pwg/juMrdcrlwKF00XN6yGYDmVZId1CGinhZJ/qOPLV\nFJqxtR3U8SG/b5L6GR+xc1TSATjE2ZneRpUU71tDwdKbHNl3IR4PnCA0MTZI\n229s6rQlIrEQKlZ8qc0xV13kA0cDYzXHXjbIJGofF4dKF9A2Q3Ck6hkbNxh2\nbtizcKgby6712HCTlvs1rSAVXxpz3Iw2K2C90Fk1G57vllB0FY4WhqmwJPac\n+QF7\r\n=U9iG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDnBFpbJg0vePdDFnA7a3g3zMMiKMILxuWq12f1Y+9V0QIgLiQc+jxqJNzv5Vm8TuiqKQ5rjEhC92t5mA265ck0XBw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.b723dfa78.0_1576181392260_0.3445283404730475"},"_hasShrinkwrap":false},"5.0.0-canary.1c494e567.0":{"name":"@material/grid-list","version":"5.0.0-canary.1c494e567.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0","@material/rtl":"5.0.0-canary.1c494e567.0","@material/theme":"5.0.0-canary.1c494e567.0","@material/typography":"5.0.0-canary.1c494e567.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.1c494e567.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-BCpptXFpDH9vBwWCt/hl56ujfRkcRxi/he3MspI3OL2+CNfsOKaiiMgr5wg8xABJl0HPA/qpYSfE/QrLyPC/dw==","shasum":"c0383088630a5da4378bd4d587f2dfdee3cefe54","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.1c494e567.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s8SCRA9TVsSAnZWagAAP20P/2P7D78BDeMu7GuCApsN\nlSvCHtB2b7k/AyOSRzmYLvDInzCHEXnBZKlcwaa+tmufC2+sohQMtrTogf3m\nrrg4WWDgh7yA/sSITjyzWdUi3WZKcCWSaKcpTr/EQ4qrvkzh4DtJKliPEPWo\n3+cz5nw8vzbs+SaKUMk0aD5DU+2zeXdU/3b+EZl+augDxQ98FNNNWYTtl2gd\nQ3orxdgjOrj57u4URPOkFWClZt3ZcGhj+qIkjk/MePh/fFbQdJ0SAQKUt/sb\nx8YKKmcyqU9EAMJzFhYaaSH8k3Ll5BtnliDKxsvxpv7G1CwVgIXKoqPk6b/3\nusrUMkmpr2UJNwso9XHvRJvZGpNwJ8jEhvLZlYU5EepP+GJ5ZdBKvgQlg4k5\nG4WXzDxD+WojdjDfpkyR09SKYB4XleOw3ih7BDM5wlsf7XHMMlGFVk2+V8TP\nKS+Cn8Mwo2AC13ppGDaWAofDOY0ir32sJCrvJ4pQk4PM9VP3E5t0zF1ti0wa\nG7jWfFDvlHvccRe9Br45kT6ULSV4X+QxiM18Lvi6I+xK9MvqV2t6C93NDAzs\nOhLR32nDkppVwjFus5idzKFyCwDVRH/1jl0KLwn1kptrRP2Jp/eNNXg4P1bz\n+6rkBY7ho4nyrP/IPX9IG3V6RMhL/aU44KyFKqN/K9scNFZAzT3kuhLhLOmq\nZSJT\r\n=jSCj\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDkTeGAuNpBrD7UphCKJ29qjieDN3tTwl3YHe07OUCINgIgX+btmhgpvIpzkNRn0qw5Xs9bj8aWdCXV+Vb/HNElS5I="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.1c494e567.0_1576193810122_0.7905373557331423"},"_hasShrinkwrap":false},"5.0.0-canary.c9e98a125.0":{"name":"@material/grid-list","version":"5.0.0-canary.c9e98a125.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0","@material/rtl":"5.0.0-canary.c9e98a125.0","@material/theme":"5.0.0-canary.c9e98a125.0","@material/typography":"5.0.0-canary.c9e98a125.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.c9e98a125.0","_nodeVersion":"10.17.0","_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","dist":{"integrity":"sha512-LCwO7sHboE431ojlG0RvtRy1s1qy3QIAUHWy0eSEHXpZKz/RpqGreIbMsLjh5zzC/RQ1JkXGXvgEkfsZ2UZKsw==","shasum":"03357aeace176b4fa40fb44ddff8edfdc732d125","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.c9e98a125.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+Rn5CRA9TVsSAnZWagAAbfIP/jD+1Arxri20gwkNz+yN\ncq4UvlUToLTp9on2FN0mKbEkTadczdOMCb9NZcTJVfuhrmyB1SDspu6s5IBb\nt+nv0PfV8v3OrEfQ1BBoiLwT8hWRify8su/zzbepDlPfLROLCI4yA6UqzmMQ\ntBFqvFIR+BzgZDKMaP0rI7QLbbXn/rQMyZMBHTPmeYmfsqsMOODQvvU6XIMS\n0d+4uIb3vairBS2Maco/+Ui4s67tPpEzrZSCC6eH1wWo1cnEVJlZz4pwgSAF\nSPDi7SSQ+jHNEMsQgmzvGAGyW9SYxwhu+P1mADWzAlo6TFla2FRP5/0HyoTN\ndy746MZPx1hQT6a2vplm14XKAgfD8/YYK4GiFKp3kUKQR/AoH7wZzBJmNG4i\nS6y1HyQ3szM8xj/XEBwCRiycBKatTDzuzq9SUd3dB7793DhtOhXgQL+yF8FS\nnR3/pTEt4kjgEdsT7bnC1faf6UhiXrv5Xl+wAYgvk0kppDfa/qMEBtbjq1IL\nxEG8md97hvJgEXPcO/tVLflY4HgrwPffYon3ES7QE5/iPNidfkR/QImGGCEr\n5UXP9yWP+d99ipJ0xq6y4EZ1fx91WPkqAj1C8aaw/etEZ+hoEjhbOnn1fIl8\n03kU03p3ARWkWLLGI2fDlgzChkaWqDP5uy/vOo2ki+Wx5pON4HudtaOxwat8\n3tS4\r\n=RkrL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIG9uaRLC1ojD2Cco5aJ62L6k7MvVy8NzFaVSW55gkLkCAiA6iwHpBcn/AXfQHfFW5tkSc7SnxPg+VXkbDUhmzMrk4w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.c9e98a125.0_1576606200829_0.06830178195256553"},"_hasShrinkwrap":false},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/grid-list","version":"5.0.0-canary.5ffe8f7e3.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0","@material/rtl":"5.0.0-canary.5ffe8f7e3.0","@material/theme":"5.0.0-canary.5ffe8f7e3.0","@material/typography":"5.0.0-canary.5ffe8f7e3.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.5ffe8f7e3.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-AgTOKZVXdIjTKrcoMTPJkovInV1scx5uwPmha9GxRkgLXmMEh74oYt02BZ+HW3rUAlK1uybBWTF6adE5PWhE3Q==","shasum":"021160a295d885106cf59a6fed8fcff038e28b30","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VezCRA9TVsSAnZWagAAYTAP/ikMQM5X62LtHpcilgR0\nwc+WLsIWUG+qJtCqsQywIwTElG8No52YOAn2l2YjS3QsR4242hCSxv/spoBf\nW3DLd/oENmOAEYzCV8+2vcwt45zqsCwOozHOQ7IcvLE/J1BAPwSejDI36FZu\nz4NPI/+ZnOkWAkAn9JkD6oa/U7qDBXxiZoAU6ko6/nNExV1zSzq6KfHheBFq\nwE9n7GlWciwaQchkXKFCngt+6IKj7H1em61lsvingMxsBgNTFDiLoOGQSNUM\nhl+9AThPL7TPds6UTMbzvLnT9qwrwTwZwj6FXhNQHepa3OCeDiKysBuPI0uJ\nlNJr+vHgmkSLV+pUBcNSg399PJb4hqKhunWuDa3yHQKZ+xdhtK4ZNuERGMyu\nI4FmgrXwhy6A8W9AiJDJk0QcPmdwasA26qXoFmwlnWTobfgEs8nDRHzOlMWn\nsJZqge5pVasKpjVqHl4aFPJSw4Y+GvzVN39Gx1iETo2YxTsPnGa83s1MYpW7\n6O7+HgRDRX74L6YY4Fqa0LHdMTMDMvzwwa6dKgi2jBlrJ4kHJEMcdaq/6+7z\nb3008/J8ztT9PHbac3tHnC+Ph/s6e8BwgE86xjLH0WwEUnkDJtlySH3lnKUX\nUQegW1xXi2hL3Os5vzrSbVy3EZpaIn/nXfnHsdwEY4dFqnUUE0DHJd4jLFBt\n/UZN\r\n=8kJO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDy9Xk+gtx0RCDS2A41B+9U5xDtSqZlXCPrGEyJj6RtEQIgfxQVBfUmn59NHs5G6eWb8h5nOKKrP3rhKoRkr0103jE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.5ffe8f7e3.0_1576622001900_0.9531886385063251"},"_hasShrinkwrap":false},"5.0.0-canary.47949b08e.0":{"name":"@material/grid-list","version":"5.0.0-canary.47949b08e.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0","@material/rtl":"5.0.0-canary.47949b08e.0","@material/theme":"5.0.0-canary.47949b08e.0","@material/typography":"5.0.0-canary.47949b08e.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.47949b08e.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-I+U2JfNHHS1Qswd3zOPRYyKTdn96sNTYvBvjfGMDUyObhe46mRib5hOIIPZc3Tn/H7G72OtmSGK9ReQ5xLtwxw==","shasum":"cfbaafced059f1abd723562ff52b47aff1ad8044","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.47949b08e.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mSZCRA9TVsSAnZWagAASdUP/2m9t0oXNTbrZjePH0LW\nRqL2fqmyKCfPmQ47ZhIPv58DK1LvzyS6EltfMseInaFq6sJOSPQRbjYrvyuF\n1l33m5SenaUC9tsFa0/IC1GcAp5goFhRmjdmRkoLMPbDP+ndYqg85yK9KHyC\nFPl9Qhn9IMeyuyIWmxzBUGkqH61kKsxdbJRbQFvsQcH8zy1QQmQCgu1vHinL\nghUgGoyZWVfSOyOt3UsKtDiLQqmhGpqHDDOXVf82fpR1QUUsKWFRVuYvQNfa\n5rnyXbmn8NuDgo+1ppVD10w3w11aAesaaiC0PExBuaf5PePLhyMaIfuaucf9\nHcyWY9dAJ424zLxyMqTLnJadMTVbeuoEzTwfQawXhARqUvybGPosdK4dCWID\nW9ZiKmovKpfJrcwdwHSj1DmcBuYmgE/XepymWxxyggEmabdNXk4gSqVa7Sbo\n6bkN1H3BLSKZL0Bbu961J0t2zZk3lsrj/3tcQEj74CuPFMMm6UU55XaEmTyq\nd8w0CvON90gRdYiU956zv2ArU1HI8QL44fSWtwHdLjsYldZCBuH4BAThZpVa\nMJ4c3d/TWaKlw3+HV5Ua5If60oYepB73HvnLnCxY7qhnyOfwPdXvur7hdFyJ\nMEbcJrByvSEfTKq8DxgPN2Gx/m3agxHDpTVNsX6jN/JqXiYGZXNsEANjUHD1\nEKU3\r\n=fKz9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEaN+xz53UAdtbKf8ZSFvIN6TvCgYvf7leISXrc693ZfAiEA5JDoGNtZM+JDEMi1TcahxghGO9Sdy/OqlvCjnMojR6k="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.47949b08e.0_1576690841633_0.5611081495338843"},"_hasShrinkwrap":false},"5.0.0-canary.b240bcc1b.0":{"name":"@material/grid-list","version":"5.0.0-canary.b240bcc1b.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0","@material/rtl":"5.0.0-canary.b240bcc1b.0","@material/theme":"5.0.0-canary.b240bcc1b.0","@material/typography":"5.0.0-canary.b240bcc1b.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.b240bcc1b.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-cJVRmGhmMVGyZVSPAnr2ns84v7NGYvUb2cVwI+AdUajvndbEg+TD/wbv3qX4ZfjORtj2+BAtJnSTeg59CvPPSA==","shasum":"a5e021ddc291085120ee2fbe2ea05025c219ecf2","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.b240bcc1b.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nskCRA9TVsSAnZWagAABjoQAIc8YGEFk0WmK2uPxrUt\nGlh5E4r2fR3N32Qhizrrm5OfY7eff77itCQ28WrJtUgWYiTE0OTHDzw0herI\nIOHqL7aMfFbcy7G6x7dV86FLDdVvBAV6koWDHiWLDJhdcXzvqfvKPpOBcQEo\nL7uq6iwJaQmAmH9DaOl70mQUsmGuJL63oZOIf7GMAQfkIXyYnRcwRhZCc3qT\n/pA5F1v08zt3xCBL2Ds0rpj1ThWEu9ORym7/Ivw14e8d5QqPPAmudVxSFF5A\nWnTjmv1dNuXcCNBswIBovBvEUPhVp2oLjk6CdsBf2Z73YIW8r7nECQ/3rTbS\npGTueshb7qNovTrSEYkJf5sxfnVofA26PfJoiHk6gVDvl6B7+3NxPxcK5TuD\nt/yiVCxJAv/ftXgApgKnuwfm6BYdwEEGKZjJzjqyEYq3HhlMma5uJZLutz41\nR4pkmd+4YyzA5zxcn0r2bit3ufH531lZz8WZqgtneKV8vkTnLKbYknKoTs+F\ncFgeh/22dkTHmFA9xSa7MPSE9ayAZ5M2kI8Yt7HZMt5rnjp8/76aBjujxTGH\nlGsYg2p63UAkZBIvHtvzvb4wnWZxpASeGw/mkJ7+exSTEr3FfG/JN7adcAdx\n4V8d2gEaSy4J6/lFdDqixzb2rEbcsJlxHma4Kis28Sl7kr/Ov5hOZeWjyWqs\nfrrL\r\n=MnDP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDl5a7InqKuAqhzyUGDiOaFinkFjlrZUTeOy10NO/Z5+QIgfClCrKV3iSUwT8kBueJxKgXJunkkQ6eqyPjFwzCBxBA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.b240bcc1b.0_1576696612511_0.824768591855257"},"_hasShrinkwrap":false},"5.0.0-canary.391674a26.0":{"name":"@material/grid-list","version":"5.0.0-canary.391674a26.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0","@material/rtl":"5.0.0-canary.391674a26.0","@material/theme":"5.0.0-canary.391674a26.0","@material/typography":"5.0.0-canary.391674a26.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.391674a26.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-OD4u8XOpKXeo+35ZFOyToZDd0qDmQTsaCPVnjdC6dDheoFZTeK1GMMPCyBFBM+jxvkkYot7Kf9Nijba//iZjVw==","shasum":"f4143c145511899f15f6fdee1f56a2985d2610ff","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.391674a26.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nsvCRA9TVsSAnZWagAAv1UP+gKIvXf6JGt4zBhJ9Y7p\njWtFNJHlqMZVZzoabF4L6VYLab0RgOEa/Trq/vovH8oURRwgoz2aZxj3BZyY\nn1TawJk3RZ8m8ialR28rHSagJADSTL1VVKnC6jBv9zgYqecieXXKiTr8SfSj\ndG/Uy9LbKm7uf160sECdBp2UbErUH/0IIfp82t/U0dhCovd+BFJblrxCk6Rq\nNLoBickaQUG0kvPOoO68hyLOEBf3po9m5NE41WqBZYG6vsoNV0fO4fAHsBEx\nF2caSz8XJzoYBOq96FIzDcA3L9nWlvwV0TdMkv60CmLawkNUZnyvgw3UFkeb\nLcAnnDsseY6T1xl8CDzWT7eqHhqJFBtvR4tzuKfV9ROYTmzksnAqARKwPSv4\nyIHYNaMevc4lLcC4GNfit2ap1HCS50L27PkFkv1h8Ho6RZpqIsFf6dK5QLmu\nf6e+Qh3lFz4BIaxrp9sFioBga4CIAW7iGKu+IwVnUnk1a9u5y9aoeX+p+2mj\nKGj/KfzOZ4+XB5+8I7yJF1O/fsfifZMh58yHaeSXRU5jJObaN9EFLgAAB2fI\n9l6zlerdIUpjkWa3XlEyYPaFLuOLeTQshZcUxwogkvfuMSoZTBkVmhg5U9vr\nqUr9It/6nMSV4AnKOypbUiOcIqWnP31no5+OeUYfLfvhHeOK9nfx0ZLCs15/\nvu9Y\r\n=h7bu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD5q5QkzLt1Nehf/Ivghn/2Ua6KuPui0f48L0YvBw6bAwIgZ/KEcblbw0fJRriF/VYgclHAeBUed3KgYhtPh0AUFUU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.391674a26.0_1576696622716_0.8995776850265136"},"_hasShrinkwrap":false},"5.0.0-canary.c4837746c.0":{"name":"@material/grid-list","version":"5.0.0-canary.c4837746c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0","@material/rtl":"5.0.0-canary.c4837746c.0","@material/theme":"5.0.0-canary.c4837746c.0","@material/typography":"5.0.0-canary.c4837746c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.c4837746c.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-EPjma5EDlKpyqblvgif4c2mZiJ4YjglZVxNxNoOKLPQ65Vk0tU/ZSRzA51IbcVQIYKyQK9eiRFNHRTRirJ/afQ==","shasum":"2b6559027b602ee06f463f05ca56706d89c74b35","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.c4837746c.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n9pCRA9TVsSAnZWagAAse4P/1ty2prKj5IxdzaDUuB+\nPUs7AEO0i6o5559lJG3Sm8hg0EcynfvUKwpE9bqid/w45DATKUe6Mqwm338C\nnTeJd7+5Hefsahpn4gX37PqGUWRqAD1OQrnPrTHd3qwtvkfSx8q3jHBv5pcp\nBzcPrYJyIFgLGTo/BMlbQelC5dNmr8U56PdbDLjOBObSz4lC9A3EBV0Oj3eS\nnhWctw3PESncz8Bueyr/jdYYVHW47i2TJe6Fr/B+MdkpNTIKyR6X8YLaAQQ5\noCblTjpRwwuweuQibVkp4Fi6nQv3QzUrGPLwGrUkPucpO+mEOTFBFaPpaUZq\nrRMew8jVwBkeIQDfluz67Z+qqlN+napnQa/k58SbLpBVblOIGqNpaDXlYwIU\nq/s1QOdX5NKl6Z1Vdb11WXVFHtME5vgQjd3ieryUGSDSgmGHCDupKEGzkkl0\noSadnTNLy3tSH5NOyOhxnEFd/QLpaSvWXN1JmbfB9j9jp22jicfK4NkXk2F6\nwVZ9INtCMNxzZNGlETqd6WEWaQVzpYyhpz9+wKWr5A1fKd3uT1j12HwFTogt\nX+JuDhsISL7HpOmdSM/reMjFYlDenPzmt163Yu421jvu7CrOIuY/A2UecZ5F\ndtGtY3EPK6LFfx5NQrlyTvKHPmMF1oI3xWePqwyXTJCWQ5lje0DuIsNeLuED\njRtF\r\n=VUIL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+r9w0XWupDrUN8/WKEJiVwteK9lzUgebn9NUFC4VtDAIgYAI4fxZgPY8fnDb8vgHhMCPF2vnFxkCCzgWRMPjfBDw="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.c4837746c.0_1576697705180_0.9163951286090164"},"_hasShrinkwrap":false},"5.0.0-canary.e41a70425.0":{"name":"@material/grid-list","version":"5.0.0-canary.e41a70425.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0","@material/rtl":"5.0.0-canary.e41a70425.0","@material/theme":"5.0.0-canary.e41a70425.0","@material/typography":"5.0.0-canary.e41a70425.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.e41a70425.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-jbXWcfK5DyXezTDmlm/lrL4/M7lXgXGs+8dmMm7YMMYaFRW7c7sBi5kymnBQCMrd8qORbNggGwkOsJXMeGKdEg==","shasum":"4101869065bce0277e6fee2a06e1818c39215480","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.e41a70425.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rQtCRA9TVsSAnZWagAAO2YP/jo2tFuj/NJQlXR955FS\nIpOOdvxIUL5ifaMCyoPBlUvAS90zos0QMjc+czkqq8yzoD2+rrzjDP+hkjpW\nJMoxyU7DHII6W41Ykge9cfPqrz6GBoxZwpi2ZgkRqkPzyy23q7AJcLM3BrZK\nEQyTdmRp2IDGZytwM6JMSVks0QSImJPYZCD5ET9f+Yvx56/hiaxLUB1d3+fT\nx9RwfbJWUTHu03WD2ZybT9CLyC4MJGb7IwJRIQa/I0DRzGc/QX47m358IqAq\nogUo+j4Gdqi9NZZV02T142Itp157P6YyD0V4RsoVvxYl8AJO32Y9R4WrpT5m\nZkpY/Q08yCG3wRqK8oJ0Gysnq7O4W/7UpaXwwBUa55JCpEzQGIvf8nzDhCaL\nTZbFnyT/OMNrtrhn4xIuBJqCyZdOLt8/m2R235Jr8LVbbQm+M36hs/OmNQb9\n14dkbCQVvS2hd/tiX7qkpFm9fYM00HMgdz53lTWL0pMyGtD9IcwnR+iMTVd1\nZi2ZynJYNADMRPgs62UJMHvKfBvbzywmRVWVbsSSau6sGZCg6gDGkfXaqnPf\nFhaA9w9wpSx1wNVgxK+SqUjpLHHGBTYpXU7pSQ6QmShHpyOUv/oub06RjC2L\n2u6y0d18jFVnsUBW4qTn2NTSykO2cAzqqKYS2JdogES0v/uECqItiAaeJQwT\n0FPm\r\n=t15a\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDKPUUSAdgw2Y8WZOrVTaPQ3Rwv64KBcEP2KPwqqmvfugIhANzSNG/lpo7lWlf7xHqw4kFwTEUY+RGycZdeuMa2zFoI"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.e41a70425.0_1576711213073_0.3798740398629681"},"_hasShrinkwrap":false},"5.0.0-canary.bac43eb43.0":{"name":"@material/grid-list","version":"5.0.0-canary.bac43eb43.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0","@material/rtl":"5.0.0-canary.bac43eb43.0","@material/theme":"5.0.0-canary.bac43eb43.0","@material/typography":"5.0.0-canary.bac43eb43.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.bac43eb43.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-/p6XwxTBA8q0Yq3q28Bja0Ly8wzd+HdG62XVQhfk9iA1Kb+1hGuyotpA1nhLy3OuDiC1jGFDodzUFjGcfkGaZw==","shasum":"b261dd947d50d8541cb50b8642be700ff4c68a8d","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.bac43eb43.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rUXCRA9TVsSAnZWagAAp6sP/1Hn7LlXt91SsOFJwgnz\npnkzyTFqzqtEgsb5PyUXV1QA0RTuQdDtv+RT0nmKOrlo0N1oppTVZnCoT6l5\n1VI+hF5JOcn01+Uhtj8v954RsAYwUjJ1wCHC7GZVoR1ZDXY4MinZpRUm/bJo\n+qssPgECLDuTnocVPRe8f+4v4cFms4HqPB1MG2+BMc47GA6FgtVGfIBIFOgD\nUiC+RiCM+LtYsJJGKzKt5M5H3OWwUEWNHlbagEa6TQqXf/UAwmCg7rNbsyHg\n5flXpdFITWdiHyuPEQ4JJ/UecKMjYKT157skitSJR7exO1XBlifdfNkgNoNX\nmr/zlGtaipHxANNrmAhWmCwFnmqNHivuaZI0c6T+DoWWiJ+OYlZ7SPW4+pwC\nUIyv/7CA7mGK+mb69OiCJpj9fces8h69wa1Vfo/jIJq5F2/4LN3YwcHkle7u\nUWxXeoX/a5DdAkFSo+eiGS8X1kJ/RyYXhNqUNFDofm6o7Pepdb+oGbph8A4d\nbe0ZQI2G7a+vI04UUhjUX2Ebn03pQfNfn0KBaKB9PI6A0oAQ3jMheUuLRKI5\nR1jwi6QRmLEM5qF55nsXQ+GbLsW23GSh2f/koFhf4x9Dru7djojZSB6mIyRV\n+f8uNPn0jcy4MVkeYrNyVti+a4o2O/lB10XNv0FG9XOi2jF+qBFSzN3aTmhb\n0vvj\r\n=tnAB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICkKVKabSc94gq3rUyx0FwUTkeQ251NjaOvWUQEpOctLAiEA86qfLQLL49EH5NxnDV98Mo0pM9Fsi4xD+Mg89RC1rLo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.bac43eb43.0_1576711446922_0.12953781301352985"},"_hasShrinkwrap":false},"5.0.0-canary.2e491de55.0":{"name":"@material/grid-list","version":"5.0.0-canary.2e491de55.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0","@material/rtl":"5.0.0-canary.2e491de55.0","@material/theme":"5.0.0-canary.2e491de55.0","@material/typography":"5.0.0-canary.2e491de55.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.2e491de55.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-/86CVe+jYHD7T/LHdVMPNSRXO3JesQ8l17KWw0BE6aMcWB8YQUnvbG1c/2z1h/5PlnVPpmc7MZRlN8QPVLWO5g==","shasum":"ba48144ed1b588d4a595bc31ea3e8af60c580124","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.2e491de55.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1XOCRA9TVsSAnZWagAAgq4P+weNQzRxOInjFnrylvjN\nL9F0jFBwE/BAILaDPIElmQIOQgpnwURg6h4ZU42mawDZW3AZvkVrEM1RF4yu\nDsa4eTSGkTvZwUt4LFg4MJoHUSuJyB8M3B1kc0PkaeJprMyboVVW1pWTQtlT\n8sNfu4csaIhIRS387USu1sd+1qYanVCSMXWuGw12gWPzsLk7L3EaC4uDJpWe\nyzzazTLJf7JTkwXkAccRRo1rdq/93IBtKRSzQdbt6FGbTdI+hPYW2+YuDoDu\nJ5aZ1RM3fP8JTdRj9qhm3t6R3timOxA1DW0IKykHUD1+T5XT8soeIFchbMHU\nBhC2+9noNUROuEKSP0f+jUCWQ7ZLucRXARX5uBiGAPem7EsHE/mvXNAzGgPk\nK1Ykhj1F/c6ktkNAITFyzOVFH0Qd/utgNpExg4hfYcUOjPjy0p6paHpvndo5\njOvbST+CQs0u5lzgswHm/rJpb16QkyjJgJp7kZ+mBhL5noSIO69/J7ndmY34\nhTtPfrXXE0MopISLfgAr19uuuH32y7+DwBEsko9Pxzp9aHX5yx+xF+IjW+6y\nGTBlmUe4oCW0JzXFItnEFwyfGvmVpXEWoS4q+a0g13QZaXZNWIBEt7kCuHgb\n+/C4nBhglMEPpjq9n2JIDD/3JvpLHlQTaqKZNj81EvPhxeKUsCBl7bUgZwEo\nExUu\r\n=X6Hp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCercUX3hw6y0cW305rvrzxvu8dQCSD3qXpXXzTQfjanwIgfgrYwpuaq8KX9vYjCSOXklgVNU6JK1KSTPM0YbOqol4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.2e491de55.0_1576752590508_0.3101261107031925"},"_hasShrinkwrap":false},"5.0.0-canary.ae101c144.0":{"name":"@material/grid-list","version":"5.0.0-canary.ae101c144.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0","@material/rtl":"5.0.0-canary.ae101c144.0","@material/theme":"5.0.0-canary.ae101c144.0","@material/typography":"5.0.0-canary.ae101c144.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.ae101c144.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-8pdkwqPLZ+Hy5VyN/M8JKCrAkrL0FqP+0LSkG4dFcW4c3DMKRVaEaECnyoAGANApq8FKF1svqGmdDQOrKQDRgw==","shasum":"4b39c30e4923382d19a3dfcf7f47b7b336933c5e","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.ae101c144.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6RXCRA9TVsSAnZWagAAfcIQAIEobfbzsG00vjfKksnZ\nlYWgnXlSpGEeO68sGqnarPubbYaU2tWt/fsG0HbB1a99zawbaSqyx860bPlv\nPv9+sTEX2xEW7WfJIGCGm5zTbYme+4hjRez3rsuC2ZmnTe7J9bdF8nEH3t58\n2QKXuPRvUK0NW9RoFzdbYzAtsi1rBnnR+d+9gsrYG0mosPsCQSNP2f0yfjj2\nVPghb8YxP+o1/ZeLGANwj+1ucsHFvMmHyWLojfARSi8imhh/96xVB1MLI1EY\nz34suNQrXyv6Myd76hqI37W0LC2niH9Uemo8yvXHzhg22KslYGxB/MR4LQOJ\nnDL/SiVfHmGSFInHxVj9Qf1etdXB7GFB8hpjvWcil9ILI8u3h6R976SRq6wW\n+QKn+PzYCCJvTR9mF+i3C/zjW7DljOy4ZGZaRIV3vv2qcqQDWwy4FyaBd8zd\nLuDOmPhAmoHlQCMJG68dgtlSUVgCs+zCSD8FidREfXA/LYj7v/aFvceB2FYU\n8K49WG9WkToBeqBZRmPmo3PUt70m6Q8jXIkNsDM9Au672Sr6RMIBzX9UKZU5\n+LBL33DKG3aQEXPiokrek3My+MZz3FK3YPzUWsxfwxQQbzRF/4IrFkM5Oag3\nr8E0N+9DXkUj8mA3lbSOPVcFS2f3+rTfzGBgdTPmZyUg8lSLjCX/M6/91mOE\n2AAP\r\n=X3Hi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICrwscx0VroBmOtzMyhGCu+eBgmlCC1Db0b1mLfXfxNSAiEAzyBMMfH94e8DlSCIHV7PKTWgtZ1hiMYZwApy4DyKs3Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.ae101c144.0_1576772695618_0.9241088248443345"},"_hasShrinkwrap":false},"5.0.0-canary.a51c31f26.0":{"name":"@material/grid-list","version":"5.0.0-canary.a51c31f26.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0","@material/rtl":"5.0.0-canary.a51c31f26.0","@material/theme":"5.0.0-canary.a51c31f26.0","@material/typography":"5.0.0-canary.a51c31f26.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.a51c31f26.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-5iBVLvMF/KFJNhXOFAaU+jM3wK8m5+jPldoCjCuQaQzyuv6TVtJvnLpK5uDLBXojkriIHk/8xwi1JSiTNJqwjw==","shasum":"88c06d1a325efee003805385eed235ecca36c358","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.a51c31f26.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6/rCRA9TVsSAnZWagAARyIQAJkbQ5LgJT277sIsjw4j\nrWmP0Klb9O/0620XOINMIy/rewy3Z7aonMufsn9jLOHS6/wcQmTHHbx4K957\nnPytfYUUsCoHrN+7GNVatNEbt9aDdCRI5mse/M7abPDFkeHmxxSv4scTzl9e\n0OaYRuIQlM58zIfHRvw+xyNn3SBfEqDvduZFLYitQSpu0AVaabc+ek64I3zW\nmWtDljK+8WE5BMhQ5lXGh4oEM+/y3HHsVBfKjoLhGw3Xt6tbgiWWgKtWkAXO\noztyj4c34xO1jluyLEk5qX4wgFelcIPU2CC5/163sgPLaJAvWQ+va2YcNFrC\n1UK4XJOfv1bGmcsl2MiEuFNYrMCgfyDC6Ce/JFjSNje6/6UPbBox+mvp3MZ7\nZMUrD0HCHar684ulwYFxfw0lnGHCqmUV7IOsHKFdO61DfNW64j3HJoV4LaGj\n/ciP2tICBgR2/1fER0a7AO5HBmY5lO/X3pqZXyBG53R5+IOQjrnOOhScjSwY\nKA/nD49YpAiKrgHFC39VnnWMzK8EI2pRNHFhYNATwf6YqzIsjRIRLVBUI6G8\n6rWctzmP/18QVYNRo1ZRm59DO6rVOF3O2xyySG4vlZr6Q+anZy6VZT64PsT/\nvfE+3Uj+2ChPWug7xmlp32gICrds83C77QJxAV8DcgVjyNUgNtLdNpTXidRz\nowne\r\n=f2ps\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCN0rrsFbNDYgVxUvOkbgcJRaLfqKg/7lxsNl8mdT8UBwIgBmRG69agfXUZqysZ9XqLEVkyJVL8GQdXY+Aq1/2SUSc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.a51c31f26.0_1576775658791_0.2208148324399335"},"_hasShrinkwrap":false},"5.0.0-canary.21fc4e13b.0":{"name":"@material/grid-list","version":"5.0.0-canary.21fc4e13b.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0","@material/rtl":"5.0.0-canary.21fc4e13b.0","@material/theme":"5.0.0-canary.21fc4e13b.0","@material/typography":"5.0.0-canary.21fc4e13b.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.21fc4e13b.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-rNHd5Buv3z2Hipmw1EdTw7Uc92wPpkhqohhSyCwA2mSlzSGOqut0eDIfBbtdlrxdDIMPB2poxHvkV20iAenUyg==","shasum":"107fa103ad7f11133450385bd8624c5e8bea334e","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.21fc4e13b.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++stCRA9TVsSAnZWagAAEWMP/R+kF8JH8X/7J0ceZm5E\nPqJXq19wmzg/Dj6WnCuyZMq4uINZQPxGmz+EQitALa5Cak6O1LNUJqaOAPBM\nSxDXTmB+HTrpv/H4YWqKFQMhENZTPTWHXHHsA06kAww96/QGEQ+USV3Cbuv1\nduxgVUsoXLF2EIS0YIWfveO/6WEX0xcaMizvAYTqf94ydYvcXG5PJ8WUVSfa\nKsljD9kaAgTAkMgrFHxgrSnbFCq3XQm4Zn1YqiwHBwvhARZoCAYYS3MN5NyY\nH5REMzRFPWDu0XGr5FwxNkWFj7Q2UxsyJg81khoE2E0mwDOcxY8Lw9rnaToy\nVI6UI3p637OmnQrKza6XLy6XqM7zUpFA+MRXentSJhWkVepl0jDJZtKRDDSz\nsaj6i8qIJXdZqH+30R/na+rhypoDL96GGjViDjPEKy1n4NT81xMT+j/uw7yQ\n7NYKFop3XTh0N53kxhFHhr1Cs888WojVn7uEHm6GhCyFRpx25/42PWP3i8AA\nZUI5lCiNnsTK5rQvkEcYEFyKna9S8E1t7OdD9RD52xsF7odT2aEO0Ii1/l45\nzrc1ucarlFbve0BJANbVHR42KT3V4DYmOSjMyqVCBShVVWGfjTrKAPaAo57V\nKBt/DfNehV8V5mYhtnBsSiOj6XxnTismLpY9BS/0S7aBrh0re1TxEDRG6gWW\nA0YR\r\n=xcM7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC+x65nsuDfSYQuvCzzplILAMt3ELU4QWj60trK63F+CAIgV+4y7R9k4XJeuROSA7rTgO5TMpO0ztD+QNnX6Ygbg6M="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.21fc4e13b.0_1576790828996_0.5591384231217584"},"_hasShrinkwrap":false},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/grid-list","version":"5.0.0-canary.d2ae6e17d.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0","@material/rtl":"5.0.0-canary.d2ae6e17d.0","@material/theme":"5.0.0-canary.d2ae6e17d.0","@material/typography":"5.0.0-canary.d2ae6e17d.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.d2ae6e17d.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-PN98ad2tUwkvTBX2Kp6gHNUgpuVw7QLEmbfOSIb07ad++BzSawHXR3kJdgs+7wx9tvJRpxY7L2u6T3Xcl895Lg==","shasum":"2f2d6ffa280239effad8d1e72f369794f98233fe","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/iLCRA9TVsSAnZWagAAVOEQAI+vWWRt++Rgq28g10RX\nsiD5rm2OOQubDcjtqP/1bkiv/y20gr3OZJ/7SuwYpHUGs++P1MLx6UgBiezU\nvE7B8ZNViERFnR95qfSX8yvOlg1XsoDvQTuznG2IvhYvFaZKiOrL75tIKbab\nUOGkHU7bZq/aKjSMGRdpcbi+BgWiTVIv/C98qQqY0j0Y1JMT+LXmSI/LWoBv\nrx0KXNWuUtLmLH67x/bibG2LcXw5Iiu7+WE8FHDYJnRkVPwss0Rm4QJry0hj\nKF8cEmvlZ6qFvaVJ8I5Lfg7H6rDrlqPumuYmYMGIuAwHL1i8kJ3EpojGkpe0\nvsHU8+Epr/6VJuG1swRz6h5TLh6Hz9OIe/pPXS/ycIee0lXOvjxHVh4LRZSS\nJVlzC92mSrjaUOnW3ZtDq0yc9+BUe2TFBMcELn9feysCcwjhoutxpMLIr9NM\nu7SRtPZbhC2tEsX53UkNYDDUG5jdD7vzdaxBvgH7pH830NCobFyatPNurPgp\nP23+4qv7qL+1+Gqau3dEn8RgQJLCR3h7vLRbsDCz2bbv6tqJSBCV2xe4FFwl\nJCKmEDcTGmtQSA97+dHxkiFUNugGsBTfvqnnGMD4FV3s4qXgX5Qg81Hrh+6Y\n5Knn0lU9iAxNALmydcHW8D24EVOnCkD18Un6iyGdLVIFlVSSMDi8m55Kwclt\nK04m\r\n=drvo\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA2H6ombG2vG29W5FVOQN7zOWf4f31MeVmKxR2jmpsSMAiEA+QiSZsvkm9eb8E7NwzI/nwl8+94CLWviVDhud34JG8g="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.d2ae6e17d.0_1576794251301_0.7418852572474302"},"_hasShrinkwrap":false},"5.0.0-canary.ba30399ad.0":{"name":"@material/grid-list","version":"5.0.0-canary.ba30399ad.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0","@material/rtl":"5.0.0-canary.ba30399ad.0","@material/theme":"5.0.0-canary.ba30399ad.0","@material/typography":"5.0.0-canary.ba30399ad.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.ba30399ad.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-E+ZpZ/bQBZW0sERus6D5R9E8ADcI2J7qd59PNkAipTr2cXaQXnssuH/h81Lc3gNoBGXYGPRhYPYrfjVCborD9w==","shasum":"20307d20f43d5e487a3314e612d2a058f3093402","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.ba30399ad.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B9YCRA9TVsSAnZWagAAPuAP/1N7Ex9CjXttFJZ2m9by\ngz0hu9htiYExTuZqEfjj/1EsW+WP/aH2y7hn487v13lByuD4qq58kAsLrPRm\netZ5etvUVgB5FVp+VgunhTNtoKC2VOXmWG+fi9s9vvWmi/VEBtvS6js9tOcw\nijQ1fEqIMCHzGUwQNCIxqki6ABhEaF1cm/JFOLtwzAIUuXfrin27U1VWll/g\nftPrV9ffG4NNpQY84DHN1Bj9OUq9gH2X+iJSbTll7LxSmwcGB0tj2wXmbcEQ\nvHVCdgddNHMK/udIyY0VHncYwoRa4pOAEnbqCXI6djGDCEBYATmifE/WOOh2\nDf0Oy5u1b0eiJzcRySFhdBqdvcnTsXs2VZrLToUot7P8901DBUznBxysgG56\nts2fqY1C766bO80efSPXXIHEOCu85GqgwWCwJ8a7r9cNZEtLt6D2ae4ZrMno\nBInL383WxYtHEnzSNpuJzg7sinGwTUjhHHECrKtJHuVIneFTQKFk04A2dorT\nPVFgQNyZtBf51NV0gaAnSHfc1hYiQ5kisLWDlXZJNES5HIyLNxKDbvD3Cvtq\nJ+oPsFMIFrDA2D59SctlBuRq++PqEiDqXXY3iRUFCMZ9+1JZAUYUVaJwgrpn\nuFULD/B55TsUaOoHE/RK6YbL9BOr9f2TQuzqJgFtP6gVR8Z1iJyIyln+6Q+o\nyGeu\r\n=pT26\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBhqW9xfCTIHIXlJY8kaABeQX2GV1rFMYUzL1KC35dTCAiEA8/WtebvmDzkgIROdudZYGrYYMokNZi3Dd2NXLK7g8zU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.ba30399ad.0_1576804183827_0.13836032046751323"},"_hasShrinkwrap":false},"5.0.0-canary.a08ccec35.0":{"name":"@material/grid-list","version":"5.0.0-canary.a08ccec35.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0","@material/rtl":"5.0.0-canary.a08ccec35.0","@material/theme":"5.0.0-canary.a08ccec35.0","@material/typography":"5.0.0-canary.a08ccec35.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.a08ccec35.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-fh+Zbk4HM+0ImPLanBMvWVQlVNfcLMXag28fdTPSPq7pjDn/+pBq2N0ztbd8qgmpaeRBnrtI4xjyoj+gRLTYWw==","shasum":"3095179ea6bc6e8c811bcc404c2178b50ac374d8","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.a08ccec35.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/Vi6CRA9TVsSAnZWagAAUs0P/0oYI7GfHVMBrq7ijraa\nre0aZi46tfU+qWzEiqupheDz4kYsbZAFa520jzASTdHXukBXzozxgqxioqa2\nuA+bS2aTBmxgVFxwEYhRKSCYbwOK2kASjYzOQ0y/uBL91vQzswGbxkhV7Enc\ncKv2g6RHcFppqOcJr5wZ0IO1hvlIklWBiPcdVGEHh6vNjpds4AzXEgH7CcPD\nFWAGFKbjzmqjZfuJXkUjYGd1qVZFoTyTfIbobyrDxpRLfcRryiBWG1fUHlOj\nRzlFVh6uzxQLFnD/ArknfwcTHZ2m4Fan4jNrLAv9yradfj1Ej0mCecbZbuRq\ny+fJvj7ZMaH19jknNE+HAnLh3JqLIRpd8zmlb5/S0H8Gt4EJ0Zj2H3c2Znel\n4fhjmRNZ8m3LOhi43vb1ZFcNUiMuniEHgi5KIY28Jaie0TVMB4QTA3YOze0O\n6fsSxvpmcIdiP2t9P//Hje9cPkarg05KthEoai2gB+ARYkjzhqh+VLakTpEH\nLzGk8yz4dTVQkNWVWSairpKGPfKUCH/harj+7Kc93w1XvXayCDJA9Z/P+3kF\nuxLf47UD8hWNM67IiGKsGk9U/tzejY7aZbFUzbpt0acX1D2PssWSBG+hagbw\nGrwlPuANDPRa1sP3a8bTfBWORs7vqWTTVubEDe8/PHHMPnurvpixaEKSy7mF\nYFBN\r\n=IUnL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE1xMlz7KgpqirwFVgl7okwENkABqJcQDVLWAzw85LDHAiEA4BQ/BZVo21tdhHxoeH8a21FIl8P4pXm2cDZaF0L7DjA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.a08ccec35.0_1576884409963_0.1842127615670357"},"_hasShrinkwrap":false},"5.0.0-canary.a2f75105e.0":{"name":"@material/grid-list","version":"5.0.0-canary.a2f75105e.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0","@material/rtl":"5.0.0-canary.a2f75105e.0","@material/theme":"5.0.0-canary.a2f75105e.0","@material/typography":"5.0.0-canary.a2f75105e.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.a2f75105e.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-O+YOUhRYphKD3jf6HO7r+24jqLbCr/iJuQqssf/9vGhGTxoOhiXIVckzsPtuI1o951BDktCwr5yGW1TnUwdoHQ==","shasum":"9db417fd98d1ccddd7be5f8ddf46ad95ebfb2b29","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.a2f75105e.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARneCRA9TVsSAnZWagAAHtsP+gJ823wyEmASW54qhGNL\n4goHWS7l91lpPTQS9XKwSW8Mo0NxBabnOAoqXjAGYsdb1fHDantAX7QDYVp4\ntXdxkVsyNszDri9h3vBigFV19gEroX6S/JaUDOuyTIHRDDOaELox/mkGEIyB\npJNDQibgKfwcjOpSRgfM6uDmEOQsOogk0V7wSXvs5bLPhkCLaPCKJypDsrLR\n3MoNjIr7LDaY8MWS3iX67HcQiAg6/joxegGtE4zDK4i06buePpnmRpg6SilC\ngya5ezoESBWbS2yNoSWxS+QX0iS7HMr8PKCzyVYtXpER6o+kEddsbZf7+KHl\nhFiYFgbocu0dDGpYZKGyWl7y5xc6kGqNxLSRYBVdgtytCrTQZay3YxXtpSGA\ndTvFhAbDYBpzpxLXKuYp9yuBjA8pA56dfSwBOTUGGBFbCP2wshEw5mXemhi4\naUKTxY9qLCHD60yh+1shWgwaJoFnhKqan7iaARQ8IHjhXb0gXo7G8HGJR70W\n6jtDyj5eLYim2x58uoIRv5XAuvf2E+jAj3H5aYosyhCHibCdyDlx2vppX5ek\nLEp6OIQRzux5Mjc2ZJwI1OufnEa0OwKxt/kKsMJ3GwLUhgT2UKNcJ2xLJxSl\n71a7YnEdvQfeyuqcSMy5Itr0YrFaJ85I/lNn8INAXdyO81GRVFIHdfsAyLhx\nKoAq\r\n=84Sp\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTK0L+159dtN0GmeysVnzWi+XKpC+qee1ZyPzaByKJ1AiEAmpVyxNQUkOf9stFZbWzmeDgOdPq4bc6XDziMkHHjUig="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.a2f75105e.0_1577130461777_0.575025722872818"},"_hasShrinkwrap":false},"5.0.0-canary.c054a24c7.0":{"name":"@material/grid-list","version":"5.0.0-canary.c054a24c7.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0","@material/rtl":"5.0.0-canary.c054a24c7.0","@material/theme":"5.0.0-canary.c054a24c7.0","@material/typography":"5.0.0-canary.c054a24c7.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.c054a24c7.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-e2m5m7/WN5VCjajI8gyT18nphNDCEncMsdXY1h7p4y3IXhNkquJVMippqdFuz2SeXr/AUtR2Wscr1AkTCKzBSw==","shasum":"69e0eda5767fceb94dbc2073bd090de86b5275f4","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.c054a24c7.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATaKCRA9TVsSAnZWagAAE00P/09nInsQnwk/Rzt4GSNQ\nitNsoTtnjBuHtL5KnvJ36lpwvDXAeW9UI4BZ8h5SPFnI1QrEYLWgJ9vZZAFw\nphL8lhl5wDnAhyi2YxoFH03UTQ4WJB5oYZnV2sud3o7NFrNMOKzf5rUCdEpp\nAw9nyu8U89KTn1kHHfLV5FaKkzDzsrGc+5WaHuk7kDe2LUjLWDhaTLKizeQM\nkejIPeMRYF2HypTz/Prxh3KPglfCP2gMk8ndnPUFq/qGcHDOHx+uZ3FqeUx7\nL3x99nenxT6r+IdrtcIivBLyvjcuMGvMPMgbHfj0Z/FSRO79DGVmAAAlk6Qb\nrh4d1CE75oysX7CzYRu1nZcMnximpO/zR66pUo9epEBHd5pgJyiltDWU+zUR\nTQpSw35sPoJiUy9H2g8dHs9kVYsAYCPSJZ3dABfNR02X2vMGGHxGcECuTanc\nxgue9rvfi5fJQl6o+ceY2lQW4ztexfkr4X/CzjV1vi+osGADpgDkDS7PGLV1\ngVL8ZJp1pv+J3AKgUsIdYCqOwMEwcrEZnt6WPJbqB/tsR7ra3bwIneg3uWi2\nodR6usVwbLZEv6SsJOODBeFfcXfQxO1YMSKf6naw6AdhGQBetEj9CuOXuk+r\ngt22KKUvWg27se4DjyfR0zIsPgL+RqMIA2MWolbwNkznpZSM3NwVxm90dKSr\nMqcU\r\n=aS9s\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBmBgGFBozr52B6tzCpk7REJWTodxlGvm6GVxIqZlpOEAiAJoFWVEwCxEaKeK1FMzutoi2QXHrpx8tq/L8jm37p+eA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.c054a24c7.0_1577137802108_0.3111457773432662"},"_hasShrinkwrap":false},"5.0.0-canary.c6808c51c.0":{"name":"@material/grid-list","version":"5.0.0-canary.c6808c51c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0","@material/rtl":"5.0.0-canary.c6808c51c.0","@material/theme":"5.0.0-canary.c6808c51c.0","@material/typography":"5.0.0-canary.c6808c51c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.c6808c51c.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-9Mfu+KYDwc1QQjtnfpGU4O6cucSFUbnHfqbtdfCM4ZBdDertvVKADq0mcJZCEMgFOx33rdPwGCz9uQXhh2ehYQ==","shasum":"b510b51e1b088de0b3aa74b03ec89ec8ea7d3814","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.c6808c51c.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATehCRA9TVsSAnZWagAA0kYP/jlE5ldefR7SCgo7fJSn\nLLPInL/gq+4BpQ7FZHBtCy0L9XCrMlZPcmPn4Kzxsgis9GpIkp0syMKkjub5\nk9ZQvyW5Wat+QKOSYxy98DMUH6fZGAgXTDxzhQV849gSGIHfPw/gw2Lb5p3K\nJMCPJh9OCqZPtsvNZiMEOfmVreAyyyBxE4P8zvwZ8q1NZfChGC7FAGmHkB4o\nz9vW8FHsuEF6y3hz8fWGw66YfLuAHSJXyqAWQNDFsMGkSWoNm4UiH2ZgAtg+\n3kJAmrdS9pkcR1oB7Jtw9CnGizemp6YKaMY4hF1XkxM9WyG/oMakxtXL684D\nPN4zg67uXFXX70NdeQoc4PqqLoWaRm/yNkAK01ahx8HlBS5+Hi0IZlfD9VKv\nyROyd+A8+Xo083yW+suhybL6ObVH0V6OGeN+bUBAgkhDKUkYUjRSs9KJbfMp\nGDCrS8X6fET8kSDQF0yjMtk5bRrZvbd+2w0vl9dN4QZt9IbyQRwrZLHUe/8M\n/79uoEUGlNyeODh1Qx+57999S5F4ETIIyfeKm9XryzBIS5QUvshC8B4BQBlF\nffo1G4ChnyudmZ8LbKKM8dVUkKIFhHHIaoOWeSQopJv2lotq22KmhbZB0c6E\nRRdvjqLrUfcKF4uMaSttR8rR4DKpL6op31yC8ZdDj62fXIJUeOqH6c/9DyRs\nr5HZ\r\n=K7I7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE0OlYPowQYcIwelD8KjMem2+BBGKGeGWdP7h1SyS31sAiAED8XydFIXttvLpepA3l8NBZVqHuLQL6v53FeR2wBI6A=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.c6808c51c.0_1577138081183_0.9728038697537111"},"_hasShrinkwrap":false},"5.0.0-canary.7bce9cf77.0":{"name":"@material/grid-list","version":"5.0.0-canary.7bce9cf77.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0","@material/rtl":"5.0.0-canary.7bce9cf77.0","@material/theme":"5.0.0-canary.7bce9cf77.0","@material/typography":"5.0.0-canary.7bce9cf77.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.7bce9cf77.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-nrSYJ2Gek8lMRXV7PrLZIdJeYThnDy0sPXcYMtUwzYbfZ2MMAracoWt/Sws+wRetx9L91iPW+3l1eWZCOYnw6A==","shasum":"6b91cd0ee51906a10c1f9fe67b6257993cfe46d4","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.7bce9cf77.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBP/UCRA9TVsSAnZWagAA6m0QAJEYoavtd3WMA+0b+r/N\nE/RWFR/aF/RnxaO1WCfpKf/M1cxJxpwbchwQq6Mth+S3Pv/sg96VfQeUh5Kw\n5ELXvJtp1qbTfV8mjeGM/Ude0u+J8av/qmf4Zju/G90f3Ik9HZeLJFB9OHER\nvLg/52yBcr6aT0P1rkViaQrXP6Tfti0eLmmGZa7Y2D0pT13UEsJmWzFC9pHz\n3plHflYjSJqe3L128egimaJEXEsi4LWF8Ec2hDdk0MS4FE5SrXgDo6Eq7xJN\nqxXyumCN8lwiqr6PImk4X8sxzCR71m9A6D1MWxR6RqIwJGgPsvgwKDo2wUFq\ntinOVhs1k/eUkqmBswAsJcMLPhRUQdJdCCy+3ebZaZy0dp21NdicVM4imVwR\nT348GTwIkMuuE1c5yIVDXl4oJOOGshOIfkw5Z5/eS8nottDBcT0AyPgMPOMu\nPYoaGv7zAxMNX0x/CtlwSuWzOHSJXW33cI0jYQbMEr71lBgOQtODUc+hL6aE\nVoaobSG8+BWHOgWyXbZtqr8udpJru22Idx7jll+hJNTl5tBBRolY1WBZqpWD\nVW5H2HbzlSipULDvQSj70ZGTvjvjhxTiveeg+q/lwDTXjBbI8qZBCPzjnX4b\nrucXgKnL79SHwDSMGiBE89eOMrPXNWHOjybIo3OzjIumbCReIhx7EsAZha0O\nvWB0\r\n=Pnu3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDeXJmykXAm4TJeG8+rCe6oZWEbIg9EUiOSeV6Hwy4ivQIgeROoC+JzycHrwrz/hKaRO8BBo6px3uB4bJvcQsBwReY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.7bce9cf77.0_1577385939145_0.7097351010193025"},"_hasShrinkwrap":false},"5.0.0-canary.c92f038c3.0":{"name":"@material/grid-list","version":"5.0.0-canary.c92f038c3.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0","@material/rtl":"5.0.0-canary.c92f038c3.0","@material/theme":"5.0.0-canary.c92f038c3.0","@material/typography":"5.0.0-canary.c92f038c3.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.c92f038c3.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-pkeQTQVC5MMTYPa4d/a5FpsN5pI+toL1GWxOepjreIXkINpMew6/Q6ZkFrsmnOKOYcvNfze/dYmLrm1/N9kayA==","shasum":"23932c7b62fb4c71c1f3eefa32788a3fd1ab3b06","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.c92f038c3.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnQZCRA9TVsSAnZWagAAOPoP/2TDdopZQ4yk+83FDCGH\n7I7XqbtPwmUUz1dHKMlKJanFHKn5U23UVoWeA62QpfBo75VLAIXjRrmSG2Ff\nWEeN2csAeskgZuPKrvoaqyBqzsOB772Db6JrUvqAMwdHF7gvHPLC4AqXK4vC\n+KGJuyfmF3lcxP2KdkQVE8elCpRg9VYgDw32vTuDXuYP6ztM3G7ksUsbjykm\ntKuF4AWm5rqjjIoUDL421EzR910KQBuli4ZOMmsaOTAp4bCcoi2yq5jlQ8qs\nSkhDDm6wKq5DgumdvIaySoXgXp4Ffi8l3F9cxvAzbo41ADvWBbG37LNlANKQ\nsrPBLMR7fqTK+SOMNb397bIs3hNnRIit+oC21hdhpHEeyMcy6MvL11eZSv8O\npFOZFlMWVYjfWQsM8r8+OgEyYnMYyIKCoRx26EzIRWqX62bKg3x6gzRsvCce\nTQ+58RQrmx9nJoiKGRtLmPkHpubLKvj4Qgq2YQzbUv05yiDusmfTSMzJgPIa\nGTAYs62cHdkLjSQ5AGnvM1kIDuDelSXoCqI1nUr9FuiirpavAl2bi4hcuXh1\nfV28zH5mrO4Rdhz6GWEe8Dn+Yj7taxohGxbesbkkriTUwHssQOcLnpzZOJ7z\nSZf2lKP92bgfQlvQEFljnncTvqP03Gv2JS5d7Pf/caJGLdkf0Cc8D5za+eN9\ngsOp\r\n=BMen\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLjvL+8Qtv8jVLK4rP7xLIm7X93riX1Iv8jOTS8T/ifwIhAL77rMzPXEAw1nqC9JaouUClMRAPxxJVxQrj6eCQJV+R"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.c92f038c3.0_1577743385295_0.2815183637052665"},"_hasShrinkwrap":false},"5.0.0-canary.1f1ac7558.0":{"name":"@material/grid-list","version":"5.0.0-canary.1f1ac7558.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0","@material/rtl":"5.0.0-canary.1f1ac7558.0","@material/theme":"5.0.0-canary.1f1ac7558.0","@material/typography":"5.0.0-canary.1f1ac7558.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.1f1ac7558.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-PinWERQo3tfEC6D8owDo9xy7Yo8qYEQPT51KrA3LhMH2gSA1TZksI2dsDpURscBAkBwiC36Z63cYkB5R+2dwAg==","shasum":"43c74eb4ebaac1ba5f6a4ab53334b2d8d8968edd","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.1f1ac7558.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlhxCRA9TVsSAnZWagAAw9wQAJcsik9H4Ar/t3NgfpwZ\nnG9kzWRywX1dFcfk+FW7TKAJ2hcJ8KXQ4qaJjqjfj5feTne9q/wlrkoRpJkr\n0xFWZsEVf6Gj/llqIEWs51DJQb53CPCGNAN3y7ektE5Gfhi6v1LNOL5OsA5n\na70nMMXsSrzV5WWUPSxT5+hHgNGKUxwwHpPIBZCjUCfp44eEL8GSJgiQe6Fq\nZkYxdY0AykLYCbUhMQpff47Gt3doatrL40o9ETWBgyhxkZOaq2577pihEG3P\nf5ebUp++npgs2veEpzrVUa6ivQlLKy23nl/wrNg+Z9SGazKd/EMovuWed3qJ\ng6oxYKJgyp1wqLmrUJ6rCPb6XqQtx17UJdBTyQkh05t5XSdufW8wWyzrJMt9\nc2nE8Vwes4tiQLqYPmKZD39cKYxiCTT/JVK0HgW7nLoKyoWFk+Fz7NCHAVSm\nI0MNexJ5v1Q5m6997e46jZr9Fy67qSrcoxTo766jwpcgAAQlhyWzPZPVaK/n\nea4u3PM0pAPUszKhd9gysebwRagyRmijPBWo+brRL7J2dmnRpRM/O5cXhFQc\nJucMwUNx21zDyE0joX/pmLqID41NGRq56eIhRyXNnQLZYsTm8UeVpMpUc3bO\nmEton6kGhSS7PKerQ/wS20VT6sgfvYJjI3WeM1znGd5kUlKue8Qi23jzxfLY\nhwci\r\n=6HJC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4Gh6Cd+VDzjqXXj50E74iIHPDmox+DgTRgDt9XfXa0QIhAIyqXHOHvArWw5PiAxzOrx5OtnwhDAxcmfIsDoumIeyc"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.1f1ac7558.0_1577998449214_0.6229593459313529"},"_hasShrinkwrap":false},"5.0.0-canary.ec26e799c.0":{"name":"@material/grid-list","version":"5.0.0-canary.ec26e799c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0","@material/rtl":"5.0.0-canary.ec26e799c.0","@material/theme":"5.0.0-canary.ec26e799c.0","@material/typography":"5.0.0-canary.ec26e799c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.ec26e799c.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-QkHWFDdczXlzt6v6NwnPfAytXjM9XYX5Ey5lvj8HHXvO5fUm6AHCKnCX1IbM3MTWVA9TrHQx6YKX/PkAYge37Q==","shasum":"c404d364f8dc59afa89ce5310b35d4409683ae37","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.ec26e799c.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmO/CRA9TVsSAnZWagAAx0UP/3L+Q4Xy4GcSBqstmpje\n4VrGkF83j7MJGPOxGP5PSqh+3Q0M0VmjzA/ZRnoyME5P1E7TsdjfTBN/cvw2\n/Z0zUnK9kdJkgyhTmqTFC/1k7YIDrvcTbjceUczRDhQewZtKMScFe9tdNEHg\nRY5CT2kaTA/5cWf42YTvoNr36cNB6LOcFLBvRmCUazRLY5AJK7Vn7A0AyXFM\n3rWjLA9ulula5KvX0tH1q0sFvaTntkAlevBOKQigre3zRXhgSHLQhgyUSLl8\nw1+JGt5qdXa0y+zoLXPiGLH3+6nKRrGzT1EUzhaJ4i4pFNMZb42HuvThmTyd\nKcf19oA+yJUrS8IKhBGT2AGWKTzSmI0Z2BiEBCn/GfIzfCxETOIaa1I2Bp0C\nE8gsrW/+g6wsHSR3nv+ut8tuZu7425CL/Zt650cTK/E+CVuMBmDglKaGCwnX\n9HbIvj20Ekabaxx5Uad0rRs4vWykUEcvd/eIEB+Vxk7LPx6ywCqh/uePc5nC\nRzFbChE33+t/Ba7e+p3HrTobYfUGLvswllnwg14kOBEEzBH6uiU6PB5zZbpv\nWibvyPq6l9rCSuvDgK9tzgW/Vv3/w8B7VMZ2yoyD/btDLsNvia8/EYxQO/ay\ntzmQ9pIQaUJjGTzvukkIFHJ9Z5P6ti/CJIX3o6Ms1xzxN7eLbaYrvRQBf3aM\nxpja\r\n=GftW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCHhEdtixA/qw2fjDdjaNd49P3aEXImpydZKWHiKpfbYQIgG2qY6dkZR092QV1BX3oE9POLAfNcBKCD41vLWJa4Uas="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.ec26e799c.0_1578001342932_0.1726739081826303"},"_hasShrinkwrap":false},"5.0.0-canary.0a40ced40.0":{"name":"@material/grid-list","version":"5.0.0-canary.0a40ced40.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0","@material/rtl":"5.0.0-canary.0a40ced40.0","@material/theme":"5.0.0-canary.0a40ced40.0","@material/typography":"5.0.0-canary.0a40ced40.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.0a40ced40.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-4cjAAuuKECfdjNuD1yAOVTZ4PrbD9GM7XKwiq0oVFe5kKs0PnUU7zbDftp8WhDDmXQgqZwX3qjttGe3+g0wxJQ==","shasum":"163478629c00119ce1169a9d46a937a5520ef3ff","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.0a40ced40.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3VLCRA9TVsSAnZWagAAF0MP/0ZnB1iGRZD2ydzreuuP\nzPXCu/oLVuke7m5Quk38jC59bCHl/YrjZvX32MEXu8/ImPq6UDi+fTFsrLSd\n63ldoZdWvu6V2yj0+HsY1MhLoqE+1+0xKbFi5lTBAf+y296WmkTIHvLAyY1X\nb47KR19/pcq61i7DJfJfVoN8rMJo4R7CphLUYNoiwvxqTPpXHY85AiABtXdD\nS9qEzKDvwhYKnpyDcoFb840j2lBJlZFx9Rn6qTQaV/EeHUyF2oxOO92sOnHo\nMGE390g/J9KBnRVvZAW8/nLosHD98LDjOx0KvY0Wr77C/yTmeUSxojVxOIU5\nYxX0Wj8IdVIilVDv2Tsi66FtNvbb62tbHDl5juBt3KpfdxhI32UOCm01JpWd\nv0FaCd3Pvsw908AYPwmFHML+5w5+PRfWI91pt/Ly2PBy3VbktklxiRjWIYf9\nBrqlQzBJfTj/bkyRtBmYSMqNRYiejp/dSNJ8f2uCT+wGad9gfryPEvO4aaXB\nI1GW3D3YUTD8uVzZUVnq9Txvd51Z179VWzu23M2bOtpqIPpndLgNCZ2THtiS\nbBQG2X++9UnNmQGLv2BHPl3ltNXKXxV62XqBq6qtcWhcLHS+myojp0zQF1xb\nF2KUJn4nYifOfTM1bwCWas+5qXVZ/qgvi79KARMd/uwC7riuqLAWly5l0PJm\nSS46\r\n=C4OL\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvCvKb1APE/TCjMpF526bkq6aq094NixKsSOr7f5wTpQIhAMzWvTEfjSqxKvXF3mmqwUrNdR61OH2raVI7SM1SIl4/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.0a40ced40.0_1578071371461_0.3918693002825018"},"_hasShrinkwrap":false},"5.0.0-canary.3adf84899.0":{"name":"@material/grid-list","version":"5.0.0-canary.3adf84899.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0","@material/rtl":"5.0.0-canary.3adf84899.0","@material/theme":"5.0.0-canary.3adf84899.0","@material/typography":"5.0.0-canary.3adf84899.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.3adf84899.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-aGpPAZfMZOLcfJBb8azmu0+zn6qbE/gLVDHDNCvA8vr7lT78eK4ZElUVLtP9VKI4UxZv+hLc2GfUpFjTZ8y2rw==","shasum":"72845d2ccfc5ef0e94595237a394d728d5daa16b","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.3adf84899.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4ZiCRA9TVsSAnZWagAAeZgP/RqVtokPBGIjfvFpp+3l\nEZamUD4gOYQVFGTxdKXtuUlnxMBubd+HNVk3LuZdh9gsKVdM5cL8pohIopK8\nVf+vRgrL3EKvb5JOG7kwTiDOGhCtFCRoTZn2Z1htDHQObMwUka5AbuO1bzms\n9wIzliiCM9S4CqTUFIRjac/i7N6j4Rt7lQJ6w/sDCmT1S64C+wP5NTboT27l\nElar1c9+7k9BA6vUtGEMH8kq0Sls56FsGcMVYlHQ4J3j16pJjWDriUUWDWko\nbFBuBteC5XyUQ3q68EE8wj7IXudj3kzcyiQf7Us1GHG09+H+onsMtvhFLnSO\n4s5TghbMCOIW6L2Zx29CqAdWEHqcouadGskhpjd7L6+5q2WZNqs4kgG8Nbgs\nXEQo7NbxEeQvf6IacFWRlIgvCNscpHr+c5ddzdidKMLYN0xDgZhhDGas3o5N\nojk1pO1x68vy7OEhNp++t8rV2cA993xjw5VeZOru4wQrVR9xlUOMd3W60bxl\nnzVXX8IrpmbMIYlK0ZLzqfC1WW+bBjrDrMEyyqH6KArhuD/qvGvxN1i64TZi\nxKDkJDbyrF+RonrxfmqHIS8aW+z9A5FevKRspxiulsX823G1SmkIOEOtCyj8\n4VSLU3YxG3BgBOO2ElUGXjDXzu+8tiDfSe9diUqwifV11dxAY7dk7Yp4zOT5\nwTGO\r\n=ZZP0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFBP3R80qVrWBPGG/y6mhUhJZ7P8T+p9TkBXzcCpehN7AiAJJvenNfQL4HHYWDC0itErCaDau0I6HxeC0epQ3YbgEg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.3adf84899.0_1578075746209_0.3770952600424782"},"_hasShrinkwrap":false},"5.0.0-canary.0d42ee650.0":{"name":"@material/grid-list","version":"5.0.0-canary.0d42ee650.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0","@material/rtl":"5.0.0-canary.0d42ee650.0","@material/theme":"5.0.0-canary.0d42ee650.0","@material/typography":"5.0.0-canary.0d42ee650.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"184f253632333982c2b642e450e6e98c9703fe85","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.0d42ee650.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-FN87xgxOWF7bYtO+EhIfYzgmHlHYQLpbCy+br5ORRXgFJAgT8k5i1vRdwK+koYt84EIjVOx/GUC96x98wuVgrQ==","shasum":"07cd1924304833bfafe8b2737d327462ebfee074","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.0d42ee650.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7P9CRA9TVsSAnZWagAANCYQAKSXftVfl9y45h0dzCZd\nSbzndK10DzQe4yoe+++3HVCqPD9EMropS7hXcrF3qnSerlX6l/NSajGI7nhs\nWiG/1XMptRHEhW8yVLuzECkW/D0Zpqgct+fXgt+BF9G96Au1gyRhR84ORA11\nmITmoRMEjmJPdWq0XE6AqKt4ran3sSsYprtMDMDzvG5mf3OlWDxPN5wvBHAW\ntXZQGJsZJyGv38Cw/NnqqBsEFr45Nbp6n8A587Tp05UYc5nR2udOFKZPX1ci\nM3hwGVQ3BfrpDfDl510p9z4KNX/Lw4oPc9sb57ggzQfqLcv0yXdWwBSdypZP\n/HxfQ203WMPgWXudVa9bY3C/Y2BkuuAP1ZhX363Ko3yBW+E6hTNQVtDljzz0\n6oh40kqtJMwq4PRZl4r3SM0iBCm5u+Mtx2XopUQJSqnqGbBKOAlsFA1MBD5u\n62bmvdK6kQF1N65O+t5uK+wYtTnw/aGpCePCkQdQ+CQ2w0e5aBhZYo9LSfdU\nq92DaCZZ/sm4ZCJJoipDhFnCP/FpogLOJfS6I22+otxUHRIOHJZ+V+XImF0M\n4ty/VT53FsYOj6guJLVBAUL1x5AMnnfk1kGx04DRpay/hvaoHE0d1t/3T9xW\n7rp7QplStItPcqV21TpWX3HsicRJBOJkt9BseDVGuJ4bXJPsJV8Cm6yPtZ0r\nHojH\r\n=hz3Y\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHSBARXZfhrRwVcHzeifgpmhvIg4y/LeCSn7mFdNAFEYAiEA11BOfJZzr5/ftvU3D+RE3S3ZcHRSL5cz+to0j6o1iog="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.0d42ee650.0_1578087421379_0.4435967424884282"},"_hasShrinkwrap":false},"5.0.0-canary.847dd1ada.0":{"name":"@material/grid-list","version":"5.0.0-canary.847dd1ada.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0","@material/rtl":"5.0.0-canary.847dd1ada.0","@material/theme":"5.0.0-canary.847dd1ada.0","@material/typography":"5.0.0-canary.847dd1ada.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.847dd1ada.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-fbvQTq2Teov3z7vM8OhCjUWMomHDVrVNuhtr9EUSvxjDqgQj+Jn3L/f3Y8DV2xBNE7PlbLZDpjgc3wlOmRwehQ==","shasum":"48249a27333b96329d4f79643b8d176ff270eabb","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.847dd1ada.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4ndCRA9TVsSAnZWagAA6IIP/R3zIa7TEhi/xt0Ihibv\n50TGQUG9Q500DZ2yD82X83CKU8t9bGv3amMfeS3xU1R5NaAP0DIVckG7zL7c\nbtl+ISLvaZiL5bfPP9nCTFR0ccovJrk0Ds91Gmt32BQLrzLie8X9WKTgj/jK\nbzVgvltP/dIQf5GufKMFAMuzrLWn6D/hEwZmlGCZl21ifjl54sneZdrdq1EA\nstsJ8/gBRZh1BMnxzKBBj0bPk+alUWsIAemvKJreC/duFAPXXNYk/5WS1OZp\nA+7iriI5taWvBd5ZxkmspKV1sZkZvtB/npCX7jjzFrgUoJC0PLmVu49b76/h\nskwLlb2cLXuRuTy6w4LxPp1ey3VDG285cBr0HpQ1nOIF0wHiKhLMccd7uq1C\nX3c/QP9H44pOLa09kUv/DRufJp7JEvff7l/pV6RVmbZ1IelbCA36FIPMDioz\nOs/Txz2xuMTJ0Prv0IWXIEYaocAhOijaflcqo7qsDmN1BIbtJn/NJR5Bv/Pl\noy/j/yuif06cuNs9lNZoH/1rSIi4d2EYSLc5Yj1x00bZutrg1LNHt8aleR2X\nAky/xO0IS217Sefm3ELiu4FaLorU6gYAfPfECtVokQ3nRoGpVXyast0VbPf7\nwGx8fpn145NdaU4Rg6z7IOaMJtZ6ZzmomuouJXdO8VpIdZchvDKfFGXcB2dt\n2Sfr\r\n=WtAJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDHnX5O6FHsEsNkDVPcCXXAKAY3ZssxLnxNMumhZKuFVAiBaz6BZ9XacIcacGwDGfampRkMAKGmz1PPtE1i8P/w5BQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.847dd1ada.0_1578338780686_0.7542923042494973"},"_hasShrinkwrap":false},"5.0.0-canary.39df7e5df.0":{"name":"@material/grid-list","version":"5.0.0-canary.39df7e5df.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0","@material/rtl":"5.0.0-canary.39df7e5df.0","@material/theme":"5.0.0-canary.39df7e5df.0","@material/typography":"5.0.0-canary.39df7e5df.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.39df7e5df.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-fzvyRhVcEZx8oQ1HAcRhRtch+/qJoH17IPckz75vclSKMAZEGxIaiZEJ8UFoii4OLHSfQXf7lLB8nKDeodRTwA==","shasum":"c909e747d4403290c5954027ef23653ebaaf7cde","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.39df7e5df.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9cLCRA9TVsSAnZWagAAOcwP/RO3fS/swRtcf2+x9xfy\n5kvIGyINWsX/oVHRKSV28TVdjV8TYxRWMlYenxtopT16Z4E1Q2ZXjxeGG8ze\naJBO4+taBsDOnKp69vyOlP81Yd0DqGmHLHxx28o3L9uaTaHJOH8VcGLuAQCa\nRdyD9tkQMMRQR6fwHqhTauCMupbr9Qxo7z7mh/oMraTGdgzATcbXtzWUY0Xc\ngbX0iG4C/LEUYrvH8cheEQwHAhwhga793Ay9tZKAjEL99sfeKdYWwTIRYGYy\n+ULX8xtTtOPq5IWO3/1yoEfZJc2J9b+QPc7OLndXhgRuIglAuycAOdyPZzCu\nubv9Fv+0fMs8RllOMMhe9Xbh4/T+cMFVY11YOUHB49/gidPHhzPXdDn6jyPO\nUWX9noA7X9Jg39S0KJrKriAxX7tnGVQu8j/Z+WcYyg/tFgva7rdCp0fPHbyw\nLuqha9KyXcM7BDpb8IBEhg/XzbdaOnEoGrGAJSAYbLoSSsFuYZPTAyRUStHa\nJg8wQGOjXB0Kw3oemubnYz+/z9uwzLmp++aCvH3Mq+4QYiYw+a7bMf9iw2h/\nFvB5JB9pKbAP4NMT25SChvbenHIv7ZIxUFWUNnZW0jTyTx1L9IJ/e1s4noS8\n5KV7UXrUY2b5E5OdNooSY4dLhBaDJYdDrYB3h0Jka6fsBALEipNuuk/hys/8\n1rZM\r\n=1afh\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXGnz8MM5kyCTeKmO0Itg57P+xe85Jwlwno/5YrPt2DwIhAKNnpYwoIJOzNO052bv1SfMEhs4C3fM4Sh9uGd2yFoRw"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.39df7e5df.0_1578358539161_0.7422590956437383"},"_hasShrinkwrap":false},"5.0.0-canary.f1a2581ab.0":{"name":"@material/grid-list","version":"5.0.0-canary.f1a2581ab.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0","@material/rtl":"5.0.0-canary.f1a2581ab.0","@material/theme":"5.0.0-canary.f1a2581ab.0","@material/typography":"5.0.0-canary.f1a2581ab.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.f1a2581ab.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-+T0AKg5WgFG3taX6z6mPk6OQAATsF4r8DXYsY8IIH48HvNzcv5uaWO3lOk3/o/MSS85u0t8UfjgW6hmdfB4kzA==","shasum":"4582b519f854013e0a4b4f3828c35f43157502bc","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.f1a2581ab.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJznCRA9TVsSAnZWagAAt0MP/iYvcDM5LYD1k1SFAMm6\nZFmhMAJfELdtnz/IFMCVrzCDnIeWw2jZ83boB8qkpFSgW9hdJVZ8OhJo7sKo\npo71R4gDktGiuH6SXI814uqFF3QijoAB9/ldsSIxMzb4hTIx5Ogx3miZlYsh\nBfR3C1xeRpFQGz/tsW6RVzsnPyBfD5rbfoakTmBo6o4S5cl3D1RLvA/FYfSC\nqqMpSDVGoMRPPENpsgCa5ELVhD8BNOoGt7eGWRuZlYEeAmdLjxVa4Lhco/Lj\nXbNKeaMY1AvrM9Le6ehkw06jTsMlMLyMLzouqdFR/toD9Z/ZHuvuNusi7mhf\ndrEEM+XhdMexGNt49QByFXp/QIxxwBfCVPnBQg20fK5HgXFuFeVClvp9ky9e\nCSsm1o7F4eagK0yiYTPzvG9ga5JP7SH+zvxds9NI2Gwf6OjtPxfK/3mgNd4f\nlp16aShjae31MP0/PdUhb9KkU2AGemBWfHJflOwAA8gDpHHqFzqd4VMdi7I/\nf2s2YG/rEEM/28U/cnTuIKsWiyvwuJuKqOpJbC4hYgJcJilkIJpnQJoMI3Kr\n0J6ZyPCKNcRhYsJljAtvsBzpgeAEAukoG8siD8s3X59vuWxgvC/5ToLnsD8C\nbLRvW0AInIaY8V/I3YwIo2Zy33/OMtJpj89dq7rAWfArV3gFNVDmBKH4/BA1\nnJsy\r\n=UTmy\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEXdSOXp4tnFmD/Dm88EaUW3PAsFgtSyoRwEOK8qWGK8AiEAwqDnlMkfkPBtxZloa1/9P1cCeSq5orC/qqpXcaO0PmU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.f1a2581ab.0_1578409190654_0.8820534038358849"},"_hasShrinkwrap":false},"5.0.0-canary.7c7ddf347.0":{"name":"@material/grid-list","version":"5.0.0-canary.7c7ddf347.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0","@material/rtl":"5.0.0-canary.7c7ddf347.0","@material/theme":"5.0.0-canary.7c7ddf347.0","@material/typography":"5.0.0-canary.7c7ddf347.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.7c7ddf347.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-EY5lM2NtZNy/JKDYNEiveznatodZCjP9nKIOtQKpsvnFeMdlgYYadO8QcJPfvwm4IlmQ7gPl37VI51/izleI8g==","shasum":"0254cf66da04b27457f3348dce77d5ea10a40936","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.7c7ddf347.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKC0CRA9TVsSAnZWagAAd9MP/R8rNjRIjMFvCbWmcqaG\nTS2L1CAjgx5tw+Ke7/N9LbQDj0TZeN2BQpxev5cjk9GX83SE9YbRDIPqH5V7\n3HMTAlwRlJU1gtj3NCdnnSJxsZI5IckqvzUpCfvkMuoKInJ4ofJS8pW/DLU5\njyb9IBSWmzL+wzArcV5XfkDeF7HenUHnZWwEJfIU/Ns8BYpent8j0j6GFxac\nXnmVuwy6X4571Rp4N2R1ZKc3ongbhtqp7wy5XSErq65VynMjaN631bdO6AAQ\nP1uFoeVfyhpJdBHKAd8MKpNxpfA1rbE7W/LZjvXVsOnbKef6eIpNVNGTfHR2\nTCjQ3T/uGtqrS6i1OvheyrN5ypBzfZ0UL3LypnhKhklM0dXwL0aPswERqCQO\nsjqW9IXJAx8AnIE3yWQKW7hRHoYMzTHOsMMgU0kX8HnobpYoIOKoJxoLiVtE\n+4aRkIFgGVzXpVFBRAEYBMYgFn6G3lgIilziezbDVHlmgW1mMo6AnHDQozZc\n/0Zlwjd8LF7NF3rueNF4J2zVuyR29yX5ztU1WyCK/fA48fsPAQll7hXKR0wn\nz4hrt0sGHXKme9+Ra/h+4Kk2B7vj8mL39PsNpR0uaHfg05O6bQ9nvNeZrqQi\nKkFF5+iOldYy2eIuylCWeFbu/3NL/EXPhzo+QizagHDEYYjjGJS/dKEEoKxJ\nCqlA\r\n=snN6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhiwoK1gQLqKW379reGO7Syi4ACqTrfEYp8po6CRERDQIgB3gwp3WCXs3JfbjJFTXnUrEW3OzUJGZIpBdiiVfkbRA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.7c7ddf347.0_1578410156538_0.8973123829344802"},"_hasShrinkwrap":false},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/grid-list","version":"5.0.0-canary.a1c84d4b5.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0","@material/rtl":"5.0.0-canary.a1c84d4b5.0","@material/theme":"5.0.0-canary.a1c84d4b5.0","@material/typography":"5.0.0-canary.a1c84d4b5.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.a1c84d4b5.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-vQ2prnyqXvo0hwhabrzdbMRFZZfkCMMpHVh95lfFw2BjHv4SvCV2Tz8oa+Vu+irp1uLfvlwbH7mTKMmrSEO3NQ==","shasum":"17823a2f4d94892bddc5268c9461d75148162198","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMmACRA9TVsSAnZWagAAKwIQAIbqCkxBACczB52PX+bk\nwvkRJBrdEutEEjmS3yjFwmDfkuYbW2ak2Ul7LX8VGeDm0ZDy7DGemQ5N3hJI\nceAS11TbrR5K64RmpS+CwUi1AWV5Hc59R/fcBR/HGWWikA0QsKu29HiQifuY\n+tcaslKpIfjM6BOFmB5F/+dJYrSoimR9wYdtwUtLgV24V8PAIFrVnEYaFq53\n7zXHbadXKNetUxW7eDePO0qkLzbh9aYbyOc7oNF2XosjHXHaWkuKIBdNCXpD\n91u25GXRT+qz04qptwhG8UYO6H9nNHzOoKKH1BC0EoD08+9dkV89GsDbMVhu\nSqj49A5Tzy8+R4+Pf2ttimtISoblAIqgMLxVynLpyeTQW9F38KNNKVQrIrrO\nVM9PsjXPGWvEuIYoNA+Jm2MBZdrmYzfYVcAGsfs+9l0Xa/Cq9YQuLlk5d5ee\nMZsBd3MBAJn+Dn42BYK753yacZDCg8MLgrYYEWdq4NRCMYCn84Y47KKnGkjB\nXarUAc9+oOpbauNddt2cBhhSPoawBMeeFnUp2L91em5mZ0aPquf9nd6wKrGn\nGiOF7Kh2gE2jUhOOErCnJRYMkOKsIHbiawxyFjvPUBCPoG3hkBC/dkEgFCpc\nXuQVDkcl3Ce8lKuhO8Zm5akujHt+VAb2bu3RjXJWyzKdH9Fl6sMVJqRHAQZC\n68hG\r\n=S1AG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDVTLB2nqBVYlNkm5oAbUtFvO6UNEBqZdw2GfpZtvMDFAiEAvIV3c2oy9kpv7CuGflnNWSs2SUji1FLBflA0qzGPgMA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.a1c84d4b5.0_1578420607785_0.21022290001923127"},"_hasShrinkwrap":false},"5.0.0-canary.ec9f16578.0":{"name":"@material/grid-list","version":"5.0.0-canary.ec9f16578.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0","@material/rtl":"5.0.0-canary.ec9f16578.0","@material/theme":"5.0.0-canary.ec9f16578.0","@material/typography":"5.0.0-canary.ec9f16578.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.ec9f16578.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-4GB2UBa2vn1SewoWLdgfe5HXBtTqjv+iaxFGULaBgDwyJk8Ixe149qnzvNIizwFIsP/E9o9r9ypgAqMOl2OrNA==","shasum":"e128d2c3956c40ab160a67d3ede936cb7b03ab2e","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.ec9f16578.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN5zCRA9TVsSAnZWagAAnaIQAJTBau4wQ9IG64sG6LvK\nh5JZQVf49irZWUHHT86dqepulsKUxA3VmYm/keMcBTFeK0lDOpspA8GWWS7+\nhfXq3t8oHhwoiLG9PwIGvtCf1F9hmsUaO0ooCuKbq+kJLrQILbp4bZOsre40\nOcwoFNzXs0HIYsBTxVkskTQFWy/zsQ3jC1pfnKiCFHYXcVv7J8JkkM8/io01\nZ+s7U5DNAA/vl1o3VzM+uTCZsqwWoAchkRGyEFFBRoZSta4Y8GuXJ7zzpIzN\n0dCRK5kcY2I7Cf7iSoMLaZv8b4Ob8BF3d2Qu8QG321rHFFXaH2xlmXJqJGXK\nsANgvsRErZSyRrnpe5+jN1v7N8iKia3AECOhY4BAsdKDQIVtlkepgv7SULC0\nY0g+8FRX0UoggRyM88C/74Rtlj9cTK0MutFfpE4cCQSDbb1hVNfblkh96Iv5\n3vhPLEtnDVsUE6dgiWMBkOHgDimHRBbTQdR9akAxpEV9eNBsbDVKsUI1l1/l\nGTqJkrG2+e3+WxpL7NN9fnIpxcWIpEeEp3MO7fgpjOmQmVC+kzig/cU7/SvY\nU/MveZidvBAmTcmUugVr7CFvA9fRTClwrJttgxR6u+6TorrfXNQtKUwUpQVR\nmcBultxe9Xh5hK20lyOYnVF+qsM8XkfpRTqAL0XC9f0Jw75QVm7A2SV6y/K3\nP5Mu\r\n=9c4i\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCVvMrkvi5YnYxfUkkgVMTxrw7F27xH/VEf/UDqF1wjgQIgZCNQj+bo6DupCqiR5LJKX4PSfS+z7GKG/vZj3S3vYho="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.ec9f16578.0_1578425971600_0.8295500877746622"},"_hasShrinkwrap":false},"5.0.0-canary.b602226ce.0":{"name":"@material/grid-list","version":"5.0.0-canary.b602226ce.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0","@material/rtl":"5.0.0-canary.b602226ce.0","@material/theme":"5.0.0-canary.b602226ce.0","@material/typography":"5.0.0-canary.b602226ce.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.b602226ce.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-qf7d3uQFmo4mr+jSF5z/+LpvHV72FNX8xUCfIW9i0eWM+IFsUL6rpOqZ9VKMpifDpjyATKH7K5HxYFe6CRy9sA==","shasum":"93b8b7cd64eae54a823f506ece2ec9392110d423","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.b602226ce.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFObUCRA9TVsSAnZWagAAsxAQAIAAyhAtRaejioFm7Qqr\nNi9DEdtoazeNIaRMCYrf3TK0A3zQXIJB6EKBvPttm5fFcRxKgcXiqUfm296D\nIWIoCkTTFwAAInTGhGG1EphGGEoZRudASlD7jK0cESQl0iMXg1e4MILy0Yzv\n23qHmZVgpDcnlgDaJkSY4oN68yn3V00m/HYT+nox5u+cz/4+pABosJbFPFCX\nE9hgRBRzyghgTy9q90CQnAnfkwVsIfZdxMhQVCgFDh8pJ4ozgrys6bMDM7SD\nyvewLIRCEHsMdEJL0whH/Q6ZirVasigQ5X6nsylhAO3g2tLEzNTb7JXgcQ+b\nY9SVwrfwqGnECosbSG+BoD2nJoxpCYZYbhfb6D5VJM/r9bCMxPYAfIfNnqZo\nKe6E8JzbbK+yLHqExxDOzYur2jmCXlvr6JH5x+WG6F1d2t8hu0yt6O75gqnY\nLW1xyp9I0Z5p+31ViMLpMIw1ZeEWkR9BBRhbWyEmawKITheFAtUiQr/9EZYa\npkc6U02KlsIt19LCkd6bQ0rvfQx6pN58wD3GD833woBOtVUbTtli+JnyGII2\nFDsdXBnatMS505agbdQbY3lsZERUepiNIC0QUGBFq58Gt3a1MaSy4PI30n70\nbFIgviYoHDc0ugbFlyXJgQgumcN1ZAKXmXhUtdQCBPAbTGGUCNXrCuptmvdu\nKNVD\r\n=Hz5g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBh0/WcAOskobAncQYwzchWYPO0kHnVmVZlZ/in3UFXSAiA+MiVoDx/SjqZSeu3SxQMSOhIQD4ilcy6jJ59DB7m0SQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.b602226ce.0_1578428116270_0.9070503535435146"},"_hasShrinkwrap":false},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/grid-list","version":"5.0.0-canary.b2d2dc08c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0","@material/rtl":"5.0.0-canary.b2d2dc08c.0","@material/theme":"5.0.0-canary.b2d2dc08c.0","@material/typography":"5.0.0-canary.b2d2dc08c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.b2d2dc08c.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-VY1Jl4FK/k94flPdZSKB+x5vBPYHztuMCVpTAAQ55Wi5Xzkg33Hn93B2KbLtCUnpbIlAKeVmpWmLij4qtjPV8A==","shasum":"13187d9e00d90fd28c26569000472a198b064435","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPdlCRA9TVsSAnZWagAAtxQP/RUyDwlVQkZyT0v7fzoJ\ngxHnzlU+cceANUZjDf9AP0Hevkfl/3NTW4LaxDv4mxY41ymNiHoSAEMLbcac\nexft+FxWexTmLQIWaK68eCG1KeIm5UMLzL2lWpG1frcvgkd2Dx9iJ/NAIB7T\nilHtvFa8m8ETcli4/iD5K8FLCUGD2P1sZVZj947Hd0hblzTWqg+LgejOmjhz\n/HqNABD1Eq/Po7x/x49G2VctfYsgneaj7v+dJaTfQAh/z9XkC90Udls/FeEL\nPb65/KWGrI6rGu987OJzZ6Hj4xffblwjHgeT8UJ2/qsPXP8Worr0ecm8guPs\n00AJJ1d9Bnb074gtbNOTGGmvhrdtkfswAIFz0DgqNDjr3IFJGxjAVQg15R1M\npQqWVJAudzjKu/3JtXrciFqBv1XvOJ2/GD1fz0WhsL2aD5Esdv5RWt6gpJLi\nwOrMyzzOoy/ymgkCDT9pm17dC1Mn1HF/HeVPALXGGJGYJDbn+lNqJHkTZg7S\nxB9WYQhq8K687AGthk05wYVMz1exC0R93ycrB/r6dvr12oD5mJUqYujxSKYj\nOp/kWE5aBsIdlY6re2llo2mgaA2ge7WzGtxTWIr//+5+b5eYUSPR+vRLBeVL\nppmPukH/Ph4DdY0i5QYnngDmW+1oEYjSWCfgUWUx9izFVMWJuR5HnGv54DiU\nhYji\r\n=XTHX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCICwlmwoaUVlOOtimZlGjBgxdHEaIIZ8i8rV9GQc00myNAh8WhTJKNKZdV4p+ITpbgRLBO7qaXVkHsnyUtkYhdr5o"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.b2d2dc08c.0_1578432357563_0.5013701106290476"},"_hasShrinkwrap":false},"5.0.0-canary.61f2d7580.0":{"name":"@material/grid-list","version":"5.0.0-canary.61f2d7580.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0","@material/rtl":"5.0.0-canary.61f2d7580.0","@material/theme":"5.0.0-canary.61f2d7580.0","@material/typography":"5.0.0-canary.61f2d7580.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"a826fac64c34ef89005bede280cad29c76346e55","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.61f2d7580.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-tBru5KhzOi1IpDIIawVC1BiLPahBHRa1crgrf+rUFFypO/lwGlVKt8/KcWR2bou/dE8fBWXaiifMQII27uWDDQ==","shasum":"211c3cd59aa12550c3b2299a00112ded270d9e2d","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.61f2d7580.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPqdCRA9TVsSAnZWagAAkI8P/jL+GBWn/uslU7nGNRpP\nBGV5Nhp9ImpCS47j79ryIdjN8xOmbNxP/TLqeMd3msq5UQ/bpRX4gV416l8b\nSKZNquQKvEIeJTsWQNa1DgCC/esL0nbx3VeaeUs7QnIWcPMIm8mfLUvH/YHi\nQrqIn7BTJHLbxoeTpsWo1o7AJ0N1Jw7NNxYg4H+ONvq49+L9ffKbj/X4XWXh\njzLED9KaydeHSGAbqNlnE8mx3RUmc7pLUqTDIKwTHJtQ9WTjSn85C2AY/Hqa\ng5BnJITRFnuymyQgyBxaWBo4m9/khamaWwHVeFGNp+92X+vy9zULyo7GeZR9\nLqn1aGuvtMa3yUI0nIr2QtIotLryD6M2IvsYjMz9zXbZFoswAxNroSi/oDRL\nyyDX5CS2F3DgOhMtrbgTWH1nUtj+bMj/TrYh+iesinuvq0I3jDQdW45HXMUK\nEZmEM8xC4favI3kVvatUFEe9Yog3+YaURj/Y62nQ3DcmtjmkKOTZUrdfQg4K\nUq2QusNIIgJb3lZ0QdfIucOzdSo/y5bRHm94SobuaW5x/QjsFQVgGTfOSzXq\nWB6ndz8eLVrOlHUAQSXUy8pyv5XKPTutI7IMgMPjzha+uJz/e73oXVkWe9Hp\nMnueBtdiBf9rBiRbcvBNMb+58XA19uB+acojeLGRPA+Gqh3Rps8joo3ry1+L\nuHbN\r\n=J+Jt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDIvuQHW1IieYZ1GSCOuU5qVliY0ywOV+WHGt0sOAl7GgIgepte8k9thHpOioaTlmzrJXXFWbsrMa/8MDg934XniSc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.61f2d7580.0_1578433180747_0.5595479512352057"},"_hasShrinkwrap":false},"5.0.0-canary.d1be53a2e.0":{"name":"@material/grid-list","version":"5.0.0-canary.d1be53a2e.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0","@material/rtl":"5.0.0-canary.d1be53a2e.0","@material/theme":"5.0.0-canary.d1be53a2e.0","@material/typography":"5.0.0-canary.d1be53a2e.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.d1be53a2e.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-ulrslzZjudFKbOwsf8Q5sq3EBtFPv6LPhK8Ty5va2JKCig+U1kgBmCstdoTtBE7MIFdT+P4nu7cZLtwkNJsj2A==","shasum":"28e05fbd59b459301a76543511855236dbaab8d9","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.d1be53a2e.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQNXCRA9TVsSAnZWagAAOM0P/2ov+eMUXjayqKbwwPpg\nHTX5MdHwgOJESun6vmm4kNZSspWc5NCIuX78nhUan407XTB8iKHROgztb+tw\n129ckWG5Vu/jr0K4iRI79zQSep6Ml/9dPU777sKjgBmZgdGHRHYsDU4Sm0OU\n/E4f9QBIMsi/DjFpos2azFsGqDpqgWjLZCstgntu+1NIF6T/VnGPUUlYqZw6\nAEEOy6BMadKz2F0s3c+Gc3w2yK4C/niNY/2QEFCIemE9cOZxywvpjAlAg27E\nbBjTbQAkd/h+cAqZNQXzltssZ3kn7HoZFgLqD53wLaHvGLb1Bj2iYJ0qqEcu\nP5NwhMMAdOt0WmFWLyqWRjcTmSnWofXYvEUBGSa1ToYjQ3eQD6FdjwYJ7HG+\n7Cgv16Zu4AyUmWhUGfK7acdm2HgJSSeaMLxPcxPQ/BTSST+xgxmu72zaQXyX\nC349StXkigb1KOHAs0+5ef7yLZQJuw0QSgK5JefoEAZZmBbX+FR5dyirj0G6\na5TbNNDstN7abIMxcEw4TwyXJIrFzIe8uGJHyFK6ADQCZoOjw/F18yGPS3pL\neQ74dVmrMiRa36teEMYgCRUUg2ealRkkE+N0PBLzFjL+yWaymVFm+jhOn/Cz\nBfmbJ5WlDeL80oiw7lFgCc5gYqE51JnbbKhVvTChi+USwZmk3Q2KcgdeqxJS\nI4TV\r\n=qlgQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEEtNVj56YnscB3ZG6xdLtP122SQbRQRtlIqcJvO6K16AiBjWk7WpuQHUdybl+9UoAIxvogJXuUuXuwTqbqNL52+pg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.d1be53a2e.0_1578435414702_0.24155685024465812"},"_hasShrinkwrap":false},"5.0.0-canary.9b0d06e32.0":{"name":"@material/grid-list","version":"5.0.0-canary.9b0d06e32.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0","@material/rtl":"5.0.0-canary.9b0d06e32.0","@material/theme":"5.0.0-canary.9b0d06e32.0","@material/typography":"5.0.0-canary.9b0d06e32.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.9b0d06e32.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-KGoOSOiDbp2c4rIadYAb7ZmpxChkmeA0+xeDuv9hjAX/tzvbF21BRww3OlnNnL8rhI1fA5YYTCEltjK251tGOw==","shasum":"f317db9543c3a04cf39830bb5c40542c56af4a7c","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.9b0d06e32.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQPlCRA9TVsSAnZWagAAN9gP/jw7C0ArXG6FMzUHEHD+\nm3nN3g/gdWMmTN+4uf2Nvg0YCszbePTPZUJX3FoTnendsRfnFmpGeQ28L+Tw\n1KE5DGtaDZb5jUZ2smbtRxlAWkcusc9uy8/b9byD6RhrAfEK1zT8/nw3unbA\nrITaPY+RQJPxXgU4pyMfJaOCDHpS4VQ6A/DZfOXavp5dPy+Uu+G0a/yiSACs\n7Kgv86c0UHJXXze2i9/yjpqj63WkMvI8x+I3uw0b89Km+pp1ZW/WezG6JpF3\nDM5dhYnlH7FEIR7U2Afu4F0hMqLHNfBt6+hWRCvExWZ8lbGDvrDGk9IyZwjM\nm5LlJt38T+/qyxzJnJzh8pEq8Iqo5KzgFz1nrfxbC7FbFVGjMMAyV/Fs4TGT\n0QYaHaJYFwbR6GFcw1ZicONgcnYdDO0FYXrN883QexEwHWsuWGvSaL1dg4Oq\nqS46UEK2kJKRXwJ5pDDuYn3HeuyMaHWvrHmDuNOXCQUZ7jRO8EohqpDQoQIj\nESE6ryGO0jRkm/VEhto4C45DwWNJGiAD+VzQq2qCjWct9fn65fWKlZdpGU/m\npbhu4UuyIpA9lBJEM4Dxn5PgMVFaizif1jKl7tobCiZxUfs55ILNA1i5QvLP\nI5paPbbsNoXfvqHmyX8TGPnF+ryBSWfv1BewIb0JTfZXtGs5AIqkoiZuK6We\nFR3v\r\n=eAZD\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFgGRdUY+snXCIv05H5rk6+glRXh69d7tHKUUwhoejFvAiEA0qqcK3qTU9sV2pIHX17r9EfIP1ImDbcg7ghklJZh7l8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.9b0d06e32.0_1578435557261_0.966331204632443"},"_hasShrinkwrap":false},"5.0.0-canary.730c807a0.0":{"name":"@material/grid-list","version":"5.0.0-canary.730c807a0.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0","@material/rtl":"5.0.0-canary.730c807a0.0","@material/theme":"5.0.0-canary.730c807a0.0","@material/typography":"5.0.0-canary.730c807a0.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.730c807a0.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-zDYKy8/2NHC9WpVsV9mhceLm2x5ADPCqACeCAVy4E1guJ9XVNuxUu3Mdc6sC1pszTI01WVesMI+mYWA8WrMvaw==","shasum":"1cb7e08a70c226ff968af46e3420a76d0ee7e903","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.730c807a0.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQRHCRA9TVsSAnZWagAAV2UQAKUgODHr+HPbo2tSPuF0\n7mlnXgueRV/4Lo9j62zWYeXSgOcScWkMUt3gxGrCo4o/FyN/8m68bN0aCUdY\nDZu6w18nmLrpFtSJ5YsmtED2doBaVYnzb57f2gcTt2fQGHoGsNCmyz+obM/K\n3QMCHfyW2O2+N04oxIVdvTCAObWse/icYoRC5/WCsO/aCZoOxzjwkGEA4aPX\nUCzcKVUpfKhaOgocubf5Wye5LSlQhgO6P+PSqLQsYxSkJQnuX8vck+MVq7wi\n6ygARULebUWMGlHFoUGfQBbsyWpYdsBJiIYTgx/nPoO1rzx+r8yoCsDZTKjx\nTO6cdwgmy6T5xokT5V6tyF7dvgDH6GP4HttJMD8xXmBnx10r/Qp7tvXSEO8I\n5AyrmHFSHn4jG9YSlc8x2cxNW1lnKjCADXr59POBCi+rxwfmTheCekyOqlma\nnn1z0Z294t61+SH23j4Hh0V7qP/C5xmRPrUXe35zyS2r95DhfOr6smSWKjMo\nS0cbveL6RGEs+G9i3Y2C5ENRkwNXJFvt22N/ygBr+JnEo8Hu2FckicP4UAZU\nNdSVdYwyNu1qhRw0VFOS4EUiE4f//RUWDwV+4KQslfB8+e19aK3IwzXpw1Tv\nzJ5M00HyE2od5fQgxtWFv19U/rXG+vrlZ3XK42blOu7G891ZF3St91IjwrV9\nQvcu\r\n=YaWa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0ln3dGmb6MBQZlOmOJjBbOPVRrbnod407qS4lIO0puQIgWZ8xQhQCu2RKtB1yvuxuT5OwnFDAQQzqHT0AILldkIY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.730c807a0.0_1578435654695_0.5258920367772837"},"_hasShrinkwrap":false},"5.0.0-canary.2213152cd.0":{"name":"@material/grid-list","version":"5.0.0-canary.2213152cd.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0","@material/rtl":"5.0.0-canary.2213152cd.0","@material/theme":"5.0.0-canary.2213152cd.0","@material/typography":"5.0.0-canary.2213152cd.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.2213152cd.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-SOM0OOZjaiCgaEtsWXeERVdAILlMxGfG/DAH8PoMTmuGnAoUifXX/Uq7/VAznQTosTE/+VVhYXVROKuPDuZsww==","shasum":"eb95f3201a947cc004d6bad4dc199d5cdd832966","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.2213152cd.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/FCRA9TVsSAnZWagAAp1MP/26I3dwEZoS3rjij1KVl\nqEfhqUV1sTn3YjK5j44Tj9hyvhEh3dOI568NMi9sBGCYWuSAkDPXIDmVTxts\nnrIFBjBxXAx6CIU8qZKT4vMOKq6Tu3MISV5GwtGSjgfqz0ujrN8TS3XDHKLl\n/nwc7CfEhN2HgY31VyGA0zgP+yyLAzL595EHm1P1hav4UFGZWqUMTYFy/nRj\nVdBLNdQAFMNb8rbpo/d+eBAJhxxv3io0DJgpyxnafJAtA/bYfgyMUOIzN5OY\n1nU4jstBq6WHhqq0mCft60xyVcZp57x/ovpwW2lIVhFwXWFA2w7ipj8IFcLj\nK4kiIeZ+3b+GjbWhdyOdPgCZn0pdV+zt7+kf3qTwC8XRCAt1ZaK4pJfnJiMD\nEzmq+UYSUmX6kfKXpx1wwFNu7XAWhDMstcUU33mNi7EBfBpp8UW2Ig/t7en1\ndDEyU7+2qKTF0PAIBVsOWghFgDYxKGk2M7J26p7bANNI922QlbFbqpCvrm0t\nhZm9KbfhprHKTB4o7SiwWqbpAlmx6/dFlITrhAUQdXDx4LiVDxQ42aBpkpFe\nJbz1bZ9jtJcntotS4GYNuVMXuWXaWi9aRuEJxOfqk8N3HEy8FFbZbOytMnEO\nv3PmpQrIPx0pUgniVDLLdlr5zZM5T7zvt50LifmsKY80Sz4TO0+23fFju85p\nAcT3\r\n=ob/r\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBwI5Z5VGA0UQ1vhhjf1pXPmNV863Qy2GKagQtLE3DOcAiEA7Jg5CgZ4T0jVKj5h18DKzIxLnE4XfXc31S9OBL8VrdE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.2213152cd.0_1578504133303_0.8682710181440394"},"_hasShrinkwrap":false},"5.0.0-canary.5750f7169.0":{"name":"@material/grid-list","version":"5.0.0-canary.5750f7169.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0","@material/rtl":"5.0.0-canary.5750f7169.0","@material/theme":"5.0.0-canary.5750f7169.0","@material/typography":"5.0.0-canary.5750f7169.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.5750f7169.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-fxCMIsFUaiLfKP78Ck3Wapi8s9uEnGL4zvFrdD/anqfii+AQD/IPF9cT6nqE0O6KAjkDqvznMsbIw7Mb67/cgw==","shasum":"5b7d46fe7d5d818d25cd1968295eff04684094f9","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.5750f7169.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhflCRA9TVsSAnZWagAApwsP/j40yl0mUZkF6UyoEm+w\nrlLGhYlGrtxVuTwYZ1+FOPzxFIkNgOJVYnPssLmVy+jA+Ckw9EmuN6tGwHPh\nSyI0hXneBX9JLxDHPnITBCXl3f8vr0ijxTf9TLnt57wIHOrRqJDTbqRWExmd\nC+fk2a++1ZEQ3nKRSsdNx0gab0e1eSyLMn5EUdM0o/cepquZrreU4SjdQvsC\n633LfPxMhGdWmiVAlQcZ9h8/q2fveUjqCMNUo6GqbxXabASglDqxrCdJPlFR\nMWRhR4Q5swh81mPlsIzFibv87Hs9fNFPZ3lA9NHpiZzUguI1UA+0KQhmhjdw\nA/tG5rNqo5ZJv8EXDAT4bxGW3G+nc5GwKgsqlUrDuSGMiFqyhiB1ePHameMz\nGuZGCy1ARV+2ExkKa80YTIA48qZpuzXv++8SOqDwsvnsM28TTqD6BAOsmJ++\nLcdRbkEjKV3NHjZGmULIWpstiQcWezDhhYyBkAtl5jrX6KHbluVH+SRQMrYh\nT/WJqFnb/V4QBo+4oeW03C5JG4B205KxGon9h40Pq3Z3ntzaUcnIiGwapUW8\nx4cb0KpZCPMnJ+zETVjm6EXDade81djVBCVHKSXvyPXwU6+mqO/8+/jp/BX+\njFhJnMiOUT+IwzYcpQeDmmqZYnyxkgcCMmehg4JSmbcs/afGBb7J5cKUojxY\n1OYc\r\n=wm6Q\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEtiHE/DXNQkFNItWiFas8iroqzTNcwOV7MB5BeHWaSeAiEA01jxEwNYRtHlXolvilyWq/rsT9BTUvqa3K1YzRVRXuY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.5750f7169.0_1578506212690_0.23347113955399634"},"_hasShrinkwrap":false},"5.0.0-canary.f7abc7a43.0":{"name":"@material/grid-list","version":"5.0.0-canary.f7abc7a43.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0","@material/rtl":"5.0.0-canary.f7abc7a43.0","@material/theme":"5.0.0-canary.f7abc7a43.0","@material/typography":"5.0.0-canary.f7abc7a43.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.f7abc7a43.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-Qtr4uC3SMj10KGvT8gOGGKzVYjLQnGLoPONK0ok5kbCNqi+r1dXEKqqj0Z5/ny1RiMYQtq/9/K152TVEyWXkUQ==","shasum":"fb5b97461a80a5e7fc0515f2e20b2918e36a9b57","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.f7abc7a43.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh8iCRA9TVsSAnZWagAANg4QAJ96FzpqRhOK/kLjnKh8\ncg73uPCi26iqJMBN+jCeBQ7/pyvouCeEncs/u+6DHh8X8qgDme5hPSNCagnm\noKhq5KpYQ676qKCxzgeP45/o6Vxph33SDnb6AkwTtQlwrbBNCtAi7yrIJlT1\nbvjbxrsp8GkXETaa1aKVrqoQeE5aIkUT6PWSpNfQJivDQ8zjONxxEgIH2xQp\nkgq05fhLBcSs9Nq4CI9ev+fJf64cLjCjxI0s3PKmH74QvpDQZuCXrZ6MItV8\n4Bt9ffZk/hJHXtIrpXT3C7a+EC6EK2m0P2q1ImkzyzrmEfkXZl8WQJYfr8TL\nidGz82AeT2d96ShaZHZ8KN/OhIMmJXvkiLT0EEDAnWgWiWcpjjW3rv4aOW0E\nGBteOP9K6YdXbvoFA8Z/Gd15gQtcT3TSa0Oxz1oJ/SD/u4VB2WxdCnOCNcpX\n4Y7T+beaNjV38xCU7RhmvF3pv3861CAA9f8/FLVKqXw7Uk8DyJA66bDpc1al\njiposA0u6SqzghCiTbnetcGqXJeJwkqhKAIJnVO45Ep6GXLtLLdoCZ08FWEZ\nGtoSuovwLcGof6K9TnCWTGC+sz/nvLCFl/7PilZO4GmLMKgfOFQTS3KQTKP6\nsPrgCRD97LItalkLC1ANWX/g7TjaJx8FQTB4WjqAaJYNdSGWa1hUMFYvS50W\nPnc+\r\n=S60g\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8Y77QmL1KwPikiJLeQA77D5+VpoAKiENchTn5aPSUEQIhAOO0wXTQRugELHz8YZns6T6yT6CIj2Rfqxm3baBZ/b3e"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.f7abc7a43.0_1578508066463_0.6983861106582003"},"_hasShrinkwrap":false},"5.0.0-canary.bf7b4a061.0":{"name":"@material/grid-list","version":"5.0.0-canary.bf7b4a061.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0","@material/rtl":"5.0.0-canary.bf7b4a061.0","@material/theme":"5.0.0-canary.bf7b4a061.0","@material/typography":"5.0.0-canary.bf7b4a061.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.bf7b4a061.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-C7KHTcNqm20CJxG20s1/lJlKD3CCl7DYVpW2rjlRe3TG0PASRoOysF3e1bsB/H0t/pIcxCLtWZMThsyi4OBLag==","shasum":"863d51173a5b94eb5bb44738126823f041e3d6f4","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.bf7b4a061.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiJdCRA9TVsSAnZWagAAQRUP/R0LOWuXGUAmDrndAMLa\ncD0VwdPk83jhu4QBhWHzhvthW7Kg3HL7qFCJVpyhA1NMVE7UxgIS2rj5oiwK\nAOUqA0EVdLq19K4ncl4RY7v7LKe0pra8jfkNvS+rFQxBwpjpOg7y+pA7YupQ\nleo+XSGY6K3vQpTladsgtkaU97LrLMsGJqgg97+/8PpmNz0h8nO1vxM2inWL\nzrsODiq/gidb7d1Xa2beBRPL/+oQAcYQM6GTyWnhh7XOopJlnloO5uUFXkWa\n+dd2MDzZi9CM1dIQsgCWA+enaTibwAyAQZErrlqDaTCSduNHTgMvdkDFrL0n\nPuj0tvsoCj6CkZ6/12GJ2c3KaZmFzOctnFMiCR3/W1l+/qEnJdCOJx+LV6gO\ngpeiAxHzcEYK7rE/+S2NohgTjRcgw2B5lHKLuqvbJ1k3s3WJiP8hB6DT/JtR\npGcXmxHkhU+Kj8JIsusY4lsI04l4Bu3Lc59ozGFpfcfiE080M465zIzhuQAy\nt83B2WKOiwzIQxk4xZ8RuYqmDhx07n3cS6VTHRWXjDg/LwpLHOqr0n1qVhk0\nKZLmr4oHOLchvkaWADaH/i/H0AqyczXabd245ALi7bITha/TPBHDz7w1Sv3w\nVBpnAOd1MXPKJgVOyIR2pRViTXs2PBujP9dhAJZsuPfZnSj0fvcmhiOvSDre\nr/lv\r\n=lYtu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCMb9q60rAbFHbNBpMrloohEkZCzYXAgOkLwePCNSqJOgIhALKS8q+z8iER5pcoMZskoxnE/L2wzrQbs3F/vpJNxAhy"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.bf7b4a061.0_1578508892666_0.6523730874030533"},"_hasShrinkwrap":false},"5.0.0-canary.784fa7903.0":{"name":"@material/grid-list","version":"5.0.0-canary.784fa7903.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0","@material/rtl":"5.0.0-canary.784fa7903.0","@material/theme":"5.0.0-canary.784fa7903.0","@material/typography":"5.0.0-canary.784fa7903.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.784fa7903.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-jXUyQ2mue9keVt7vB0kXQkwKGZzgZyWLbbtHsp+tf09E5+MDlrWWRYgBQia87Ai1cIpektCXSkeMk6x3eZcReA==","shasum":"9fa6470a6e9ebf9c0fd9936622f285f7a69e1fdf","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.784fa7903.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFikaCRA9TVsSAnZWagAAM/UP/3Z8O2hjW0JVH5+RyRDV\ng6u7GUkfGfjGVjGKNSxA8hxPwe66PgQA+a+4F5vR21Xbq7xeYww5B6Fd34gz\n556BNlEyafLvcUUBMrA6XFVBgES3KFoSbKxGv+smV4+/uumlr4xKFsvD/PyI\nrZfDjvmgtob5wBlHd0Yy9MoXvJFuVks5lutZjvUimZKulXUjIjQ/KN+97FeH\nrdezJT5cmJE0myCqjzzMo1XekQlffE8CwhggAct0FCkb4/B1ZLGrAGVlUZNU\ndKmyj474kSnv7dQaT7RQsxxdD8X912YkOnZ7YgISpUCJhNAPIQc9PKXnPNyh\nho5sJLm/XyA/nlT6KRq44/TPBwp3tTgF+uB5IsBIPv/yIAbpH5jsjDtUqdgG\nIBqLDYacHun4JFYEvQmlQasAFCyqkuyLB1NDLSTg0jOOOUP9eHZQ1mVRELSg\nb20n7oAlYUoFRNIrisb0t9t5qwVUnEldG/e/Wee6VjTBt33mkP0G0qFfKaO4\nPvwcEQcrEvpYbQVDqNhfaTIkyrOSfUeDKP18a3Nu2HAb8srteFssb2KEW6be\n4EpMKb34B8rHJH/Nu+CFNdXMC7PqYReJuDvOqTdoSvq3Nsvxwml+tWo7ijUv\n80d/D28mmdoflqtBCA5Nl7q1uybJJp8veF3diEAKh2TySH6s44TKKFuNqaP0\nkyrR\r\n=jiku\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIErLgp11oXrIa4K8JvfVXLnyjLd3rxrEFYYLlfAfDCYxAiBJcAEE5nq8Z+MdBtvvom+kq+bhebMRshiMUwWfksVaDQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.784fa7903.0_1578510618437_0.23694632282429895"},"_hasShrinkwrap":false},"5.0.0-canary.823c050ba.0":{"name":"@material/grid-list","version":"5.0.0-canary.823c050ba.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0","@material/rtl":"5.0.0-canary.823c050ba.0","@material/theme":"5.0.0-canary.823c050ba.0","@material/typography":"5.0.0-canary.823c050ba.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.823c050ba.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-hhEVtjQdjoTHQ3QNWz8zQanHel4YufGkfJT0rLTJ+GYNQYrFB19jbC6WFk+ixaW7aHGgvj7wuBK1hzqz61chgA==","shasum":"8451ec74fe1be9a77e9c6c3f9ef4a8df92184424","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.823c050ba.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjdDCRA9TVsSAnZWagAArXEP/3fetUFqHVPYMFlIMhR7\nvT08Ojb/ODkLbdbH3Ke+/SEFTQArMQfnDPf0+WShDzTyySSRkLYTkP5XPwui\n/tQT7ou33T+t7tvgJltwifJvtlQrEd5hgj1kSqZ73VSIduYLkw0vE6yjbX1p\nIxbMAMy5Ry5QECurmn35kd+fzabTPSn9YKRLrqJzSvTBnDJydgIINXoP3Cii\nSq2BKzT7UBERMFy4eseBtZLaev4XB7YkQO9KiUIV3CmuP3dwQnxBQfcmvVNs\npy54fPkjqilVnNy5JaUJ8XnIpzBZFf8rVG+J+QltutKcX0r7KfszckLONcM4\nfyAoVwpThHZk0QqxikxveXqF7jiiUQrx7ZyS8Z90ArfGs99FSYQxh3GuzeKn\njwqmWVPHpl0c5s6uU1Ni8BEfnVmJAOg+DzdO64kjyBqaBNltPe0d6UjWYlr/\npbC4O+mqdJfz38larXrgKUXsMkX/QzdcZzIfCXaoEfSb0q5TqjRw72w3LsEy\nwHbv0pEjWkvCOJ83VQpPS1RRVGtSEkTUv0fiDSCR3jfVOGLQmzeXULHdOBFI\nTIJbRHkfII1pQ2pGTrt0jFWiSr0799U15mfUXPAyhm4h5NVkXVyMy1WqH5b6\nBDNdH8z9NgxKWMsUe0dj3faDbv+eYpa86v7gyhAOgFismX3ZKGO4bsJWlTdS\ndApN\r\n=SeHZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYtINPPoybJ4cj1ErvlAHSob98/nf8KVr9TDirFA9EAgIgcA8j1UzG4SmjsYN/5TlMI5sXJl8O9ZglYOYsJ7C5ioo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.823c050ba.0_1578514243294_0.016193252229113497"},"_hasShrinkwrap":false},"5.0.0-canary.70c708dee.0":{"name":"@material/grid-list","version":"5.0.0-canary.70c708dee.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0","@material/rtl":"5.0.0-canary.70c708dee.0","@material/theme":"5.0.0-canary.70c708dee.0","@material/typography":"5.0.0-canary.70c708dee.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.70c708dee.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-9jpLwactHJ0Ls6RBLwfTEMaTOfBu3jDbFHopuBK0ZmerCLmgGdQfG07EpBDt8bJQO44wrz4Fd95NrE0CO5oIng==","shasum":"3e086a0897d867ed1e65fcf86559c4af48ce45f6","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.70c708dee.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjn7CRA9TVsSAnZWagAARTwP/jqSuaf/OZg/arVsDZSU\ng+mwFW5EFaLeXlxM2Yoefwn7y5lSEoWWy0nKZZjHr7gCKolhfhs3UvOVcRpD\nNJcGyblI30xEEI7WcC4332XYGv12T6B4T4bs2qLhGtavUabqZraSt2xmom4G\nNr98orDb+GXT1pfA+Vx3WxLj22M4aGsw5gxVGF9W0rhR3DmmhhZsgD/Kl+SR\ndpVLfJfqnkdHmJX4r0VRNI70u8KX469+TVidCqHN8Ooxn6lhjDveLGhiTHde\nohQ30LF0Xof4o2G2vNEu/xe+J+pq9Tb0vTbYi+Rl3HNrNzs7WORS7xJ4QNyJ\nZEh0a/vI3WqzyceZHEe0YJ5bVlTQeP9euhm+h1tdwayD83uP64FTHqEZRvL2\n+EUJpX1wopi38BZsIwxfrUHsU2XEem4yAwyuLc/qci8W3GhZsFvEK1Ez+7aT\ndJ0ppDmKL7r3T51YsSsTiNjABy2nHi115r9q8XyAXj/yj3jAYiXWUzrS7Uhk\nnmrIxm42TJN9M+cpX3OyTOB//2RU8Hsh5tskfq6aW/qKrmmbAv2+KfWBFlf4\nzvbF0ip8un5QBLW0ytTojn0/eYO8BLTZP56yFuK6yyBPF6pMIsd6rg3iHXEk\nFKS6exISVHZ5pZU15Rt1V2oFERQAbG9isPeU4NkuyJW+DtAaoYrjGzGzbzym\nwXN6\r\n=oYu3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCqhH2x1qyOlrOeiRQlXVHLF+4noYkXQorT0CWLHGdxkQIhALZm1ex9/jWTLwoA63+YQi5+13rvj+VGSw3/qg1jsr2G"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.70c708dee.0_1578514939561_0.6781684489933368"},"_hasShrinkwrap":false},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/grid-list","version":"5.0.0-canary.5ed9d13d0.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0","@material/rtl":"5.0.0-canary.5ed9d13d0.0","@material/theme":"5.0.0-canary.5ed9d13d0.0","@material/typography":"5.0.0-canary.5ed9d13d0.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.5ed9d13d0.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-G9W/RGOpwYLePYnmAaIe/zwaIIpv0LaELQtT9aOVGNnRv7GzvKRSdV0o7kzSozxhqKIcPshxPMchUpTheDB+Mg==","shasum":"0925495d103417f5fae78e6368592117232d0c69","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkzNCRA9TVsSAnZWagAAPtoP/0dwdR/PySaBAn58jyt5\nSXSYn2/phc0XKHtxCDdnUWZ2pRoeFQLYJ9fEgxmskeRzvo2VzhNW0B9eQyXu\n+d8lWihLeBLhcqemNCuX2oGK/jjcbZ3PLqVSY3yTQp1unYKKILV2l8FoW09a\nnoCklrhsf1jOUaMK3sy60c2Sjo4lCGqSXoqWO05dN9MHxgOvNAlgBwKQ3VNt\n90q4WWF++ICgPXI3r7vlvP5uJ4TxzfM9qH2Ku+XdytiWe/4AEBbdQd2r2CDQ\nGHNjP1rEtTskeVKHMwni9RHToQXDiGbleI2ojBhr0cF42JWIcwPDxrI0Q4/k\nwi7hEoV2PhUq/A15/B/wbzLfe2UMo3jcDjzcCp1DGsDqhWTd2/wlBNtIIzdM\n6Ak5tAgxG8FOMVcRajBmsdLm32ndDCCFTw/3qIhHxGxOKeoac1YbycHuEwDD\nArPoobmJqXC3f249CXvXr/yg1NtQfAmrhB5arK/0Wx4k3ji5oPcPYseVN2Zd\nQf62nJk5zeMfvLW9PE5hpHxXPXma868HScE8CgNquzo0+beXedoawgFWyf6G\ny7uinKpqsxKyp7CrHejkYRAMH+ctdxtBa4dGE3uXm7lo8OV89/mJMSXi0aAH\n29rSvlvDb0YhHBXeZo5A8B3mHF3DR0VaPeMpTbQhSqZmy12oxcNOJy7rjtDh\nlDjK\r\n=7y4Z\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDUfYrLBhtvyDeAax8JSKjVDnR3S6xYrKbpTByZVCSF/AIgMvoj34vF/rV67lq0XV0BC7pPRu6b1BHGfNP+z+J+IFo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.5ed9d13d0.0_1578519757070_0.5827583987911282"},"_hasShrinkwrap":false},"5.0.0-canary.4819cc7e5.0":{"name":"@material/grid-list","version":"5.0.0-canary.4819cc7e5.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0","@material/rtl":"5.0.0-canary.4819cc7e5.0","@material/theme":"5.0.0-canary.4819cc7e5.0","@material/typography":"5.0.0-canary.4819cc7e5.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.4819cc7e5.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-yEvV7UI3G+Q0BearYKFCOzqXXIlc5P1Spz/SkxNe/di1wZgSGnETBEiHMFgTy6YLEl3ehS1KGwa8szS2OBPesA==","shasum":"09a6ceb1ca27c9998d5eb33099b1875ce3cbe7c1","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.4819cc7e5.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlBsCRA9TVsSAnZWagAAECsP/RdtYxCl8p4XFrt339PJ\nwCUX7iP/C64+xxVM4A5gUZScO9NzjHJ3JlhpIBcJ3R9/NmEEowjf5lcJU7lm\nX2h+xut6eqELlG+zt8sVL439WqsNG/pqX93bDOlTv6DrP7m/005t7ESDz7P4\nLOSUEqMuwGsb+UrJw9IHb0rbZX9aQp2P8E54KFeSR8xGYlScS+Bb7CPS9/wm\niBZBDGBrPsCriTTMwqr1JB4Aifnxa5HqkbFTqtMYzRDCkAvvIYcZNqHYNxcY\npMPoK6g90stjDfKbezaWPJzc3eJ8Qi9dFdIeG/N3NBoki+erwF7m2BHhcPxa\ndD5AnbRu0CCXsZk2Y8Jtd/wXf/P5KZZH3V0Xd0ncliJPFDZ73b250ju9I981\n/m9NChDyyvrF62enFd0hp0Jzk2JNiOmTx55QmFBIKO71qEsIM0jBnM+YTvBU\nQRbLdag6XJ2iwlHZ36sNT/DDpu1g8Ncx4tZsAW0b6gymIZ2eo1cCvmAxZejg\nfFWBfqv6NvK0YaCPCEyN9nbED8dHKRBjog8XQ9QnZucMPI7GcTdnIc95qTNF\n1YysHnY6eGAPJhzUs+Q7ugLEXd++v8VOACqs6c2PUl5H3yanj2QD7ZVP2U5P\ngBYvwG/igshkLILZnhK7jVcMiFtz7QkG58X4zPktSXBW+xcY5JfROMNOV76o\nU6sf\r\n=bcv8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAl5m9+Q8mpXQDLa8HOHIsLGZJumPLRZhS6Rp/KWhLCKAiAnBIgpE7opkMibEibpptTfaHFnJm1bZsqTgdJZWuKimg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.4819cc7e5.0_1578520683702_0.7811390484206291"},"_hasShrinkwrap":false},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/grid-list","version":"5.0.0-canary.fe3ffd2c3.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0","@material/rtl":"5.0.0-canary.fe3ffd2c3.0","@material/theme":"5.0.0-canary.fe3ffd2c3.0","@material/typography":"5.0.0-canary.fe3ffd2c3.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.fe3ffd2c3.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-6imUs8phiQ3n8pYlHDRzHlDHcaBgAPUMZ+giSUTF2ZMX8jy7SXldoe2K3FVi2uUwI3xDQABZOfLmf+ktlKzJ4w==","shasum":"a282c6dc27ea7cf1bdd01cf12ffcb0ac3b0333e6","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlStCRA9TVsSAnZWagAAUEwP/ihPlfA0sS2qIHmOEL5P\nqRTiQGRkhx/lOkqNRAcBkzdQtJoX8Hw21N09cyn/gfuLeR7UFxaVl3kIuRnJ\nYfhjGJwRQvwSOpNDHEfgN2VIMb5uvyB5+rU70WH2NjW7giLmk0RgLtYvPY3H\nZ3DJ8SZZ9LZHTIr320kjwp9vvfmSzW9fECiOzXqm/su6qH+QsCFj7r7H3MfF\nFjR9D1VAGfwWjFF3FpLDkd1ija83n3EoX4raT49NP6hawmExPOTK1EkLNeEb\nTAuIiMtAAliJ7XoaCkf4DvTTNroaV3USvLJ7UC/uQjHoOL1fFYvQ9i/BTQPh\nnZtugEwbAkBaUBGl5nEHwkRyX79ipliHajIFWLY+Z/UqgWTl14R7Q3tsscPS\nmCBGAmxaSf5Gvpvu+zGduJJKdkMY2m70lNxLxeP3VYNnvix3UKmfXIQpQJ17\nF49uloH1CVnk7w9GmWXDxdsiSmPlhdvA2tiW/ALryeO8S5fBdw8Xp35oCxTt\n+eslNylweYSIrKdVdg8F5ZcgGaxYoG5CBC3X1XC/Mvczel8qYXAvPCgXOSqD\nvyaE1AbMBTVCVJ/wlWx9xK8omKAo6V6jqBWoClPzxpKSE2/nz3Db+/LNGjwX\nvqWkHOzzISs9ZlUBdFFUTf/laZikeVrFtdO3Q+dWf/VFsnYjya6wEv6I7o8W\nlOF4\r\n=zxem\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCID6b1bGo/PaXq1JS/NLlNSTUpjZuxRmJ26vgRUJoLgE4AiBViDqOUpyk34CP2QuVc6eaCWw8C16jGHs9IUmxPk+xTw=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.fe3ffd2c3.0_1578521773003_0.2564301685728265"},"_hasShrinkwrap":false},"5.0.0-canary.c0e850090.0":{"name":"@material/grid-list","version":"5.0.0-canary.c0e850090.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0","@material/rtl":"5.0.0-canary.c0e850090.0","@material/theme":"5.0.0-canary.c0e850090.0","@material/typography":"5.0.0-canary.c0e850090.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.c0e850090.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-lb6I/+KXLzvDol7pmoH4uoY1K0zUtDc3emHF+uVPB/3k6INf2y0RI4q8v4e8y7/P+Vu2QUtB+V5zNth1xYKdGA==","shasum":"d31f0fa45a320c529e45951d5a8b4d51c5d8d600","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.c0e850090.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZQCRA9TVsSAnZWagAAxOsP/2z1Ziu6KpUXsHCn8mfR\nDO/bn3rtBD16EJqJe+wd/ugTtS63ZQc/pnSvBdTIxXu95Gw2mbgXxqjx1Rg/\n2aY3Cx1GZjr4+6uo2/lw5crl67i3yN8LwDGypns9UjgdrCMRRo3W1sR5G1mV\nlMBO9MoR0u9CleE9WcdqT0jodyKtBWjhbW08IibwtK3NNz6f03t84scv7u4Z\n/yrJ/CdB/BZpQtJZbLVuzq6QKFaybX9WzdQAAqNjWFA3K3T+I1FrBvNCxLcB\nGTSLfC84VMlerlg8uG5FiJfQnCRvZavVIacZKAtJn1tgERGieI7Jp7281V78\n45YoX8oHGZuCWAxZ3bivERxxW8y5ghUQscPNyREp0a1Yy3YkPYlXmt2fi2oE\nLeyKhhcPd7rBcHuU8+cNal+3yBmZ8j1st6075iDbg64is4c6XP20k1eiUTik\ndTmAnX7lupVWSaOOhNmRC0n1nBMX1CzGYP3ls5CQ7Wil1xMveKT9lLtymOT2\nFB0qe2oIENMlCs+hrU7MeqgzHTXtTZ1KuxRWZwA8zqX6xIilakKhr+TccnpG\n77jOXgQWXIZVGraIqSYQ+1cJlh9HZ973/uVoPoxDvmx8aXvwZogbxRwIA803\naBKt04i3/TGO8y3FYrUHRBhUmSzH7OLh6hYA4O0f7DgjwRGvkeTtxoqQ51J8\nSXTF\r\n=IKHS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlaMaiBn2XtGYbVJ5bQh8joJiN01/GvSre2rZdOa9rVgIgIDjfaXc4oc6vUchk4tXSb8eSf7nQe4V4FbsF/UCQFFA="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.c0e850090.0_1578522192199_0.3211440334774365"},"_hasShrinkwrap":false},"5.0.0-canary.615f86f38.0":{"name":"@material/grid-list","version":"5.0.0-canary.615f86f38.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0","@material/rtl":"5.0.0-canary.615f86f38.0","@material/theme":"5.0.0-canary.615f86f38.0","@material/typography":"5.0.0-canary.615f86f38.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.615f86f38.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-uGGVVrMLLG6KBHsbq0B5HkKMo94dwKn79Njm1bhMzYwNeRoJzwWSlHyCDe36jguHhX7Va6R7PAmh5hxGWAiY3g==","shasum":"b3d4a0e4bdba84757f5c10a2069e13fdd40b3296","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.615f86f38.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlpOCRA9TVsSAnZWagAAJ3oP/2e/QTC/FlH4OBu/pQ5g\n9dgTFrVci+ooL168ztq1cDcGZ2QVpbzvipuOR1UE1AwuQu0OqZt5jPBTiCFG\n3FSgwwQeZT/igBiKuhQsf2zy/wGUb3iOr+YltDADpfjAgUH3cp+Qt2ZQO927\n2R2cJu/8Dj4Sz2LMtgSpnGj9Epd/Gln5IyrqH4oc5sw2Fwfsa2wUsE7L/JG2\noSo6tci4rDDfEXt99KWzoVhuB7+nnxwCM3LrubtshQD+FtaCOE2v8Vcn9b4o\nCLDxTyS9sMV2FZEpMm5vuxpc7PgoR0kM3slDjrTNZGrqF01Xc/rbD2cewmDr\naBQ6gB5rv/npj8PAbtwlviTh+jBuAExAonQ7ADTRT0+3w/wL5fXIFPNDyKXs\nwcuc+wTZcFWScCWp08qbQRQaCO6EFwoOQyL+VB5gc3Q7riaTF7OVKLy3hYv5\n0AjSAiy+M/QrDW+boboBioX9TrxxMJHZPLFhfUjEdMVnh7I+ORcRQ+h0DB4o\nXWNY081nZ1Py02hft1zRKK0n8AVWQ2jNuA/JKf3emKuRwlvI62BkanzaM8D1\n7d1n541PFSfp5tF4BUfHS8SO14HmGoCZmjB/oweR0FzKG+ziKkEH11fOs+J7\nN7g1mJZKc3prifo3V+VWKtM6x0QMCEZwPgAJFAsYvDZUH5HWhUalzMi7xn6s\n6tKM\r\n=Uqgg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCbuFO2vgxXp4v+yIV+ids1hFfPC3JuvogrPr87qNkPZQIhALYjzUXdWts695OHF1n/ZQ7HwmzatIvE+okY94WF2z5m"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.615f86f38.0_1578523212567_0.5388037310904239"},"_hasShrinkwrap":false},"5.0.0-canary.1eb032637.0":{"name":"@material/grid-list","version":"5.0.0-canary.1eb032637.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0","@material/rtl":"5.0.0-canary.1eb032637.0","@material/theme":"5.0.0-canary.1eb032637.0","@material/typography":"5.0.0-canary.1eb032637.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.1eb032637.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-IzBwhiCacujdDqtPUjOK5t/ZrJIkhiewzx9e60f4jCXNGxHDQbnfhwdiN5cil7nOP6cv6z2sMjJSHzMjhYK7Og==","shasum":"269ae527a89fb4bc42abf4cea8cba6bb9eaa0860","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.1eb032637.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl7uCRA9TVsSAnZWagAA7tcP/iz9CUJWJNLFYt1nv1hf\nU2L40q5GX4xfrbU2Z6b6j3sC5K+haT60hGegluyE4iokg33C3VQeVvKELZiq\nDJTXpAB7QsIHUnKuirexScXKhM4lstU1MlDHKc563eINy5toieyKWHmW1VdA\ncvVyTHbePOPXVJu5qPiHaT1nCUzpeMg2pui2wmCQepz57SmoQEkDigQQOXzz\noyzd7BIzV5hmKlGYAL37pf6y5ddhb/RytOXpZWa6i+Ixos/g0+EVbYpRDf8p\n+dR21p2Bt2nA9lX3CS8ZduS654td1c6kEK2lC6WUO7F03GHnTdyqvfC6Y4p+\nMJhB1351leKKODxpVssbHNMaqk1vUIPm27OBV9Wu9rfV8eBaksDasZOmRyib\nK6ICw4rujHqiu3mZF9SqScaHbvYP4/eUuGeOqpjJNQeXiMZbhe5/RuWXmpqg\neLT9pkNax0Dc+NwOfmya8vYfObX1YKf50u+eHVPqIw3OsvNvDBm2lbp4yJbu\ncyBCMfg+Ex7prYDhBFLpQUA4ZcRGStU0fuyE8kYXen3J9YD75PIkk8MbtMd2\nUEK+HbPWe5KmhttztfzrfVik34glhiTfbkx14DAXBUfsMl1CDnMpHhSqGiQO\nyLJB67j6tCbpNBi0bJTLKwrQPiuy1AQktiY7ToLYRsANPp476ui94uyHoU/l\nw350\r\n=cYYV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGZPnc8H0sVjVt5Aaj9b8Y9BLqi+B08pDGObYbCPtoc1AiEAuDCGOty/2BsX83TDGOnzMIh9M5fA5aeFmaPVkwyyAbc="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.1eb032637.0_1578524398322_0.6144462096724224"},"_hasShrinkwrap":false},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/grid-list","version":"5.0.0-canary.5bc5ebfea.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0","@material/rtl":"5.0.0-canary.5bc5ebfea.0","@material/theme":"5.0.0-canary.5bc5ebfea.0","@material/typography":"5.0.0-canary.5bc5ebfea.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.5bc5ebfea.0","_nodeVersion":"10.18.0","_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","dist":{"integrity":"sha512-71PFtyZ22bY8JTyWj1irL29FcNgWNK15CwS0JnMbSHrzJJyVRF601Y4VW108wuDwcs9YspB+2FAkhxuCdoPNFw==","shasum":"b757f024798c4a8ff6316872131e719636dec023","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8gCRA9TVsSAnZWagAAQHoP/RL+BagtfMGBqKHAFMpH\nTZX+olUeoOxybAb4F8HVkGchyw1TwfMRK6NjRfpCdfWS2UCaZDO4vui9auqI\ntVmRW8HiTNjIkWMJV20V3qA3ptL3DFUWGwDyqcUKLKS5xFoXySCc39xmWd9U\nZalhAcaWC8E/sZdNjxLI8W7EOwof5eajVKNWqmWs/uTYs1CF/gQ7xnopLbt8\n4VAy3fOo1piMJ1pEBHusK9t6cY9PcTMnDZHph5nmR3nsQwKIdvsYSOnWMkzh\njBjFmUJv1Q41q809upK3yLtPIlPzJo6YGTERVaNCPnkgwnNyyWr6Iyj8Jth/\neqeKcK5CVszkPECJrcJYRDj9RZcfImG3ZoJ/QGIXN/EL2S70R4HQYl2xMnVN\nIXJEB9+H5u2DMItnFU9TpED8CryMKGLF2KA8oqQOI2AMBFUimDUxTZi7wVcX\nzmle+AZzuNHTTLksJDkIHBpzRAoNJFfwlk9liomhlRtKsrbeA2QsmROwCmFk\nCctvMx2lQmS7AiknRlqWL5y4tDN+qGNc3PW6NIPndS2y9lYoXixhsh67Qcke\nRc/W6Q8eBZBSV/6eb7dYmqhVJSFRc8Mzp7QWa+EHrNjyvYFBzUG9XGer6IBs\nSYGhiZAXewdq8+wGstiUrqHclsmSVGosf0kjTYTR2hRRd/FAJMo5XAAqZfcN\nejVy\r\n=IAEe\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBEjbD7SumLRT8HLacDWKg1vip+p/SG8rdWjsxKTy3PGAiEAkVPZI6mKU5V1guRuMS/4K53kc3O7HXFKGJ6buHUa2f4="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.5bc5ebfea.0_1578524448511_0.5820627873734188"},"_hasShrinkwrap":false},"5.0.0-canary.1112b8def.0":{"name":"@material/grid-list","version":"5.0.0-canary.1112b8def.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0","@material/rtl":"5.0.0-canary.1112b8def.0","@material/theme":"5.0.0-canary.1112b8def.0","@material/typography":"5.0.0-canary.1112b8def.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.1112b8def.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-Bjp7LhLfypVTc8f5NOyVAAlawBWqrEQrcQsU4hHbP0M57+MkEGEPWPC4iUDzxor/OHrDp+G0oznSZvtU507rfQ==","shasum":"f6e75fd9af460cb8983842d048185a5de3d4d30b","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.1112b8def.0.tgz","fileCount":30,"unpackedSize":169787,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6TGCRA9TVsSAnZWagAAPogP/1j7RsmmRMmdEDgC2bbi\nqA1/Tj4SVm8+IQ6fHZAicRTmtstrIGwBIAlRiY+ATMnCxdzZqtXmkOaEr1BG\nu+zUCgJfQSgPNNW/I5WLKER1VT+q/2XCYKvp377j8uz9peHUmRXtX37iejrB\nufUVg0+Pjxk6iAk5pgFoupNXqYYop0RDj8ZDogmCTFqDwL+R7DcMgD3SM0ln\nHLEeMtzDozglqq/VYAs/2hPVRhCTDt8fAl4ITl22Bdnbaqlt/EsxyQPFxmCE\ncdzPXNow+p3unjmct9Ajkuh9M2Y4g8nQzRrCi36flrKq/BRZfJ3JUsTRVDrL\nqKUCYxwzLDHAPa8aaPJ01yeckLP7Qyd1ZAKs0hq1pguykArQiu1mxFc/TcZi\nxjmqSVnQy0Wq38/zrJfl9TgzQDVMIyuyLgfNICnWsCC6VrhhByts/j6ft5Na\nCf2ANmbntdhDhhQbZwM93G1stE8Dw6iZOE+VVE8T2AK3ea2HWDXDIIyto133\ngTmI930+lsQkPetfydi4yeysAAGbm3fv8VqWOVh5733ow/FTUDIVaV27HHEI\nJHYC8UqIpCyk2QLTmfcLDJBxRbfbfyEtijnvhjlg0p8MycvktYGIugit30V/\nG7ecETKOC2BW6YU+keWwhCFDMZqaocvIyjE5PAIkR30/UkPkeHrpXaAM0gNE\nkdzY\r\n=+eUV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFkkjIAQMs3xWy1eMFt01ikg4RiPEWGFfLHbzHWqQSgcAiEA2WMemxNhwgRDM0obtLdaIueFNUu6YPa8T2Xb9OYICJI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.1112b8def.0_1578607814061_0.4939011589262392"},"_hasShrinkwrap":false},"5.0.0-canary.aab102017.0":{"name":"@material/grid-list","version":"5.0.0-canary.aab102017.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0","@material/rtl":"5.0.0-canary.aab102017.0","@material/theme":"5.0.0-canary.aab102017.0","@material/typography":"5.0.0-canary.aab102017.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.aab102017.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-2C/sXj9J58IFQiBd7BKqT0/xOFcB2WDdRZJlmze7bGpWfENil7th/X0qaPo5brEuftg88h3Y20MBKBwz1rINnQ==","shasum":"d2bf7a8086024398ed69fdfa4fb4756c969900b0","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.aab102017.0.tgz","fileCount":30,"unpackedSize":170056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8FkCRA9TVsSAnZWagAAhjAP/2J3DHfnq/7R4SoZ+C5n\nQyFYzwkB5SlqO+LoKz6X94riLIen1bjFvvVY8SowA1ycoB1cm9uizoEF+/zZ\nZQgo2hdZT3oIB0ClBmhTxTc/VndlswHEf7JJ2y1YWy3TBSlbIX/lK8J34yzH\ne0HzS31RNNO6M1sMOplqquVZm/ODddI2ooO6B7exVeM6QPy+VQCZeuuCwhxy\nQdaS4/L1ZaV2bP+XthkvSlemvZ+hs/LDXUpuOBj1z0r5cnk/Pap9ObfGuCc6\np01O1VIuZy0H7mlarqdibiR8iRKqw/pFI/KHdLuJgl/AJ5fY1xgh8ecEcR4j\n8PSF6jKTGw6qAtaGQws0SBnH5ro9RH3sCLODJWM/gUGa+LU5B45+c1PdFouY\nMh4edLSH9l6cusVCCxmc2W6fR4vtQH6k1FYt1K4y7bDzShcxxFLNZdg90xBb\ni8O4WfVCd7CdGArlYYC6PphwAkkce+qb4KjgIPaNm8rAdJRVN8HV8hbLdT+H\nHMiV4ZbXmf0oHFaPYrQynI3VQ4BB186QISk9jWZzhPBnCzbVoSshkTAN1JpX\niJtllXZlX+VreYXpHmHWr1gAHTo9S20+8e4yX9pfOrXafdnqj2VQDA382Y02\nGkgjimqlYYzUp7/WIXF+mMwNgU/j4WiujztjLCfckOYLq3NcTnspeGb6EtHo\nXr7E\r\n=WHtF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCH2/ZcOCGMRga/CEZVkHUpqAmWvctVj+HCEbN9eH98zwCIQCE4gWyd5OdoqbsKZGi43zwHTJ5yDh250jcgKRqIxjmCg=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.aab102017.0_1578615140283_0.23919962719632748"},"_hasShrinkwrap":false},"5.0.0-canary.426913342.0":{"name":"@material/grid-list","version":"5.0.0-canary.426913342.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0","@material/rtl":"5.0.0-canary.426913342.0","@material/theme":"5.0.0-canary.426913342.0","@material/typography":"5.0.0-canary.426913342.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.426913342.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-Bpsxc7YpRJgiLZBrULx40Gtq4N7btZRhuG7UTqxiU0a2S9l203N8CVILUH3n3l0lVQBYDPhsslEplkoJ+DIsZA==","shasum":"d2cbaa5735eaa7ded78495f2edefa969719a37d6","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.426913342.0.tgz","fileCount":30,"unpackedSize":170056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9brCRA9TVsSAnZWagAAc0oP/0U5BkKSGom3AAGAp+fj\naHMQZe5Wnzry9/IsyX0CEQtNTkxp7mAyAPzrO9vYz+nnjhXK6R6Ozo1cpuxP\nLb/cem3jsmyKQJW70i4WFb2tRwC0ZqiC1W8ARsMfJ020uwWIJphpxIre1aLX\n3rJnWpv83dYFZGm/ArjdPhOLpJ8vIVyyx2y/CXlCOwksMQ1hzoeYu4OtF/I0\ngkrMj0QZ4g/vQAOwW3OGcPcUmiHfmbAlXkvaYy0KgpmMC0Rv+75wbu/rPSQT\nvxKY6rTzalYL/SuDZ9M7yYt/UGIC4vEtHboZuvOyqWuBUJSaeGtUOf0c87Fg\nDTtyW+aP7X2f677bwgYnjuHAJIgUspkqaXPKXrcxkAFSQVxv2fVikFn6HylZ\nYI+TaZq26229u9IpdG+oKR28r32ju9VFO2R6/q4xOx6GyN5cCQcVB7y9e3R2\n4fSz72EmLRHziy6S+MoYO3FKGNJHQZfXNkTMY6xU9OTNpuS12fzqYxWa+R2l\nZQm2X2rupyv1KOpHlZZbVAYZ7Nt5oAVBtwU6hvOAtarBzjN1IBK2KiqKHbwt\nDDfaIfKGE0XdyF4kfBdCnA30/hfIft8TvjfQfpIfkK/Gj+uynn5vDI8VpLAz\njqeyhVKa92dDbuukbACk6bm4mxbHn2QaOH1HbRj7ZlQMTS+iw86q2M25j3SE\nouPu\r\n=Puk/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCm38w1Y7lkLE0Tqr+dj/5Hc5b3xehNllqlvmP0GlyphAIgUmiSEmdjK3MgKRE+g63yGLgRxgtYE0+1v5hWqXJNzzg="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.426913342.0_1578620650722_0.42246945532306723"},"_hasShrinkwrap":false},"5.0.0-canary.d4ea9a706.0":{"name":"@material/grid-list","version":"5.0.0-canary.d4ea9a706.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0","@material/rtl":"5.0.0-canary.d4ea9a706.0","@material/theme":"5.0.0-canary.d4ea9a706.0","@material/typography":"5.0.0-canary.d4ea9a706.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.d4ea9a706.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-0gNP8eFJ8NBq6OAsjZ3SU5SIRsJiKNWG74AvFBM3StYzQlVP2tsrwrbsQhfhWbA2LOw0zA3nKHuupnkLXBqmjg==","shasum":"cb4ebfc7c4d88c6babc55b130d01293520598ac1","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.d4ea9a706.0.tgz","fileCount":30,"unpackedSize":170056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLOBCRA9TVsSAnZWagAAFSwP/i0jEq/f+YsoU4uPEhTA\n8/wFOlIIpRqkBe+cl3GmO+3HBV6khb6/ak7AynfzbW+5ORH6kGwWpTnF7SLi\neHBQ12FjMP6eX58tpCymKxIXbar381KThGDj1SyCO+s/aUhTF/1UlVnwxRaz\nEPxFf5Hy1PyQB/7P4JeQzf7HOf0Q1g0hSO275k3FE1mNJo2aY0aSsl1e332w\n9+RZH3AJRkZaf4Dj+ou7F3S4C0pJGpSCS0VtRSXquzDr04MUVkJZ+z+3ubua\nN1zdObdSx1KHigwldRjRyh5uvkp4mJijQUVfXBm7C/Vvm2mt8Fgs9x1X8YSQ\nMFc62/MJ9OAE7PhFL1klLe81KtnEXPyVnFvJ9bAc61kr4oVLy4Cs+mT7Brwm\n3oazbdYcRpMXCQ70LNJP0EiG+mne1WqNx6fIBRct78oIbeTyEfle1jXJzA/w\n6ss4x9WY9xwvpZT7ITzfQK2NQv3S/DRjTR88We2WX2JtyjeQxd9WpW86gnX5\nvfYmTkqU7LOyFc9Dx4HjT96KZ7D//jSarqTe+o9jGl6XX3zFWRehQwrO+xjQ\nRcFy+YTJxMiFpxkq5EiFaxHP+ZrpEy0QkJrn6kLmBfkPXLHOjZyNhwKAn6kR\nuJ2xGuqmcNdpJEG/mTKgxQhiq16Q6lst3XXLCTCD+LoGveehhpbYYkZX1L0U\nBP7A\r\n=2eje\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID9u/G1/wnWVGuEyEeM2sBRFp3glMzsLQNBIGo/d9b/aAiEAxcbIAZ45Ur7VAFKDTCz6l1An79C6itApjARzON2/1ng="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.d4ea9a706.0_1578677120810_0.028790359633424467"},"_hasShrinkwrap":false},"5.0.0-canary.7d4ee2996.0":{"name":"@material/grid-list","version":"5.0.0-canary.7d4ee2996.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0","@material/rtl":"5.0.0-canary.7d4ee2996.0","@material/theme":"5.0.0-canary.7d4ee2996.0","@material/typography":"5.0.0-canary.7d4ee2996.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.7d4ee2996.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-bJofZpEudo1fmfWoDtsFzlh8unGNFSWhz5QXvb1eVVLuUI0ENVArGdshc1t7rXvdO67r19kY7xNxgM7Frb4CvQ==","shasum":"8743e9a47f9179090d09916469ab29362d8da1f8","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.7d4ee2996.0.tgz","fileCount":30,"unpackedSize":170056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLrkCRA9TVsSAnZWagAAoqkP/3pJ04CEaela7T+iFw/J\nSc7zhapKXKlvEtXmd1weFRleMsMOfda0q7R/WFqAovN0vC3H990r9Ogj1+oJ\nlPptXKSwWJVqoMCWtwUnSFoDxTYNPqq7QInXZ269uh+1TY4xENAtsHywxzQx\nmvr3djqqTCjbZwGoWv78Am19xwd08s49CkO/tFXGmcK4bytjieIME6qJN2n4\nt+d8+nq852h2Vzd+UOLZ5Ge4NuG+bU+9Rf6m2mBPTOVRl2ku9xc8igXRdHgb\nDYj0JgsIY4PUnzPW/gczIP5IP5OzrJDgk438VZPmBEy6fi/KoqDpEw9vegG3\nDNLh7SNNJc25heWKYsgV2A0ISqASmTcq3HotnZJmf03BNwN956h6VgiaKo4U\nUAX+k0Z6Gd3HaQVJmKRq1mCAStkiURFKa8PgwYnmS2wvb9nByfj7KD7v/YMb\n9TmyX469GBdplCOUR5lE8fwajRMvgGNm5y/BovudhA0enPyFBXqW5xPqRXUm\nCooWl+pXR6rCXOCSMXQXfy4KIMVWjjQKwSGromwPoFNzBrc03PgY5ei1TcXb\nnJyPxNuq2W41j8KBricN7TShY0O3xchK7aFzhYFa3+uos2PrzSM5Rq6u4kyi\nrAR00+qtNvNWZOkJbX5S3FtxhLGOAImtdyhADd7ity87BojeVqS1gbxURYz2\n6OeB\r\n=tvKZ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFN1mjDCpKTo0wdx7+TEAhw4A9oEqG9ixQZdtIc3LcbPAiA5Rp4G/u0I6JEKQjgLt4TOuNDX288vfxr4ze+FIYNCXQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.7d4ee2996.0_1578679011923_0.7788443760757708"},"_hasShrinkwrap":false},"5.0.0-canary.981ec9b6f.0":{"name":"@material/grid-list","version":"5.0.0-canary.981ec9b6f.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0","@material/rtl":"5.0.0-canary.981ec9b6f.0","@material/theme":"5.0.0-canary.981ec9b6f.0","@material/typography":"5.0.0-canary.981ec9b6f.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.981ec9b6f.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-w6PCPTvoOh0WugHjl1k49HwHYDRsKblnVPYGt8sqf2Lu3sBeodkjz+Q8OKira/7ODWE1SU8bcYckm5vRevwz9Q==","shasum":"e6a05e2218ae95da3f259cd6801be6433599ac64","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.981ec9b6f.0.tgz","fileCount":30,"unpackedSize":170056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGM/vCRA9TVsSAnZWagAAjy8QAJSm98eWMSpnTK5c3vtW\nIvtZu0HUCdixrCN0StxihVNvMkzQZU4rMlSbITyXNk0ADCc0qdIPaSD6+1TK\n5DrWFYMKhe6ZJJAujFSkoD6qGk77yTAfAI1zyTrsJLEiPhFO2HaTuiWs7Kf9\n7WSse2AXYwiokzFhppWP/Fdd4bs3cFUMKBAc3sITSQGTjQP2jblXQGhgCUbw\n4lfGD7/tZ2SkMQY+m6YLK4OHX1EVbrEgwVB7sbgtpi6NGeM7YmBEjHImc6qd\nvUYS1UcHNd7Xy4oW3AvACVic2AiFT+K67xbFRIito4m4rJOTq+v6J84B6Qhw\n9u871uzfYv4ZiFjSAGX1vwXK+y0HtxeM4z6388gP/8lFvxe1/DN7uzFDkZeh\njTVh2Nl7dDU5Bnz6Ii/vl/Y27euM4IFAc5KDKPol0ZyHWQD0jBcauyBnMwYR\nH5JJ9ufBSVf4Q+xVMn28PPGN2VmVmX08w3XnkU/jqZfKi7bRv0Ej3c/lhN63\nzU723BVNCJHX/39y56m/PI7fnS/qj/tAFMvfHYzfPBGyEW9/NX3dHTGyiykY\nqgz8KH0/LRfmmjS7BUsfdDjTsgoJdXX7c6Pblmb2k1dZPzfW+i7folwSJ9S6\nhBVjIl6WD/K+L6RwCWw35I8SqgBWE80RfnhTHqwcf1E6rlzYdZ+KHSaqVQZH\ndZqq\r\n=/1QA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCK/q5xCO2siS2RhjVy8VRxcMM7+eHVq4T2Q+aogOKeyAIhAMwlULkr66fp43x+myc0f9H3AeEB0WVH6ISu9wGQSUx/"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.981ec9b6f.0_1578684398665_0.68396026858651"},"_hasShrinkwrap":false},"5.0.0-canary.737da83fc.0":{"name":"@material/grid-list","version":"5.0.0-canary.737da83fc.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0","@material/rtl":"5.0.0-canary.737da83fc.0","@material/theme":"5.0.0-canary.737da83fc.0","@material/typography":"5.0.0-canary.737da83fc.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.737da83fc.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-0wBtU++8xDfA3kG9BVjE7ovIIWAHRReZW/mwySqO9KPyOIMOFp7JwAzaztQ3aQOEy0bA6aTO/BAy8ruUGczlGQ==","shasum":"399ec726ab05e08984c1d46fb6e1eb1778fc1aa0","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.737da83fc.0.tgz","fileCount":30,"unpackedSize":170056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOo5CRA9TVsSAnZWagAAQykP/ic1wPA0kiTRKp9mKNCf\neIvTz2YM4ix8KUz2UX9v3hficaUk/YapnDl+ti4J8kSFhuk9m725a+nyFr+g\nDbNvm7yGw0nJi2KRXR24C93Q1HlNj6ZqmuRN33qKJrgj6di8bHuttjdRviWo\nKv0yNUUtcjtPvE0MlYUsnZs6N9oP5c5bDGN0obaf2vuUy4miuXERLFaHsp73\nJcEw17sdk6kkDSs3j3S9a+e1AnBmNwHyWPnxpz6BOeO1zR9pBe+BU4mB5K2b\nod5zKQ22KTazDkhMqSJ0ckFTFWD6WodUsxgzI5d1aeMGFoAgO5V3jAjcTrRN\n3VWTSionZoEROpNqe9ACNE6y+7pIRGL38o6Sb0hM1/I2w3J0ypIb/iP9X130\nuC0c4UgXQ0jWsatU96ZVxb607diYVSYN01vQcBaYdSXeaGaqJDU7xHDF8YiO\nFrI5VL0xEvDVEehWoSXsxSocj7dhpSSIgHJSGb2i1ihUn+tejxpvoiXkZ0YX\nu9X6c/jBTWoajyA7eoqGPldFalDylO/L4Q8RS9ad+uBFnxMnxMj5G3/yZHch\nyjnxiVGkzLbsBKMznKR6LNG8Zsxz3o5xjTIAyXNDTv/lsH7/hCKSC4bQal9E\nSLrd2S6eYRNo9GJnrudJqeWnlOURb99WpotBY46Roa0av7ApxENjNs1LJ3CH\nOjXJ\r\n=ye6m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCN9QYNmkJUYRQwBR1AomDtCH06KX3E2QKjL23NUR5TPQIhAI7DrWHgVyJTqiIpmQB2OxRLOctHzDkph1Wy/y3h1SgN"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.737da83fc.0_1578691129320_0.5858765065533136"},"_hasShrinkwrap":false},"5.0.0-canary.aca8e6c18.0":{"name":"@material/grid-list","version":"5.0.0-canary.aca8e6c18.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0","@material/rtl":"5.0.0-canary.aca8e6c18.0","@material/theme":"5.0.0-canary.aca8e6c18.0","@material/typography":"5.0.0-canary.aca8e6c18.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.aca8e6c18.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-h2dcroJbA5Vzf3TtZkmmt7IH8tzChrM+KgErrnBWnustCEdeNv9+zpwmPsDwzcgRL+ozpMriOfTy0+OMUWs3tg==","shasum":"340530ade53c1c04ead8ad2e4d97f8da054129fd","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.aca8e6c18.0.tgz","fileCount":30,"unpackedSize":170056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMWXCRA9TVsSAnZWagAARpgP/RCfvtNiyXCB41JYqAK8\naIUo7CAT37C+0TwaaD9MMrA/h/Fn9VomZ0sVMWyZhX+kYFmMAy3DU8ei/OB8\nEMAIBR61MrCWLJzX9B5moXPFuuB5tQl+3+YrL3E4e4OlnvcmUDTk/R/YPa1W\nEKaeLwO7A40TuFhbtAtzLFk2DiHsoPiCZewK2Xjxdl6sjww2nZwx+78RQwbT\n/B5e0rbrrNGjbmYEH+hFOcdbMAf6G8npZa/i/IIbCUzSWTtlKmI12xqei5WW\n9NzYOTJy585vPLAiqiBosxGjwA+CaMxV28dapyGTJrFTb/rUWvIJIn0UjMXL\nkqUghh1OIOuCQCU0CMoR/7dJlpvWr6oDB+yjSp8GILojghNhnpf/aYGi/+Ry\nNjzGK6+B8bmHB7BKO4z7b/Ffkyeq5Lcc0wo8H4uUfDnt84mgy1Dtp4VJ94Yu\n7E4kN1ksFyQId7TrDLBYmQwfHj16du8zMrky+SqGRprUK48qhiIzOGKB7OHd\necLt9ALl2xxTWzM9RhofKjh9AUA6Bj4FTheJIq/n4GgezpusR3bTPVXjmoI9\nTRslhV4UApx1txcNwcEHJL7Xk4jCCVapVJFER4ZYKESCxX6HyHnbfHIzlJDY\n8Z+os2p32jKMCIINBInf47wF7o5pYy3BMwxpZZ5dy+JpZ7J658T5EJ4rGCof\nPWMn\r\n=lqG4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDgPYLKZNanXtAqp+XnaBpnQhqTFiZL1Hg66lqV5McdQwIgH+cpMjSuEcwTlpokxK0FABPYfEocf+6Eo2Busvkt3H8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.aca8e6c18.0_1578943895166_0.5852232547094383"},"_hasShrinkwrap":false},"5.0.0-canary.c38d84e21.0":{"name":"@material/grid-list","version":"5.0.0-canary.c38d84e21.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0","@material/rtl":"5.0.0-canary.c38d84e21.0","@material/theme":"5.0.0-canary.c38d84e21.0","@material/typography":"5.0.0-canary.c38d84e21.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.c38d84e21.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-ReYllNcyl9G1uLI+PCLanvl1UCxVeelVSNgBWdONP96qEjg2+6zdYtx9taoNRyp/87gF0aWq7066XZ0zvCcUpQ==","shasum":"09b5740c4289445331b1b15679369ba12b3c7484","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.c38d84e21.0.tgz","fileCount":30,"unpackedSize":170056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOuICRA9TVsSAnZWagAAgKcP/3dPwibysHSV0SeNJDeo\ne7QQ7BrngvREkIA9/HvyG2m+oDcI1FHEXfo2H/sZonMQVb7JgVjXLBQdy09u\nA+2RW25flz/HzkFDrY2N15CiMowCZzRH/+N3BD5Jlfapv4E3F0Pq5pGnKM+l\nFHSqxILvw0J3jhYFdosDAyx7w98bqRW7+Hnbs03KCOkl+UR70h2rD54i1eXi\nGaW97bRt+Cu+SVXnpLyvOnaHyT7s2t9nKI1FasERfrQIpr2MqYbK9W/64dPp\nNhG5WV5vI0JKLTq2nQxlOB2rl8aaEv+3f/Zr6jb7bAocbLQoDibDPfyDbqYR\nSubfbP+rfWAIX+VRuv3A/TIUSxh2Zanr3UNmSQ32iTJ3hEUofxwPovpogaoI\nEkJgQFP9O1dDW1npb+aampHfSDD9SEzrr3nDCvy8M/tJlwLvt3iJCw14RTiu\n0HmofZqpiFdmFK6SjP51C77ECUq9K1SZX26QQ1kCZcQM33T8N6ftexHJN2k+\nJU7oiipCU3rDRP+0Xr+vQeGSoM4TbLkepEqRoW8qsggOBoT2pQjJ3f41iKfm\nBOYhdf0nf715D5Ihi/Sy1y2Kg1Uth6ZRjJO9AySGVnqX6DGKuZ1LfLwlErxS\nAK9urd4hxVuA3DyI0JI9lepHHDeK71WFGAVZcjjB7sx0Gd3fisJz4cMcijkJ\ndKdw\r\n=aBk4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD6Ob36KnanEQLKmskzKRvUbgkaz9o5Z3vfctE/GUUItwIgCAVfUlpiN89S+lnN+JscQKfqHy4kH/B6XlylAlGJ2q0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.c38d84e21.0_1578953608256_0.946023920875934"},"_hasShrinkwrap":false},"5.0.0-canary.a4db5fbad.0":{"name":"@material/grid-list","version":"5.0.0-canary.a4db5fbad.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0","@material/rtl":"5.0.0-canary.a4db5fbad.0","@material/theme":"5.0.0-canary.a4db5fbad.0","@material/typography":"5.0.0-canary.a4db5fbad.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"bb5fe141944679686f178779345a5880a89943a9","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.a4db5fbad.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-ELtHsoOlrHsfFc2QOXHgJkAEf3Hw7JTUiIkJqe5ab+W7bT5bd7g9aIvTZryeXEmhDkKbn5pTImF1SFOH8hqTCw==","shasum":"f7b9df5d4dfa791376c1227decff0fbbeac9d1d8","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.a4db5fbad.0.tgz","fileCount":30,"unpackedSize":170056,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSQ7CRA9TVsSAnZWagAAs9wP/1upjPk9ZH7pcQQu66EU\nMkehR0tJd+3GDQtv1N3pug8uAB8cQh7Z5YBRkHe6XXFiHdY4KhRAjbUFyYVw\niooSsw7aWkX1fqolVnBVCwS051N2mVXhfHvGcCZywXw8EMnCsjwh4xHzS3in\nY3MyfRcyq3SOPaUo5nEeI2X+uzT9+bKwhgQY5Jok08mgCR5V6lkRFCb107Kg\ny0LCHkj246Drxyk0fxcJluuoFhiFZmgTIJNDzXxqOsKA9SOM1pb9vtWWd2Mu\ngJTA/lezF1p/9iTJ54MsNlyMeGDxQ/QEVhmiMs25PA7vzRANd6KOmghLxLz+\ni6cYN4PnRX3J415Ctb/EqyHS0Xr41fYjcKmlmQfzvLUzhdVCRAHJdVxSyMgT\nMkm3DVDLivuXfiIT0Rwql2otrpCYiS/4Ng2nUb2ISn7QpI4NiVe0VRlUudPG\ndqB2db4DUENCXQkMbbJDKsij8duKyhErRQZusQNELLxbO4T3wApOvRpJt4Tf\n3fSGH6Pln9d2Q45w2E6RgScOH+l7C16DPwZ3+jl9Y8F5koyALMn6PMuIiLPU\n9XqjqhCB88wipk1gDRx3ItGhprRcBH4E9EBCy7QmD6mZv3bS6m6zGWeL3PZM\nOg/VDFCuNm8vBekFjqeib6y+Wxopvf0QbuZOBNRMm1UgGtnR4DoyAsdijpyA\nWFRu\r\n=F8z9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID+TCXHb/YYbPEUtqGPU7XOofk2BJMvs86ImCiuwktCgAiEAmINtUv47gvAolrcYzIeAZhqkQ1vksQQM4//oYX3LtPU="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.a4db5fbad.0_1578968123186_0.740661801595963"},"_hasShrinkwrap":false},"5.0.0-canary.faa9af310.0":{"name":"@material/grid-list","version":"5.0.0-canary.faa9af310.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0","@material/rtl":"5.0.0-canary.faa9af310.0","@material/theme":"5.0.0-canary.faa9af310.0","@material/typography":"5.0.0-canary.faa9af310.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"ee374355df19027c59f24bdaa809bc18183453df","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.faa9af310.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-cCPC1gpIFPOzJqgk5vKsbf7Z1Ifw9P+brTwFDrutnoM+N+CShUdyaQptvLzSzhOa+gSoFhWwp89Tn560HYGXUw==","shasum":"fd367083931fcf5eee04a3f4b3eec8f2fd578377","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.faa9af310.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfHdCRA9TVsSAnZWagAA47wP/A3oplYjs3DRhqgU9VmS\n7hyFFzkwNdgNzSM3d4OE/01Cym+6CJ44GvwSQ2ynbYbvcdAUIAWvUCDM0TMQ\ntMHM49jnxB8GH3ebBC3Ln3XsUsMTQR/u3e0AtSOI7XPFvcC+hBZbFDNWS/fB\nygFjm9r+MvLWWAODEBjcBlM13B9+j66ZZLbGvPruTlPyMeFaeSi7Lsd91Jq8\ns8b6IxBZudm+3Qotz5d3vZhKNnVqqhTw050ASaReP+EK1MWuvhUWLAWeDo8N\nuFtE7zI4hW2CZfqSgRt75EJFROsLgiSmaZTImBV/Kk/urd3F8zKHJ40uDyou\ns+FhG3GFeqwlW9IxkGl5WhJKBcUmHQlMmiRmWIzxvNzfx7vJuspYkYf9YfH4\niASd8VRu341D8FUWkmG3gYAuFlGpar0IesQXMWn3CTOsWxMDLycefEEzOzH/\nKCsF7PPIBpf5Dcn7NzR5YVzi8lnpFbKZTmJ56R8Bupqch8S5LWVC5vKKFRpy\nQ7fRJysKO9aL7YPB1vDtb4qKuyVnsH8bz9qqLC0osVVEjvmvWacNugrTzKAF\nIu0PpSzVL61tKC8B/c8yNsUraJOPNP5RdOczF7Q+9UKCPEC06FtdaV71y9/x\nphI4cG5nUV8tlvMGkEq2aDSUD0+Yuz/11v0KR11B11lgUQmLTgSBjqaHv9MV\nohLB\r\n=tn23\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8LME1troj0sOmoYqjNHPgAeqw0DFIL7EKdn8HvCbwPgIhAKEo9b5wdCu0H0i9gY7h/nGEXao0rXCgzpEqmgnXMD5s"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.faa9af310.0_1579020765259_0.2411238486321201"},"_hasShrinkwrap":false},"5.0.0-canary.60354c577.0":{"name":"@material/grid-list","version":"5.0.0-canary.60354c577.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0","@material/rtl":"5.0.0-canary.60354c577.0","@material/theme":"5.0.0-canary.60354c577.0","@material/typography":"5.0.0-canary.60354c577.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d9f4420da446050561084fce698a543b0dc6b543","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.60354c577.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-PgiqpmloXe6s2qWhux0VinY5jgJRTUfhH7tkrOvGOYPPHcHoojSikZcGfQOOfyP9yGwRyOp3hsWq9e0y+WtJsw==","shasum":"e8a63e2e6c51eac4cbd34783aa7372c24be0b202","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.60354c577.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkSjCRA9TVsSAnZWagAARvAQAKMUsOXeEvM9PASzzaAz\nqAdsfJ6BvgktRHQwOqK/9f81Afkfq2Y2qn/8X3dZHFFZ7h6eHAZJNIH1C3zM\n8xcROhI3+KqOYnWV9Sj3Na5LDjEwHD3BgBbYdN5SCs742adbMRioSGxzEzpj\nYvSvzOkdf8e2anB4s8BoHJt+zRwMgBLp+hwH+nA+Tk4dyJNjX0saVmdaQ3qU\nUA+rm0cSE90Pw5kLNvosma+Meng5ZDylyoL9JNJyK/UDabzDlQ44/NCFFrGI\n1jBxHCpBBc5kzNJqi83cTTs5j3ozrG4/vlfCZRgbENzQdP2/VeLm+VRVEWJR\n2pK9OOI7IAi9H3yGDWk/Op7SHSpuI3Bee6hQNKkcUJ3WXb2xeBoS98F55nOr\ngRrm/WqNzs0V4OfR3Bj8f4n3szc+lhZyKtawbNRTVnYMh67nOFFCA3g1OoEx\nE7oaE6JrAFgOJkbDd2riYM3f7Jse5q1PMZNFdwxtQ+E/sJnRkj7URfi3whl3\nIh2rT16e4x0OGwTK58lOyGbTte+Z15pb47SAPIr2rNG/C7UzW9g8q1K+HMOf\np2cE345tK0E/a41Ri8j2tNW/GqTN0ZHaBPv0SZb5fcguW4/Z7Wk05hIjoMu6\nFpu7FOse88hJp1ADXPMLHbzf+hez1t/U0xbgdTQwff/0CxFNnRNUOTXyqNjq\n2IGu\r\n=Bu1j\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMWCH7DzNLFPXD0MY6I6OCE60PeHugspZdpC7vquFHOQIgJ7GBa4eQXiFkEqjJwONgBCYceciv8KXrFlsJLMCuLF8="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.60354c577.0_1579041955316_0.5761149906562786"},"_hasShrinkwrap":false},"5.0.0-canary.d07c78daa.0":{"name":"@material/grid-list","version":"5.0.0-canary.d07c78daa.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0","@material/rtl":"5.0.0-canary.d07c78daa.0","@material/theme":"5.0.0-canary.d07c78daa.0","@material/typography":"5.0.0-canary.d07c78daa.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.d07c78daa.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-UHbrWalCr3HpFwYlWDYGzm3APTlUOLY0NnjTclHhYW7iyBNRaBCgbmlCKzt8MoWksAaa4X/TWyXDu0aFaIDq8g==","shasum":"305b5a698bdc67a976fa95b526915de496b741da","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.d07c78daa.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlD3CRA9TVsSAnZWagAAxPoQAI2cMuJpezEv8VLfpPJ8\nhBI4XHsSpCKI2akIU5WahZnBcayQKPgay2LgRfPgVvrp3h1hX2kUYfsPCXH8\nu8MSgN8daGJh9/yXP5IgrAc5yxFY62uJXQlSyXMNTIXL1p0eM16qiyLtbpjK\nw13Il9rym62XsdbCCG9MGZBJAQrxBS6VWq+dgxsQtFLmq9+8yyugoMdeF5QJ\n1NGpGHpQPO4Ylb7vT/BpQEQ0c9MfScuTgIBer12TDpZQYLw9JxHbpJUDqSrQ\nU8UHszvL3CoKkiz0b+uDPoIXeUUBurvhUqN1BKIS7dv+AqswRhrRRfV/bZM9\nNGCNl4/dfnV8zmw6Svx/3E/x+wf1GunwkzvwdJcG2W/bBbobm1BocOt2mxF3\njfA6odGpu6cDUZ/kuxyrYkKbcfJU4DBXiD/5/kE7bbeTVrV0r6M/uxQnsnqX\nvkeSC3E82ClhVXV2PZ2XBzIMEx9GHzB2vEoOceQvrYirkTy6s11H83mbQqJ6\nI91KlkSGYAzqUsGqdCzW0/V+wsyvEbNrj1AQuAgmF6rFWyOUVFmwGV7Ih76B\nZndypFRDBh+MlPuz4eqT3Cvj5NN8SzJXxn3r0Pkeffu6Qfz59FwN+tvLPWtI\nFw6t0/aLSttuVevn43ylqZ7CIBCbL5kRR6zMWj5OQyrcH4fljLNK7yaVEA1Z\n0dul\r\n=liGS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDhc2ntzYlSD3GPNYgL9xWWD3CpN/hWGqpVE9gekqV6bAIgR+yIQCnjrqtmqcMKHXaNQlvTgRe9rZzyFzi1wWInMWY="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.d07c78daa.0_1579045110499_0.015367987453745124"},"_hasShrinkwrap":false},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/grid-list","version":"5.0.0-canary.8ddd5c6dc.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0","@material/rtl":"5.0.0-canary.8ddd5c6dc.0","@material/theme":"5.0.0-canary.8ddd5c6dc.0","@material/typography":"5.0.0-canary.8ddd5c6dc.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.8ddd5c6dc.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-y0iPluR2eaO4F4gbqOMjTYGCFmTnyInw2hCrEzA/e+nOj3DZbZVYFm64QRR09vbAXUw12D/QePPv2nJUAzt0ig==","shasum":"e949ffbf1e550d3ac3742797c00221f0c9d0a843","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm4lCRA9TVsSAnZWagAA5wMP/RPpmACM0wfgG2SaNU/O\n7xwFjZmQM7TMxhHKirE0gBS2a3nNJppXi3lFH+nggrDcwpfho4M8b0VdkMeR\nI5UIXQBoGvdWuM7dV02lfRMkODBt/Sb/S+P502qWAXdbaFlm9so8UXwEHjES\nq3ewS+1+xfnuY/OpTlomDNrZdeEX0jbXQysbe103uCzuGnu81cQE+VvsVKB9\nKSn6zSmczr5kDbUsAvII7gLKcG0/BWCkIXuplnbKqw2ViFuWza2SNSvlBA7U\nB0loJI6IgtMYJfSw6pUlxs94tkzWd35ZI5gYfCBm9iejE6mttxD7pKfdWwy8\n/NAnVQONu948drDLE60dT4nSETK6UQ/WnNe/XJx20EkqmqsKn94csJPFj+0W\nuUpmML6rKBLfHQZ1TllDc1Gh/GxKu3Vf7PX8ayJRzdmd7ceAt9+ed8Xn8s/N\nnp9u8t1mqDv+GXVN7zP257GNHkOXtepZyR6kRE8v8b9QsEd2l+okWiUFbPaw\nfaieDpA+drE7a5D9oiNkJ6aMj+Qbtz+SN8olll1skRBLwV1GE2uYC5bcdV/Q\ntX0/72k+ytNdhFhn6t8Q2ZP+zNB7u+e7dBhKtL0I+wKHTzlmuwJ4f6jchyoc\n/WBEsmuMY6Wd6vQ+5jkvi0dBLpz7s1XrT8XR1f/onyi7V+VwBPNo7T8L4FCa\nocSt\r\n=mute\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDMdqCJkFde9Q7P+hwYGODLbx50QlnoGd651F8hUogctAIgA67Wg/snxZf6WMvG7Jpk6sXzVqyEe4jdY6DnV7K2cuk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.8ddd5c6dc.0_1579052580623_0.5971425016829546"},"_hasShrinkwrap":false},"5.0.0-canary.a9511d870.0":{"name":"@material/grid-list","version":"5.0.0-canary.a9511d870.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0","@material/rtl":"5.0.0-canary.a9511d870.0","@material/theme":"5.0.0-canary.a9511d870.0","@material/typography":"5.0.0-canary.a9511d870.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.a9511d870.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-kyT7WdGcCg2/5u33aiwiqE9CCQPyDEszxQRNj2eMmcGfoc+/K1uunvKxS5wrwOi5pxRGMz3C1B4s5bsZ7mXdeg==","shasum":"c49a8e17d7f930dad79af4fdf829b1a34c67b201","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.a9511d870.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2OaCRA9TVsSAnZWagAAXusQAJ4LL+r8Gj27tlYRfCzg\nyfQ2beZQ3q40gKdK/sEuEDn+JeLEJHnVgpIB1vKC4R56GnH+8tJyiqX/v25O\ngUU3mxpRbAj646qCltTXO/DsEJT50mnebP2nAevVJ+ZmB625F4v54qy5cIbk\nt53FyeuntVa2ahkX8DDXuml8bq95QoMe6WnbkD9axP+oMTGW5lmkChLPZ8RQ\nW+YVqNxC9wUIZogAUVwa8X9cTO5ZVZhNTsP4UbcJrS0fw60BUU8YSpp64aq3\nTpRhj2dH4Ghb/1cTKqld3hxe4OM9QKV/P6G8tszOEnVcd7vyuYqMlZW1gvmz\nTvqZ5r84+0MDyx9M/dYlaaSX9SD8Iw1dJPYmRA1O13GZlquFbhkOe9QFkbS3\n0I3WfmxuLDveLQuhqoRxZvW4cmpaGE5queWjY27jrGxrmuvgmneNjrd0Ls0l\nypI7xzwOi5iAW03/Z+jvLJUuH+ZAl5aZJZrnOg4Ab1QrzA3tCNFYCRlzNii1\nV1ytQo9Aujsmezk8B01ruZcCe2blMecHyV5ZPpYZTfh6Ya5ODA83rQA/Z//7\nb/NHSYEpMPE8ys8hDne32EZjUHI7jbmppUWDZ0/GSJalcQZpN8ZiINCv2ql/\nYYaeWLBtO9ZszXwhJxA6Qu3MG06xlMCUqBkgr6I6X7jFpKqUZvs2V6atYpwV\nfspb\r\n=b98O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUSfoch3uEgDjEdYU11hBr4L8KvpNPmHRaMS1wswiTHAIhALKTze73ZRdca8PtrUfSCWFFdqewvXpWd5A16iaPVWh4"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.a9511d870.0_1579115418219_0.97498722086654"},"_hasShrinkwrap":false},"5.0.0-canary.7c8583c4c.0":{"name":"@material/grid-list","version":"5.0.0-canary.7c8583c4c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0","@material/rtl":"5.0.0-canary.7c8583c4c.0","@material/theme":"5.0.0-canary.7c8583c4c.0","@material/typography":"5.0.0-canary.7c8583c4c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.7c8583c4c.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-DptEQAYsJSbAUJF0tZsPKlMZmIb/KM+qNpPE0D6JX9bpxQJ2R3wyHR2eDfOwyImd2fmPNIGS8Vb7MWczVSkXgw==","shasum":"5f256e11b9452b5a2ca78e736a81a3a318110c25","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.7c8583c4c.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5aECRA9TVsSAnZWagAA3oMP/2i8E3ywvHr4P42jDowi\n99xM92yiuBCQEET9L9coo2O2dAABEpNnue2ducp1VSdFiTkwsKTv/DnmjZeL\nekw8wDQEhcj5OQozCSWS22bTMU7g8hwFGeCJ+k0gvqJBqLyOZpqwTE8Co8Nm\n3mDIRHiV9vEzSngvhr8FSuAwRR3EbR4XmzqZDiUjVnBUAjpRQBG7GwznkqSQ\nEAVe0vPnVgquqxzew6/qPkpe1OE9k9FLoHb40lnihA2Jc7Bs2MXSvpSIHzFB\nT5vbsesGWeakL9K+GqgX5KDLfAeU7gb0sTaAY2gUQZX+vuLbmr91Hw5yGUsf\novW2LJcvggqoFie3T2XsCmxgCNfkPW4RqrMfCSVJfyBBJxcndt8JTZtX5l3d\nl7gDc3DEe/vadpl5F/NtELBn5uOI1R3hjKdQz8drDCER0WXS6IaHaYYAQykk\ngDq6e7706Papwa1Rj7Ac5kPiypzkGrfWIx9pbjk6lv9OqGlzWasq//9kFZrB\nMPSsEU1efdkhapEx43agZfqnt0vX3TvmnL+n0gqz5+sVdrFbvwvXfqQaBqtP\n5jtzgX+LvP5uoKK3i3GRx3lUbRjy2Qtqb9mDpbbjWN0H5Dqn7U3tK/a5/OOy\nsMVBNrbJCeOB3wITJFi63G05NdCQgSQ3saIn00vWILqtGmKMy8RC3rQKQ172\n+qJi\r\n=8xlN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZRgY7arDJQ78d6jlpFkFNQwfdmn7WSat7M0brsrD0sAiB9aN3PnyGKWcIJsBs6VZD2LbO7jmFZSLD0Zq568n/atA=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.7c8583c4c.0_1579128451977_0.5876459049535461"},"_hasShrinkwrap":false},"5.0.0-canary.5d4b82bac.0":{"name":"@material/grid-list","version":"5.0.0-canary.5d4b82bac.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0","@material/rtl":"5.0.0-canary.5d4b82bac.0","@material/theme":"5.0.0-canary.5d4b82bac.0","@material/typography":"5.0.0-canary.5d4b82bac.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.5d4b82bac.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-g0ndmVUT9YgVaWfMceKrkoTTCaNyjtYMKBAH+chWOLyhgUK/0jmvgZjqfPC+mcDnnOKvZcZ7UAuocWS7RMwacA==","shasum":"fdb7f1dbad0ce3b4333583973cac759ef28c7815","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.5d4b82bac.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5ayCRA9TVsSAnZWagAAJlQP/08wP0Qc2mkWQQiPjslo\nYA21Aso2B8p33Ouo4G4E1G3fO3Jo8dEOBp3898yAsT5wXGcIj9XMLLH4MvPs\nuoRzGLf3XaXmxUwKXOHN+Rivc3Hdg7FdZ1cKcZmv0PYDVLTjX4x3Bm59J56X\nPuAt216b9+zS4pB6onYaR0IiOmv/ibmmWBglbgePHo3UWY8UHmyNxs3BkosP\nQEJoQAPn9MkGMqS+9QrPDuc/6nFi5dEmj2DaQ2jbcZg9XbO2W02ADobX29mM\nq3QrRmoReI31paddiuZ8JIIgvs9akBspuDTaWONIDDkL26+C9n/EJLij7qDD\nQpS3hscNr6BRJybFUg64aab44CYlbBOombyQgvEI43dkiB/JTGplpqdMCbJo\nMcGK9VsrtY4tBkrRFjo446//0YTuxAgAqu/eFFMkq3U6fY2h5gLIZ1lIct6V\nPJKNnjHGeSo0IAvi6fGnQdASmURNCDdaQYwWR7s4Wn8GyGkQnZ/aYQoP3cmm\nqQQFKi+2x0hlBlKKt9k1ocVTENlglTmifRAzUNStykSUJF6bJ73o7VAK/dhD\n9Jqcm2oDVwizFL0SK1nEX8yMEjA06dnrw9bvK8VtLhkDqZ+gq6vRZ/A4v9dh\np/Huc5zxXneq9m2A5+KafVYcF6qbv+AmuDA5PhTU1qnkNLGnnc8G7HEWLip5\nHnZi\r\n=WqTb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIE4l+7Jg368jKL4xQ2t7fKVk9XMPI01Oj7sOngsBGQm+AiA7oCVgY6F2HS/+1cFRyT3U5Z9lzGfLlSLrFGK/MJthYQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.5d4b82bac.0_1579128497346_0.3988885881125517"},"_hasShrinkwrap":false},"5.0.0-canary.57d0186e4.0":{"name":"@material/grid-list","version":"5.0.0-canary.57d0186e4.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0","@material/rtl":"5.0.0-canary.57d0186e4.0","@material/theme":"5.0.0-canary.57d0186e4.0","@material/typography":"5.0.0-canary.57d0186e4.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.57d0186e4.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-eRV0kCZzvhd4pnUIlB/P7Sv989d0rz3DICv/FwwyEbqVVNqw6b2FEVSarLWjIaazUPTZ/VTO62QTPwMv6ZIQ6w==","shasum":"e442698507c7cf441e4fe269ac6271aa61b3ffe9","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.57d0186e4.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKi5CRA9TVsSAnZWagAA+A0P/3YnB+yQilscIC1XkcdQ\nnmgFmBW3c6Qf8lJfQlA8ouaB7biAh5LkGbfpRDdWOUHD5HJM5bIbcypfp9RS\nLLSmBJ3nJ4BMdi50ciTiB5me20nRI49ddmKcW2VsnNHfdXBfCJwx6s015Q80\nulfapnmbY2YevHh1JE6+TdEFtSz/Njc7e1B3TOFkMsb1Dxk+P9JlZJC42H7Z\nMIgtFSHlq7B26CuQMhQlWCLqgxehjnVMub7MDUO9UxW5LHIJcGcJcK99PSrN\n0Ars9cVzBwgNV9iuaK1Y4wUxU1xQrWh9iOj9w22zCKw2jvEutzWctyVLOjaE\nMadfR0k69hohRD7kRZacFDvat0P63Axv34uJ4RiBelGOwCxHBAkrg795c40F\nt/r7IRC//fzDYJFZP1zzAUtJw7lGhDEttSoc2tgxFwnyW3BY0OpF3yGrEVgn\nwW3xTqMknpjMkkDUeQGZ9mA+i8GL5UJGWT5fFaf45Qq86lI/GikFoTKoiPpw\nEbaIPfAT/ygockIETIPKdQmHb+Ii5bdNgVB+Q5cAe49g4k7JTlkdP9jOldzk\nam8fAsYdAXbH/zQERs2u6ZkYpk4lTjqRLYdFAT3o+7HE8vYPOxeiVCxv+PZ/\n/ujSXmqd0rQSKImHwsOrBtLr5boXIWZYpGGe+2f4IJvYWrR8FDbc1afw6NIf\nPoVY\r\n=R9aU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDKTjuc6hr3hb7qJeL06aw2qy/gI74rS2ZZhvomwUPIjAiA0y/6q4dp1VjcoG8U1w2TJXp1mi2+bcsHVBhl4RqHORQ=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.57d0186e4.0_1579198649020_0.513024794158998"},"_hasShrinkwrap":false},"5.0.0-canary.071a6ab70.0":{"name":"@material/grid-list","version":"5.0.0-canary.071a6ab70.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0","@material/rtl":"5.0.0-canary.071a6ab70.0","@material/theme":"5.0.0-canary.071a6ab70.0","@material/typography":"5.0.0-canary.071a6ab70.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"40ae26c99d00481950066e41e33aac0545186659","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.071a6ab70.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-IQtxr44mXLMKl/dLQdePT3WJlvTgFnV4HUrmKSPx3UxpUbgAxRkUNqRb7T8ouKGRXJ/x8ZDA3SSOihk2S/6e3w==","shasum":"b77a8273e3ba97f883e195ecca7085dcc37cc9e7","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.071a6ab70.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKo6CRA9TVsSAnZWagAAngoP/A5SpbDhI8uO3/LTx0sr\nb3jRNForaRNA46LRajYTjaADQMXevdfSbMeZ+IjIyj81nlSRNGerOaPXPeZX\nwfJzsWNQ3bx76UPQD3RsSqXn4KxiiAMd2xxyHv/Mm37zRTRehDmNrE7ErYbW\nupSrhYhdJv/s23kD88j5IceRNz6uFShYxLlKhXEYdlRIR1KUXyuoBQIi++u7\n1N61jM908W4qbw1AynTKFCUKSRCEb/ZRA2CZpdiu4SS9557ZAlALFb/g45Dp\nsHj9lDYhN9KW5mxwphJIbrrczPu+cvEFTSPCk4/K4T2PHcp4KuhjDtUQ/ihy\nz8S7E+mHxJ5Owa/Hmnb2x1dZVGhsP0lxkwPLPzuf4cde7f+dUBzcRmlSPzD0\n2qELgkXIH+WbgvdYaHOvpdhVlEMr4zio80GeMmeRobaYzPFs9mEDGGXIdKSJ\nobuMOmUfje6K0gwZktPFP2FCfMsbjxr+c1+e7w1GqKocy6IS7UKtPQ3cUHWS\nGXaUvvrcfXHvlLKnCWXECBDRCCJ7TY1mIek/4tMzF2UJ28VRLa+7iXjr9I3O\nE5BNtlNVcr9RCJbW9RRpXy3edvnkSDD5rodpYn+xruVq3oIcT7bIFRMXOx5n\n/blK4PnWG8Y8NyrjZsos0UJH5Rlz3KRRMfj0n4fGSuWa6n5JODJnxfFPWhSt\nSyPf\r\n=2HQ9\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDoZM5mGeYc3+fVmjyhSbF1RAUCUP0puURA3dS1TBubmAiBAOvQ5rty5NHaQRnYEZMyf6TBQ+3a3nEFzduMWVJKA/Q=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.071a6ab70.0_1579199033875_0.6363759239417746"},"_hasShrinkwrap":false},"5.0.0-canary.22e0cb618.0":{"name":"@material/grid-list","version":"5.0.0-canary.22e0cb618.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0","@material/rtl":"5.0.0-canary.22e0cb618.0","@material/theme":"5.0.0-canary.22e0cb618.0","@material/typography":"5.0.0-canary.22e0cb618.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.22e0cb618.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-IMXdMePE8sYPrqVSho22H1npQg2q+O7fJv/BdEmixGGbaWUWAzvh5qjS5kM62Qco0vmn/ri3oYOpTdcLeZHBvA==","shasum":"978a167fe7634c99d3fb5efdf91e819c7e052ac2","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.22e0cb618.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK+jCRA9TVsSAnZWagAAvfAP/2cVNVh8k9+o7RJz/iou\nZQFR4yelfPjJ4uWdke4L9kJsQBOnEh7/Eqwc0es24CEExwASDwoblLjvJQ/5\n+jugY6OtERil4+Kf5uVivuHsHQ6/Ly2d9Sd459H9GPDLXmVGbFtz83rvLQo5\nBa2fPy+dBHJ4OArwNxIl//G1PSxYBtnk1i5P40Yg5AKFueBFVu8JyXqLZUNe\ncBb7V1ftq4SA2Bit79/FWjcSqu0G3E44/chXvvLVLdjN7Vm+Avb8HWa+DBcN\nwJEC/Ff5xiH7Gi0RT1Iw4kcLmtZQxK+tBshP/ay8wA1grAI6+LAytR++fCNF\nBD7YMeaGpkhyFoGqMIXCCXPuPi04y4dBIXBg/cBgoO/16GEa+Rx7Zf80DIAo\nlUztzJvWEaer5ffRhGmH1JoxV+QseAzcPBRTXaBbfhAlyJQQ25rn50oPQi76\npts6yd4piWNKDfjXoZ3gdw4rMjv004ibpXgpBmdopuxMbZTNaO35n7HnuUBZ\n7z3HD0nxlTwBYx67QgSKDqjBosvdJoYnwM+DWI4mmu/TjjuyFrREZdgblPd0\nXwjCN81pWN4RxC3Rf7iuCJjw/5lyJY0LLSuMd5FyKuHAUHqG0E0F7ZjzN151\nqzI4/rdo9fOKeJwZ1nangVW+7+fKkKTnU1ZBF9qK1+bsoCV02B0FGF8/kDoc\ncte4\r\n=AY9n\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGTSrf7QSPlWaDkamHADRAs3KGwI/toZsonsteiNT0JBAiEAyEx8KEHDox8R0deSKPZfrsy/xRoKw+oUkXyPaBuQJuI="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.22e0cb618.0_1579200419009_0.1531359559640999"},"_hasShrinkwrap":false},"5.0.0-canary.f16f15b8f.0":{"name":"@material/grid-list","version":"5.0.0-canary.f16f15b8f.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0","@material/rtl":"5.0.0-canary.f16f15b8f.0","@material/theme":"5.0.0-canary.f16f15b8f.0","@material/typography":"5.0.0-canary.f16f15b8f.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.f16f15b8f.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-LgESLnNytGvsbwUYpJoIeDBHb06mUohhEjFVfQ35ToMwVYxwv9cs//T51LfN7X8rSB87m9HyAweqOhdozw8IJg==","shasum":"3829c1c2aa4803a95711ffa7059ef9346d5970e1","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.f16f15b8f.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPqgCRA9TVsSAnZWagAA400P/2DSSGSIe1LRkbVsp010\nMAWpi0V7oleSNAGdoIf+K3yII67dRM0Vmbcc/zxIlPNqIpLCbfY42h5ALE6S\n5+unv8+hmGiYfESZZGi2F0f/AV84qvjQNbIoaWMT1dzpPy9sG9fDr360jc9I\n++CkSpcNZqZvKlHhECWWxtOrKbiiIrYhIEc3MVffFxzqoNDDm3L4ppKA849i\ntzbWlTduzVwkXG1SkFhNm0D1cIgjhv/doG+yfEaaXo8NgGX4/UoSaTq4ffdJ\nA7gPZjdIEvW9ZLC1UH+KAZbhB7IvxXyBIhvA+A7WHFNxLhtEurnhPbPuMzGv\n0XJWwEtD9PrGpfE4pRYE+ZS4AR/OWdAQoOlX8ui3nAfbGpKIjPr7CwsYGKQn\nbjClvVwNDXA/Gj3vZjnVm4Kl+2ogYl9vG64zNxBRPDgtJLklCONVksEniYnp\nwGLrCYn0aANK7o0Zqo6P9bwXwcFoBAUF6LnT8PuarXaEPkblrJhVEw4HN7xv\nbkn6yYm11d1MUOCIeLrZCcVbwOEDrNSxydKyuFw1vY+QO/lE8Nb8lKX5R59r\npKCOZ0V+Wic3fN9apyXrQVZ6mt0kK+vnJ/CcptLGqvPYhtQFMaLWXHkVIIdo\n6kHXv4bcQg6wDkbSGO9ZSTIGlPDhfRJ2K43FuHBwIL150kVAoX4wSMa5kya/\nS1PI\r\n=r/vA\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC0vHAMFPZzXQ7CLB/dEYrRu7+E6Wprjv2k3FgYKivsAAIgVbEfKCkgCgPRHWOyhkd1AqIWvPh+G9WBqeKq+gtEeo0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.f16f15b8f.0_1579219616564_0.44011771238369635"},"_hasShrinkwrap":false},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/grid-list","version":"5.0.0-canary.aa8e43e9a.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0","@material/rtl":"5.0.0-canary.aa8e43e9a.0","@material/theme":"5.0.0-canary.aa8e43e9a.0","@material/typography":"5.0.0-canary.aa8e43e9a.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.aa8e43e9a.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-gMAgnY/bzN5dULuUBlQnWavNNEivfyevj9luMWMHt4NfzO8ayi8kIo8vyhP6zXTXUdMHDrGShC8kADwG7n2hOQ==","shasum":"c444a4dd8f6745abb10a74ec3461ca2dda403315","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQGYCRA9TVsSAnZWagAAg6AP/ibIuV1/W2j81tY0RpzC\nIkJs6Wf4kFdpMfnPRzrMHa/ygr9enkdkGkIUA6y3tQfXepyWJR/FQYcYtsfE\nxmTXzd3+GoecuKficWNolLAU8CkHhJW9yweQI5DkfrKtdwyEkUCpB2IgoF4z\ni3Lj7TAhLOc2AA9oIkA6SrJ2/CuidAXo/nY9uIqRHolKGCLyzOawuE/65+f2\nF+/FZl+7IRRELqSYKnh0W+7lGZWI39lyppmkv2IGLKCr7NegLUqcuKMO3woy\nIh3myvHeHrrfwAuq0LtnVJs3OVCkfg8hqaTT97NaAeSUhV+vohcCTUqfpWv0\nEAGHOOivgYnNDhrZOttYgOOnmOJhSX28DAEoKB9JPzkqnDouOI6JnjGBUOsQ\nNSDro8ZchPSo+y32WIHchj3VtALdqzJ1hGLh2ak7z51LlpLi/HMQx2lwMV0r\nP6M2tS6l4D0BrjlwiQ3mv3bPCvgsogFRqpP6H6yyAqBx+0UBUnlU+nKNzzv3\nTybVwHpStYFu9k4zh/PwzSUF8+u2ebi2F6wVXi27PWLo8c33XriNReJNLdzL\nG/2xGVOzwkxv4fqJKyAGkHVWYX2oieLTmZ7KfoAK1gTK/JaTIK5dbmrkK7TA\nS1HTCh3Q2WCESHkRarf8oLciv21MyylM5IcJu9LhEQ+uhSITgAB5ThGdAyTd\nHpX5\r\n=VM4A\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC11brhxz5GTZ4YomsWCaXriIVC+KascKLxWclG7TujJQIgIKCV3sKLMPneIBW3z3Row0VdyHpEG52j9Hf4eBHqW/Y="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.aa8e43e9a.0_1579221400589_0.6985150483735456"},"_hasShrinkwrap":false},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/grid-list","version":"5.0.0-canary.fe1f3ca07.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0","@material/rtl":"5.0.0-canary.fe1f3ca07.0","@material/theme":"5.0.0-canary.fe1f3ca07.0","@material/typography":"5.0.0-canary.fe1f3ca07.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.fe1f3ca07.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-0z1F38Ag0IbyUnUAzjUrEzbdhv4AsdYcwlSKncTWiiGix2zYUW5Vyey+D3oRhWO8DciFar7chOLYaMX2dPIkcQ==","shasum":"444a731826e1c8d30f790a6837bd8d6a90802b89","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQcgCRA9TVsSAnZWagAAJpQP/1vkrvZkPvICZ6bLVvBO\n+IiAPIoElrOLUpwWPtHsxby2mtsbzbbegvm9IxelRl58vHgil7od0QzbxRUa\nlBiehYogmlTqV2eiElxgUdedm+i8V1TdWTVDXi2pyo/jA2srTpECHoa7lEK8\nZC52waTatEzv6p6CZ6UH12sVgVR5Re55Qggv2X7cPRHeyK9Dj/x1D59kQqw/\n7N85v4V0gvfFsBxsGdphgickTbu+S1FletjhoS+6ejExjmr9fZVlaxL+6CeM\nWzNrk5agieoiVm7DhDpldq0vG/Q91ETALAgBR55s8lhGl0p3JMbsAFB+aE7g\nprVipSvKuBMtwmJ4WUUYsW3/SHYrGuiG4RgcOVS26ZDpes0KPGRnNXPchkfI\nYfO/N0Wzy3hWQManH6uG+BT4bd2fwbmDs3ejK1YRFXUUnW3m0mdyLMlrfYzO\nVAw3rXDBVgesInSub8KRIqDTywXzCdSGrg7vSl+4Qq42FA+EIh0xHpiI3viW\nE1AcFjkGS3qZ70ikcJpueED+JkjiHrpAbD2CMEV29TIRZfPD0f2fGECZGvBv\naOpLs0wgW/bp81uA+CVBCKEHYeS3gTYaK6epHlmimP2iEXRZ4fdwwmkqSJlT\nKDaT8BCBElD+fh+XlGhIIe/KPIEoAFjCGGpSZYhyjRY+OhFm3EZs4Not81V6\n6Jxq\r\n=UETG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDYvA2Ry8PjioEFWRobDI1KP9Cr2eu3cRGssfePhRVqAQIgTtWLY6fRmWrJiTTt3FAu0YiYn8WFVbNMnGqZkrXX/K0="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.fe1f3ca07.0_1579222816543_0.5881556472780767"},"_hasShrinkwrap":false},"5.0.0-canary.d405af26b.0":{"name":"@material/grid-list","version":"5.0.0-canary.d405af26b.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0","@material/rtl":"5.0.0-canary.d405af26b.0","@material/theme":"5.0.0-canary.d405af26b.0","@material/typography":"5.0.0-canary.d405af26b.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.d405af26b.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-iy2BkzrUy+fIal7PtqSj8tVRsAVj04B/mA7EYFxzv9NqPlN7xqoUzMadBbGFDxQYMpbqcjY2Ckhle1f0CNXCQQ==","shasum":"250a27cee143e267b21b0450db1a9cf3cc8dc715","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.d405af26b.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfosCRA9TVsSAnZWagAA5z4P/jEgz5ybqykcYK5Bm20H\nGspxpQzmQQNPuZ5ElyZywFHrqlmG54L0gPCap6yhOaAsLOwXD4fpH0qiVCMk\n9gyBrmg891wATqC6ThLd4kLssNe0FEAPKHzUvRDcjppC7pdErDXbKof/BWTK\nDf0mX9ok8Fog3QFXJUAgFRDWNXp0how1GTBLXLVtFVKkcg3gDe55gBStrP1J\nHlbLso48MnxSNKSvwD3iIWN887UbgAeObIIX+KwhZI7kBou3anLeHQMgvdci\n6xdOHG63NMncXKTgdH7LkaAlEJHxqYui6ECYN2hx2BNZR/j5rpoJy5FmJSA+\nxkhbCzeAHkCYAhWo74IaZ7HE23Um2p4rRvdl07JRiML2uxcj2L9K1zZzlfjf\nRVYX/I8PN3AYhe/oMrQTNIdqSujwVOXazzndp+OOuuakqsYGQ47KT+66poIV\nyp9nSbMmKWD9w/E6T8vJvFW0MBu8WySmwwJH+2KOf1jVX4c1FaYd3NPGqEnp\n7ZNCLFTW8LpOr2rX5zcci91fKW6KvU4Z+0I3OuoNzwKEsrJMB/yvun+WfFKX\ngpcc+yVp3+nPKOook6/3sNyZ6idI7aOBFeinCZvJo4shbg6W6QqQiDd8AwC+\nlZSBoasTyNWRQTIVsC1n/1/ago76remuf4lQFNfRQGmDPqREULTgz9fV8534\n4BvM\r\n=Xm+D\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDmasqs72GNzNW1pWmyBJgtNGAFtawgXKuEIGqjX/EhHAiEA9wJeHC+gWAhcu5dIPyJEe7fasvATJTiRlYy7n64xh10="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.d405af26b.0_1579285036107_0.8910133178274415"},"_hasShrinkwrap":false},"5.0.0-canary.6e857aae2.0":{"name":"@material/grid-list","version":"5.0.0-canary.6e857aae2.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0","@material/rtl":"5.0.0-canary.6e857aae2.0","@material/theme":"5.0.0-canary.6e857aae2.0","@material/typography":"5.0.0-canary.6e857aae2.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.6e857aae2.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-BT+7TbH8dbcueyTsKDQs/cyLWfRzNFozwN3MckNNE9M1D2eFtsuTpJiP8OpgOZYD6nVT5uf3iV1sbjqRcZMokw==","shasum":"6c4dd344a972fc25a3375e3957145400fe40789d","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.6e857aae2.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfr9CRA9TVsSAnZWagAAI0cQAIE9ZG3lHHtRKODUvIkH\nocJXChFrTsksn/UujqxgqiQzgyucZfm26afmLOK52cOVt2WeRP4SJT5BOY6x\nUokXyqTebO41qprR3CJ4C4qa4CYhosJF1HeOmdqZg5SALNIblU/73+hK2/qt\nBSOEs1ww6W43/iFa7vDvc9dLO5OFyp8pFu85btjj48r9ACMTpby9f6taOdQM\noetgUBxR3HgjuNExUQiNJWXQrvkh+h/QdZnP/FPt93FmmLx6MLBOZFm38eGB\ngFeFxAMi+JBG0cN30w6DNhPKdk62CyeLre+Y/ycqaQ0ge5eJjgBtXlJtIuzD\n6AT28xlmT0oetMsQijLdqaNi/Mefp31hco1qQbyJuJhzpDb/3IH/ubEUTBgF\ne6mbgPCtsmEZsq8Hflz9lj88S+yJtldyNm4hw1Sp6/g25CkQj7x1r2JWcis2\nG+79aKBrQW1mDTNqWP23vaUNFYfzzP8k9z6MyG6zXTCtda1iJlb+rjbYNLxB\ntA8PgaAoT/mxeezhoQApyJT9oAaY6ClWyv7Vz97lWYf2Yh1f3xSm0KbqdrOu\nKpSZ1uaCmJOxHK4N3P5hPhrdvnirGR1PHsz/VLolX7M5J5whOF8BXw5yAZLe\nqmAZFuyWUx7I3Z0GC6DnCES9gVyGqCTMi0E+2Uzu68qlTH0zszbHlHTxRt+j\nQuzY\r\n=EcoJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD/+e0YPKUjh0IohQerDX79XjffxmY4PIF66px+VIBJigIhAK9rNreW8VUhETAgVY+MZrlWir72RXdjHABcaalr+3tt"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.6e857aae2.0_1579285244947_0.7130849421071028"},"_hasShrinkwrap":false},"5.0.0-canary.e2e764f7c.0":{"name":"@material/grid-list","version":"5.0.0-canary.e2e764f7c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0","@material/rtl":"5.0.0-canary.e2e764f7c.0","@material/theme":"5.0.0-canary.e2e764f7c.0","@material/typography":"5.0.0-canary.e2e764f7c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.e2e764f7c.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-ka/CvJjct+dqKSWm2XOcTRsBimK7mS2ksDkDmUsySNnsDydXQstlPM8BMxqoLl0sa9IzJRIUYkpWtfHaf/tRCw==","shasum":"dcd295003584a560211a380a194ac638a48b2976","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.e2e764f7c.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf6PCRA9TVsSAnZWagAAp0gP/Avs7hPYwgNPSRCs4Lid\n6NPhWp6cqGPXw+E5QBFNNHAR7gEvpVkw8OocclwRvqb5o0Vy5h2h8woU860n\nWp+4AaivCNHVObcwq1oZngXAuPjgLaynEc/64gSSF4AbI6F3IvImNqDkrtMd\ncnQogCTdOMmIxAuvp/kmbn1SvQPDX6RCnRYPGanELmATjnqGT3z4kyRtu3Ww\n3kRTpDmKMpERnw6g2iQpsRtFKeW+oOTT+xex+8ruP36KdJTHMUN2155927MJ\nTNc3CM2YspG71eMHPbCsSf82e5fj5wVSb2dhbZfxnp66jkkUTxB1YL87NjXR\nr+fbc+F11TjDbRxks52tCfhrPIPi2llN4R/1KxuZxYHVn6Xr5CuX/h5ydaKj\na7Aw+hw7ArfOjbvq3BAt9D3gIYISwlK+LCzu1kufC0iTofk0RzMmXdAlS2WL\nUrtlMDh9MBHqd5WlvunciZ/a1UjFvto88HegyPZgo1kGgpdx9PUp9WDOcEpt\nlf/D8B0/4BBa4F23SVGnBIeGgWo9PpN8bWtIrSPyaMrPTtSow8wRHqwnEGnC\n4jxqTwnUchuImjloUkjAMcs1uQPjvgg0wZ5YvxJVs4+xgM3iuBQ2u6MdeieL\nR46gyfoTZUTdycyBvBc9M+M+Dv463yQJXGBc49mGERb4LSz6i3BxirBJCqU2\nUOmr\r\n=zX0X\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDSvPUlNZP4DZL37Pt8bjzFiEq5guQ1+msoQoLTPgGN2QIgfQymDJHFlzFk1FThxHiHQFqQIocEVobjiuRrS8DcvnE="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.e2e764f7c.0_1579286158942_0.5375502364567337"},"_hasShrinkwrap":false},"5.0.0-canary.7ef986a87.0":{"name":"@material/grid-list","version":"5.0.0-canary.7ef986a87.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0","@material/rtl":"5.0.0-canary.7ef986a87.0","@material/theme":"5.0.0-canary.7ef986a87.0","@material/typography":"5.0.0-canary.7ef986a87.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.7ef986a87.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-fpl9cnWIIIFzBOCJWAkpYfC4hdKQMO38eTzQhOUGO0vAZnt/LJVi3H9CSSW+bgq8xa3eoVZBHK+Wqvg1EBxxVg==","shasum":"3c05c96431b93dc5742c947fc5358d7d24515df0","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.7ef986a87.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIgtqCRA9TVsSAnZWagAARggQAIwvJBcxHv2NkoIZBipJ\nrlH7IkNnjwMePgmu6pWnvdfOYHixWFo0UicOwQNDZ2ZNif0YW8L5i8BfKQlC\nU4iHZFiY/A0/e4lAWIdVJfxfFWoFoo02/wxdNeQ/DPxGOhDt6dJX+IxQpQv1\n30tfNfEiwe5oVFw7YUuRmYixLOKn+v/joYp2Q3VEEjqMQla7hNQs2sJYkqgG\ny4q8JtJRISVahM5mbhjIWYOXz+lM1KFC7/NwgrM1qeknIRAcEGROTrImS/yp\niE7nre5cQlkOa3v1ZY8EEF/HNFH+tlNQYXQVlsV4r21Cp98yPjrot7m9dcky\n5iZgI+hrGybMF4pyzq5fL0pNCjU0Ao9LYbbKIIppRYimqBzvk3UNC4mtBN7k\njM/b24wbYCmO0yMLR/E2ifnhznul6gLjjWQXybrBe3NVeSs9+KZQLrZ3a30J\nWa0lRByv6iGo836tBbGJ0FEjPaRaAFTW1AsohHbAKrkEmhkY1b2xtWm2/BVo\nO5qG7WxxlMkl5Rw9tr40l4vEv6ve2fkJYks6w28MM44C9PXUOI3xfCjQ/1SD\n+ZyujpmI+y/eVPcmn31YzDHZcTCsK7yC3Ucm1ympmeUMUmT/N795DJ1+jzNK\noTqNHxrlI58S9X+2mdJStYFKYMF8Juxb+veiOmnwwAhvN3NIJQvaGTiiyDsF\ndi1y\r\n=i7Ot\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCBWMicp7S1b5GCj+UDcmq9BpS0diXCVl6dZyHHOKu3mAIhAJQpYlyDB/7Pe36VXRX1P0ngABPqwR1KJfXHFo0m70x6"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.7ef986a87.0_1579289450142_0.5807839482743198"},"_hasShrinkwrap":false},"5.0.0-canary.29402e2d4.0":{"name":"@material/grid-list","version":"5.0.0-canary.29402e2d4.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0","@material/rtl":"5.0.0-canary.29402e2d4.0","@material/theme":"5.0.0-canary.29402e2d4.0","@material/typography":"5.0.0-canary.29402e2d4.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.29402e2d4.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-jEj7x05iK1Z2to0x9FscmbAb/4O3LyLMEyTdB+NIkleo6wB0+Z/0bhLX1lQz/Pl5NrUBVgWkKDRLjIKi/Uc/eQ==","shasum":"ba656dc9e6e6d79db4283af531da9ae5e7ef2bbf","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.29402e2d4.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhuSCRA9TVsSAnZWagAA9M4QAJyhdFkuZPzpJFBbohhw\noOM7UT4S28tTHOHbi8d18CjUtfhIF3Egu3pH3EcR1X5dAdn2LOejFC91wMLY\nFOm6xetfmXiY7TYJIcr0QZU5YekG2X1vYqM+3Josj7+DbcdSoqINeG59+k0b\ncJgBtcA2sqe+e+rNWMhCGnVCDf47B9W6vxVE90tDgn+TZWjHSdWcMTIVROI2\n3M5OVN6TvIxKKkQb02sopGjJWenV92utsE4Y3uv6pCC3xon5rdkouhpEkhDG\nEeadxMyqJE0v6xsK5myA+b2ewSyNkWD3TsEnSFBnhv4+OdCdmnncWL0CbGIJ\n0a0sdCG/qooxlD+z2P/uFNMJLPXKWVZyty6zu2j8y8vYv5u7JYsM5fu+uZAr\n91v4AFc6EihSyAeWTUkd7YJFJ+RweNdg3ZesUPMnC036yWVog6neTPpZH+CM\nUm2Qj4DF0Dqa+wenzWJuoANFGOUo9bvBJBDX0yOQ+WWWR0GUvWjJ5NihLHZk\n7YX7WGZUbee4fEXEAHIV4VyXBahK11BZ0pb/p3BpnWdWJCdzLlwoVrQxvaQu\nrwP4xcGD8kHaRVKXX+AzOrpi7YZcDVmVqGLmr+tThBO31e5Xk94V7uUkUxtM\nQGakKqDqT4/YtgB5z/08uFvW7n3+8cMDY6opQd+1nynPM+HjXG7YR1f4PNKa\nvXmo\r\n=b6cx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBggKpMfStwVCuIR+q+ZjWS/2EljqHccpXQX9hFKUzoqAiEAomXBBfyuFL+Mj6+fBxprKwELo892PR4Ev5MqyOxPuAk="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.29402e2d4.0_1579293585929_0.19695036739307525"},"_hasShrinkwrap":false},"5.0.0-canary.2b3ec563c.0":{"name":"@material/grid-list","version":"5.0.0-canary.2b3ec563c.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0","@material/rtl":"5.0.0-canary.2b3ec563c.0","@material/theme":"5.0.0-canary.2b3ec563c.0","@material/typography":"5.0.0-canary.2b3ec563c.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.2b3ec563c.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-i6MTOft8Pyx9AkBSy9vyc/ib4KgHenRAl98KXNVa/yQTkp+LKOK9FpoIlf301Unw+Y1hCyYjw6MbC4xM7L3Odg==","shasum":"92efa8c4f19a8e36c3fe30bc7f5acd5001f34e06","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.2b3ec563c.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj8jCRA9TVsSAnZWagAAYFYP/j5OBk+6aSiQQb75/ziy\nfR8dzW66l+PSVhEH+LeTo406/qQilagA06Q1M6L90cz1fM9YvdXY8hsa3VFW\niXnFsrCcoIL1b6+HzEZdTVoqZuISqFP5y6rw4xyxjZChH9mPWnWB/sfJmq0/\nwQikc/qbs5YLc/lzeF+p2/8zKUm8lj71XrQkBzqIwtUJMZniDg1CuNMyDIid\nn5c29VgXAqwXKnRdjJG3anKcoGnO4GJDCQXN7xLM7oHUREfddIl8dS517P/m\nX05QaSOHmoQDfYuQ2lJZymBbmFsw0/Bihei1JEee5NrvS5XIG77DtqMUMt4O\nk65sTJAAUjgCDCcOgLlf8KYY/dQFE1GhyJkKQOv3Q2GJOHa0wDjK0caSpbL3\nVHWH463XsO1Q77YHV41koCnGniOOVSqQmfB8MhRgPhtEBf9ZtzGLUuMPuIMm\nVZZ4hP+gFVR0YksieyHTeVUUFhEloomc9y1fF5AlsLhYsxfvOmlFnnjC/lK7\nXkII0FpQBFflC2rWB+AdYf0+01N/Ksx1+wr7F3ATvoKpeJK+8CqgWiymgQzb\nyt6IUlR/qhCHtcrwZeEbO4L9vrQMBrpKQnxoCwiWOOkQWENp452SDLennULf\nWqmJYzlod2glPiuWrx9koEiBU8XK//H/3GMsbpV2DnAfv0eB8/xRW1AT9f8I\n6in1\r\n=+o37\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDVlPDNFDn8OTebLsYcUPmgA7ngFewRnu7JQD0jR7fa2wIhAOB+ToLGjE/7sPC5evDjiU0bvk13OEw9CrRQJtEnOIXa"}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.2b3ec563c.0_1579302690558_0.6248340205807694"},"_hasShrinkwrap":false},"5.0.0-canary.e8a993677.0":{"name":"@material/grid-list","version":"5.0.0-canary.e8a993677.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0","@material/rtl":"5.0.0-canary.e8a993677.0","@material/theme":"5.0.0-canary.e8a993677.0","@material/typography":"5.0.0-canary.e8a993677.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.e8a993677.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-cJeXhPVw8yB9Uza85FOcem0UrBygVDS7LDRTYZZMGiQ4vFaVt6c2DWll5Kh1YM3LEjmC+9AKlJIW677ynIuDWQ==","shasum":"1bf4b984fe5db6d14ec075d976415df9f6a64d14","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.e8a993677.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyukCRA9TVsSAnZWagAA4QQP+QAk5O7d3XO0eX4YN/13\nd3EpdiOGFO1+X/IRhsr9TSZ0eKMLVNO+dEwqQNyCWIVCT/FZO3BRkLLc+uPy\n17fyqZ/6EEhVWnqkST+7jmcnTtpQSOBqf5VFprFItCzXqP0wgnuetyQYguh3\noj4BkRhq4hLOvH/bbVAeM+uKwB5OVMQvrnM1qEwrqtD70obMXV+nlb0rvpey\n8tnVrSEXl6vahH9+/v1GuUPbfwakZWEvy39KlGpj+FjUd7NXByKidq8jMgs2\n4MEqEGWTwuK3YCnjDwmFc/6N+H7/pHby60+HxlFngnEP03KYqsgeMGqsdiPe\nlFTazPCibvCEE5Bo3+Hn1lTE1GTW7gUwC1oR3jGWM5iTepQhCTpOog7aMpmR\n5/XjgTh2h3Qv3AqZ/daw4NXLSE/NI397JO2qRF+cqSgB40rX88mXf5vsh64e\nkf9Ej/tj1Ze4h611yPNCOQ4oYK8w7aXY00rfxrLIQ5A5/5O+GDb0mfmwa6wi\n6uOTVHCOn+PvrVz6GWTT1HsboX/ZbzhWJx1SB1BKZd8HEg+dqxvKKJC0A3GK\nJDz2Yv/dJg0mN7X+H0LM3c+tz9IBTZ/OCvtTdk4xvATC0er9ohMWKtkxI5nz\nOkqpwlC3kISBeku0NixQQGaFd5FIZGH9jFBSFAB8JDLsUc4Hz7e+r7pqI7HI\nLQdk\r\n=kPRK\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHNhR0b4/eTkJ9ns9Wl36xjxfFH+pPo/oY19xHxqrvKeAiAyNA500ETFcE0uHqn/HX3hTSeGn1Z41U1CF5+Y9jv8ig=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.e8a993677.0_1579625379993_0.12497950065729357"},"_hasShrinkwrap":false},"5.0.0-canary.cd4903304.0":{"name":"@material/grid-list","version":"5.0.0-canary.cd4903304.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0","@material/rtl":"5.0.0-canary.cd4903304.0","@material/theme":"5.0.0-canary.cd4903304.0","@material/typography":"5.0.0-canary.cd4903304.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.cd4903304.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-ohR9kgnjUixbgwl9XF+gEDWGhqeHL5x1J6d8YCo98TKKXYfFkWjJvT3gigz4TJc/o5tavigi0LYxhjQIIwPTqg==","shasum":"93c7e1c699c87f850c143cfcd73372a131db5b66","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.cd4903304.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ28QCRA9TVsSAnZWagAAIGMP/2SkhLhbrKdu+5vXTqw3\nPSgNhz4F+R5tR0Q+ZP1EhBi8krEmWF1upd363N5IIqqZokcOETMEZu45faE/\nOB89Dwn2YMXOMVsZ24PZS7J4dXMyz2UlcuPtlrWK7K1W5tdYwXsh3eoNCAzQ\nEsLw+TLZzE2BtC2nQBfrg+YsoBrwEQV1KMqUl95ALFLt/fdPGYwo4cM9hhGB\nAAKjkIidyAYBETnmiGjXPsCFOjEOGA1dYLbGl3b6XLtnoRp3Eaj4pIxdDStD\noBZLZksnl7g4s232ozRae52P0xHRzFjIuPAj9VcFC9aWZorIWFc3vPyQluQ5\nERfctwir9DaNaCHJ9Dpc2TnlIilTvwTCm+lR6/J+EpuviZurWW/K+ZGaI7vb\nwxJRsOAAZfU3yZSNNxbKRu1bNN4KHx5kYZRWLazaeDyahlW04o1dfBNVIDlc\n4WWi2FqUo24vxJge5GVHrLzNaW7apmsPyTs+hakclU6jhfDdb8uylK5T7PcB\n+rXBDEcWTdNPtlk5gfmMGe9GltU7xF5OFF7Y2DmCXf/eRNBbni+KSqArNDz1\nhS4jjUFqPmHSAggs7bpfLdC6FpMcwmqfkutwyDpY0/2UFxOMFzzlhlkUlKLU\ngw3pj8VXmOEPT6eRYJ9G3C+/4VbG5lYtbaARQjTXWv9xax7I74UAscrtEQ38\nSNBg\r\n=FRni\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD9uUwuxqVHI2eHJdH7uy6z3N04/6RoIWulZ0Bx673SgQIgQeRLao3pvt3t8wiA9RZqI6aQDOKs+funy69PHilXUJo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.cd4903304.0_1579642639798_0.916809178221385"},"_hasShrinkwrap":false},"5.0.0-canary.7e4b04b25.0":{"name":"@material/grid-list","version":"5.0.0-canary.7e4b04b25.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0","@material/rtl":"5.0.0-canary.7e4b04b25.0","@material/theme":"5.0.0-canary.7e4b04b25.0","@material/typography":"5.0.0-canary.7e4b04b25.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.7e4b04b25.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-ShnfCkVcUU6rSSRiB4K82RsSB8K1uKxg+FabS6Lljdt+YgcBjo7hpUo7XwIHMMPciFK7xN8EdL+zb1v+yVtkzg==","shasum":"f1a4df5c440aa5cfcb8df6df4b5322f60a1e009f","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.7e4b04b25.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ38sCRA9TVsSAnZWagAAltwQAJw+nHJ5PBMayCYEjBrC\nVIPugrr3EEkSdgSHhFpbASGV2IgaJQn0hMkyBLrJdB85tvWIFUF1jmRRKOLL\nl4n9NdpHgz/RUSXFWaZp5mmc281Up49v7gDjsKRWUmKa+Y5mWLOvxo4JvzeP\nwqdedKUrydKKM01aWEB2NcJb/uJIYU0EV8s9X2H59p+mBzZ9OLtG/fsbAlUb\na0/R4CFnWhyG4JgPJF9ZtFOD0dg0AjR3tpgK1QsE4P4dztOsufOpEAT/Qgam\nJEX9YVEF08H52gIA2MBpKzatOpSFi3674w2GbdQEF8A+f7ayOIW7mfvk4O45\nEiAWRM9yL1lMS8EwNy0GaDFFRGaat6e8gueaVlpN7KaA1XjNfoE0YBWgyZFl\nIJZwKJtddP6n89Rkqyp+MENPUP3ON74dz0eyexZn5Hbg9H8W76wH9r9NKS44\nXOaiYX1f6dsdvejXBusM65dtjebI+K7etbNVklmtxVA395mg10pyGE0KRhgE\nw3VNqExXo2nhpYcggrmcqXZBu+VRlPhX5tbmF1xhnKqsjhdRM4bQrwgLGQGu\nI9rpMrzUeWu5c/88zvEZDYfRMQT64Qzcn3S1ysXbS0lDgJXBNLgZUTRO1PMY\nC+uNt3R7gL5h7btno8GCVXNA0gDHlQp2+qyH1lKyItoUgh2KDtHG8YTPXcA6\n9/mG\r\n=PDXX\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBoXLUVYOhJGS9Ea1rHKSD8cj1xbil9B3gy3mh7jh1DCAiEAwswxCTqSH0SYn7Z1xU/uLY1+gDpkAwK0X+vcplloygo="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.7e4b04b25.0_1579646763829_0.23793746523587544"},"_hasShrinkwrap":false},"5.0.0-canary.ebc296937.0":{"name":"@material/grid-list","version":"5.0.0-canary.ebc296937.0","description":"The Material Components for the web grid list component","license":"MIT","main":"dist/mdc.gridList.js","module":"index.js","sideEffects":false,"types":"dist/mdc.gridList.d.ts","repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"keywords":["material components","material design","grid list"],"dependencies":{"@material/base":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0","@material/rtl":"5.0.0-canary.ebc296937.0","@material/theme":"5.0.0-canary.ebc296937.0","@material/typography":"5.0.0-canary.ebc296937.0","tslib":"^1.9.3"},"publishConfig":{"access":"public"},"gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","readme":"<!--docs:\ntitle: \"Grid Lists\"\nlayout: detail\nsection: components\nexcerpt: \"An RTL-aware Material Design grid list component.\"\niconId: card\npath: /catalog/grid-lists/\n-->\n\n## Important - Deprecation Notice\n\nThe existing `MDCGridList` component and styles will be removed in a future release. Some of its functionality\nwill be available in the [MDC Image List](../mdc-image-list) package instead. Bugs and feature requests\nwill no longer be accepted for the `mdc-grid-list` package. It is recommended that you migrate to the\n`mdc-image-list` package to continue to receive new features and updates.\n\n# Grid Lists\n\nMDC Grid List provides a RTL-aware Material Design Grid list component adhering to the Material Design Grid list spec.\nGrid Lists are best suited for presenting homogeneous data, typically images.\nEach item in a grid list is called a **tile**. Tiles maintain consistent width, height, and padding\nacross screen sizes.\n\n## Installation\n\n```\nnpm install @material/grid-list\n```\n\n\n## Usage\n\nBasic Grid list has the following structure:\n\n```html\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nThe above markup will give you a Grid list of tiles that:\n\n- Have 4px padding in between themselves\n- Have a 1x1 aspect ratio\n- Have a one-line footer caption with no icon\n\nYou just need to put the content you want to load in `src` of\n`<img class=\"mdc-grid-tile__primary-content\" src=\"...\"/>`. However, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n\n### Setting the tile width\n\nThe tile width is set to 200px by default. There are three ways that you can\noverwrite the default value for your grid list:\n\n1. Using CSS variables\n\n  ```css\n  .mdc-grid-tile {\n    --mdc-grid-list-tile-width: 300px;\n  }\n  ```\n\n2. Overwriting SCSS variable\n\n  You can overwrite the scss variable by\n\n  ```scss\n  $mdc-grid-list-tile-width: 300px;\n  @import \"@material/grid-list/mdc-grid-list\";\n  ```\n\n3. Add own style to tile\n\n  ```html\n  <style>\n    .my-grid-list .mdc-grid-tile {\n      width : 300px;\n    }\n  </style>\n  <div class=\"mdc-grid-list my-grid-list\">\n    <ul class=\"mdc-grid-list__tiles\">\n      <li class=\"mdc-grid-tile\"></li>\n      ...\n    </ul>\n  </div>\n  ```\n\n### Change tile padding\n\nGrid list tiles can have 1px padding instead of 4px by adding\n`mdc-grid-list--tile-gutter-1` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\n### Image only tile\n\nGrid lists support image only tile. You can remove `mdc-grid-tile__secondary`\nand create a image only grid list.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--tile-gutter-1\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"images/1-1.jpg\" />\n      </div>\n    </li>\n  </ul>\n</div>\n```\n\n### Header caption\n\nGrid lists support header caption. You can change the footer caption to be a\nheader caption by adding `mdc-grid-list--header-caption` modifier.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--header-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    ...\n  </ul>\n</div>\n```\n\n### Add support text to secondary content (caption)\n\nGrid lists support a one-line caption by default. You can add an additional line of support\ntext if needed by adding the `mdc-grid-list--twoline-caption` modifier and additional\nmarkup\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--twoline-caption\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n        <span class=\"mdc-grid-tile__support-text\">Support text</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Add icon to secondary content (caption)\n\nYou can add an icon to a caption by adding `mdc-grid-list--with-icon-align-start` or\n`mdc-grid-list--with-icon-align-end` and changing the markup.\n\n```html\n<div class=\"mdc-grid-list mdc-grid-list--with-icon-align-start\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <img class=\"mdc-grid-tile__primary-content\" src=\"my-image.jpg\" />\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <i class=\"mdc-grid-tile__icon material-icons\">star_border</i>\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\n### Change aspect ratio of tile\n\nGrid list tiles support all material guideline recommended aspect ratio:\n\n- 1x1\n- 16x9\n- 2x3\n- 3x2\n- 4x3\n- 3x4\n\nYou can use the modifier class `mdc-grid-list--tile-aspect-$ASPECT_RATIO` to apply these aspect\nratios to your grid list. Simply replace `$ASPECT_RATIO` with any of the predefined ratios.\n\n```html\n<!-- Example of 16x9 tile -->\n<div class=\"mdc-grid-list mdc-grid-list--tile-aspect-16x9\">\n  <ul class=\"mdc-grid-list__tiles\">\n  ...\n  </ul>\n</div>\n```\n\nAs pointed out in the previous section, if your\nassets don't have the same aspect ratio you as specified in the tile, it will\ndistort those assets. We provide a solution of that case in\n[Using a div in place of an img](#using-a-div-in-place-of-an-img) section.\n\n### Using a div in place of an img\n\nIn case you cannot ensure all your assets will have the same aspect ratio, you\ncan use `div` instead of `img` markup. It will resize the assets to cover the tile\nand crop the assets to display the center part.\n\n```html\n<style>\n  .my-tile-image {\n    background-image: url(my-image.jpg);\n  }\n</style>\n\n<div class=\"mdc-grid-list\">\n  <ul class=\"mdc-grid-list__tiles\">\n    <li class=\"mdc-grid-tile\">\n      <div class=\"mdc-grid-tile__primary\">\n        <div class=\"mdc-grid-tile__primary-content my-tile-image\"></div>\n      </div>\n      <span class=\"mdc-grid-tile__secondary\">\n        <span class=\"mdc-grid-tile__title\">Title</span>\n      </span>\n    </li>\n  </ul>\n</div>\n```\n\nHowever, the method results in a less semantic markup, so we don't use this method by\ndefault.\n\n### RTL Support\n\n`mdc-grid-list` is automatically RTL-aware, and will re-position elements whenever\nit, or its ancestors, have a `dir=\"rtl\"` attribute.\n\n### Theme\n\n`mdc-grid-list` supports theming. `mdc-grid-tile__primary` uses the theme's background\ncolor for its background color. `mdc-grid-tile__secondary` uses the theme's primary\ncolor for its background color, and the theme's `on-primary` color for its text color.\n\n### `MDCGridListFoundation`\n\nMethod Signature | Description\n--- | ---\n`alignCenter() => void` | Centers tiles horizontally within their parent container.\n\n### `MDCGridListAdapter`\n\nMethod Signature | Description\n--- | ---\n`getOffsetWidth() => number` | Get root element `mdc-grid-list` offsetWidth.\n`getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list.\n`getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index.\n`setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value.\n`registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event.\n`deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event.\n","readmeFilename":"README.md","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"homepage":"https://github.com/material-components/material-components-web#readme","_id":"@material/grid-list@5.0.0-canary.ebc296937.0","_nodeVersion":"10.18.1","_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","dist":{"integrity":"sha512-9ZlRTzQSirPbkvOdZUvoW+1gDhWqR3w9wgPBcJ9nX9s1EkQq6Zqsm2vwmS0Rm/S3JTvVP5y9ExEMTgzf3AUa2Q==","shasum":"04d77433976a738ebea139ecbf902e9e6ece1804","tarball":"https://registry.npmjs.org/@material/grid-list/-/grid-list-5.0.0-canary.ebc296937.0.tgz","fileCount":33,"unpackedSize":172575,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ4z9CRA9TVsSAnZWagAA9BcQAJXv09K84i30A6OiEO9O\n9I1xe8TNdKvAJmrWtNYDwlKf1fMJC6u5pG78oIFBy0sPZuyfzB3ommvVpGxq\ntMYP8Tux0ILJBk0+d8OUpdHe4HV34xvTCa17nIiGKxeHmqZysd/aRSZ52mus\nKf81PFWPyFEje0kgBamqGHoDEprrUO6AtdRO2yIuSRovONuLEYThVeX42IKu\nu8aCkMLCHeUCXHwdf3zSNqJ6vPTA8TuU428qSttWK/TNtpBifZy+CHFXjDU/\n2ySNu5ZwzlTj3CicrSaMK+8YWslo4Yov7sX+KjWCwAbljR0Jn8lRuoZl34Sb\nFU4BCPMSNPX4sJwZcc2mOzTRu206r2XzIVVtbbhM/F+FYCtxAl4GoR6EG2A7\nnn5V3Obg5vJHmwLjpFOkrC8WFK3B4DvE8qE3CipPRTskj4DZn0sPGBS2Q1KQ\nQfZIRgolkAOsMZTqg8Wamqz2e3D9Yl6SoOi/0SdIJ9SXL4g+nhAL48sqnQeD\nPl1JfvgOVczulRtcoDcZ0q8ePwLPyt7wWWDydql1YEKi5k1dbxsI0rSPVp/f\nribu/MOHFMBvyUFwt0X1CxDKIFA4OAA5zAVz0oJvxEphEUnVY9zA3+yQsonH\nPdr+ughovbQpXbIqVJ4gD1ESvE0eWQJMTyXK2AkJZq99h1aAmJ497ByhrlE0\nczIr\r\n=MOh1\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBEXTY4OhQod3iUMWSq3gcxBYquUlSueSgaplpAesEK9AiAykLQ16Arjv98jgV3QOgpXELTZkFFke2zvKVBRMjrh7w=="}]},"maintainers":[{"email":"abhiomkar@gmail.com","name":"abhiomkar"},{"email":"acdvorak@gmail.com","name":"acdvorak"},{"email":"allanchen@google.com","name":"allanchen"},{"email":"aomarks@google.com","name":"aomarks"},{"email":"andrey.prigogin@gmail.com","name":"aprigogin"},{"email":"asyncliz@gmail.com","name":"asyncliz"},{"email":"dfreedm2@gmail.com","name":"azakus"},{"email":"bicknellr@gmail.com","name":"bicknellr"},{"email":"bonniez@google.com","name":"bonniez"},{"email":"obrien.test@gmail.com","name":"bwobrien"},{"email":"wangchan518@gmail.com","name":"candysonya"},{"email":"emarquez@google.com","name":"emarquez"},{"email":"esgonzalez@google.com","name":"esgonzalez"},{"email":"kenneth.franqueiro@gmail.com","name":"kfranqueiro"},{"email":"lynnjepsen@google.com","name":"lynnjepsen"},{"email":"aprigogin+npm@google.com","name":"material-admin"},{"email":"mattgoo@gmail.com","name":"moog16"},{"email":"prodee@google.com","name":"patrickrodee"},{"email":"williamernest@google.com","name":"williamernest"}],"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/grid-list_5.0.0-canary.ebc296937.0_1579650300755_0.03303245133908317"},"_hasShrinkwrap":false}},"description":"The Material Components for the web grid list component","homepage":"https://github.com/material-components/material-components-web#readme","keywords":["material components","material design","grid list"],"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-grid-list"},"bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"license":"MIT","readme":"","readmeFilename":""}