Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<!--
@license
Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout.html">
<dom-module id="grid-list">
<style>
:host {
display: block;
@apply(--layout-horizontal);
@apply(--layout-wrap);
max-width: 1264px;
margin: 0 auto;
padding: 8px;
font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
:host > ::content > * {
@apply(--layout-flex-none);
box-sizing: border-box;
width: calc(33% - 20px);
margin: 10px;
margin: 8px;
box-sizing: border-box;
}
@media (max-width: 1299px) {
:host {
max-width: 948px;
}
}
@media (max-width: 1100px) {
:host {
max-width: 948px;
}
:host > ::content > * {
width: calc(50% - 20px);
margin: 10px;
}
}
@media (max-width: 850px) {
:host > ::content > * {
width: 100%;
margin-bottom: 10px;
}
}
@media (max-width: 667px) {
:host {
max-width: 616px;
padding: 4px;
}
:host > ::content > * {
margin: 4px;
}
}
@media (max-width: 643px) {
:host {
max-width: none;
padding: 0;
margin: 0;
}
:host > ::content > * {
width: 100%;
margin: 0;
}
}
</style>
<template>
<content></content>
</template>
<script>
Polymer({
is: 'grid-list'
});
</script>
</dom-module>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.