CodePen Embed - Media Queries with Grids

Live

This Pen is owned by Andrew Haw on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"tabs\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"dyvNWaw\",\"auto_save\":true},\"hashid\":\"dyvNWaw\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":52553879,\"user_id\":3395789,\"html\":\"<div class=\\\"grid three-column\\\">\\n\\t<div class=\\\"column\\\">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</div>\\n\\t<div class=\\\"column\\\">Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</div>\\n\\t<div class=\\\"column\\\">Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</div>\\n</div>\",\"css\":\".grid {\\n\\tdisplay: grid;\\n}\\n\\n@media (min-width: 40rem) {\\n\\n\\t.three-columns {\\n\\t\\tgrid-template-columns: 1fr 1fr 1fr;\\n\\t}\\n\\t\\n}\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n\\n/* Material below this is used to make the live demo work */\\n.column:nth-of-type(even) {\\n\\tbackground-color: rgb(50,50,50);\\n}\\n\\n.column:nth-of-type(odd) {\\n\\tbackground-color: rgb(125,125,125);\\n}\\n\\n.grid {\\n\\tposition: relative;\\n\\theight: 300px;\\n\\twidth: 320px;\\n\\toverflow: hidden;\\n\\tresize: both;\\n\\tfont-size: 1em;\\n\\tline-height: 1.45em;\\n\\tcolor: white;\\n\\tfont-family: sans-serif;\\n}\\n\\n.grid[min-width~=\\\"640px\\\"].three-column {\\n\\t\\tgrid-template-columns: 1fr 1fr 1fr;\\n}\\n\\n.column {\\n\\theight: 100%;\\n\\tpadding: 0.5em;\\n}\\n\",\"js\":\"// These scripts are attached for the purposes of making the 'live' demo work.\\n\\n'use strict';\\n\\n/**\\n * Copyright Marc J. Schmidt. See the LICENSE file at the top-level\\n * directory of this distribution and at\\n * https://github.com/marcj/css-element-queries/blob/master/LICENSE.\\n */\\n(function (root, factory) {\\n    if (typeof define === \\\"function\\\" && define.amd) {\\n        define(factory);\\n    } else if (typeof exports === \\\"object\\\") {\\n        module.exports = factory();\\n    } else {\\n        root.ResizeSensor = factory();\\n    }\\n}(typeof window !== 'undefined' ? window : this, function () {\\n\\n    // Make sure it does not throw in a SSR (Server Side Rendering) situation\\n    if (typeof window === \\\"undefined\\\") {\\n        return null;\\n    }\\n    // https://github.com/Semantic-Org/Semantic-UI/issues/3855\\n    // https://github.com/marcj/css-element-queries/issues/257\\n    var globalWindow = typeof window != 'undefined' && window.Math == Math\\n        ? window\\n        : typeof self != 'undefined' && self.Math == Math\\n            ? self\\n            : Function('return this')();\\n    // Only used for the dirty checking, so the event callback count is limited to max 1 call per fps per sensor.\\n    // In combination with the event based resize sensor this saves cpu time, because the sensor is too fast and\\n    // would generate too many unnecessary events.\\n    var requestAnimationFrame = globalWindow.requestAnimationFrame ||\\n        globalWindow.mozRequestAnimationFrame ||\\n        globalWindow.webkitRequestAnimationFrame ||\\n        function (fn) {\\n            return globalWindow.setTimeout(fn, 20);\\n        };\\n\\n    /**\\n     * Iterate over each of the provided element(s).\\n     *\\n     * @param {HTMLElement|HTMLElement[]} elements\\n     * @param {Function}                  callback\\n     */\\n    function forEachElement(elements, callback){\\n        var elementsType = Object.prototype.toString.call(elements);\\n        var isCollectionTyped = ('[object Array]' === elementsType\\n            || ('[object NodeList]' === elementsType)\\n            || ('[object HTMLCollection]' === elementsType)\\n            || ('[object Object]' === elementsType)\\n            || ('undefined' !== typeof jQuery && elements instanceof jQuery) //jquery\\n            || ('undefined' !== typeof Elements && elements instanceof Elements) //mootools\\n        );\\n        var i = 0, j = elements.length;\\n        if (isCollectionTyped) {\\n            for (; i < j; i++) {\\n                callback(elements[i]);\\n            }\\n        } else {\\n            callback(elements);\\n        }\\n    }\\n\\n    /**\\n    * Get element size\\n    * @param {HTMLElement} element\\n    * @returns {Object} {width, height}\\n    */\\n    function getElementSize(element) {\\n        if (!element.getBoundingClientRect) {\\n            return {\\n                width: element.offsetWidth,\\n                height: element.offsetHeight\\n            }\\n        }\\n\\n        var rect = element.getBoundingClientRect();\\n        return {\\n            width: Math.round(rect.width),\\n            height: Math.round(rect.height)\\n        }\\n    }\\n\\n    /**\\n     * Apply CSS styles to element.\\n     *\\n     * @param {HTMLElement} element\\n     * @param {Object} style\\n     */\\n    function setStyle(element, style) {\\n        Object.keys(style).forEach(function(key) {\\n            element.style[key] = style[key];\\n        });\\n    }\\n\\n    /**\\n     * Class for dimension change detection.\\n     *\\n     * @param {Element|Element[]|Elements|jQuery} element\\n     * @param {Function} callback\\n     *\\n     * @constructor\\n     */\\n    var ResizeSensor = function(element, callback) {\\n        /**\\n         *\\n         * @constructor\\n         */\\n        function EventQueue() {\\n            var q = [];\\n            this.add = function(ev) {\\n                q.push(ev);\\n            };\\n\\n            var i, j;\\n            this.call = function(sizeInfo) {\\n                for (i = 0, j = q.length; i < j; i++) {\\n                    q[i].call(this, sizeInfo);\\n                }\\n            };\\n\\n            this.remove = function(ev) {\\n                var newQueue = [];\\n                for(i = 0, j = q.length; i < j; i++) {\\n                    if(q[i] !== ev) newQueue.push(q[i]);\\n                }\\n                q = newQueue;\\n            };\\n\\n            this.length = function() {\\n                return q.length;\\n            }\\n        }\\n\\n        /**\\n         *\\n         * @param {HTMLElement} element\\n         * @param {Function}    resized\\n         */\\n        function attachResizeEvent(element, resized) {\\n            if (!element) return;\\n            if (element.resizedAttached) {\\n                element.resizedAttached.add(resized);\\n                return;\\n            }\\n\\n            element.resizedAttached = new EventQueue();\\n            element.resizedAttached.add(resized);\\n\\n            element.resizeSensor = document.createElement('div');\\n            element.resizeSensor.dir = 'ltr';\\n            element.resizeSensor.className = 'resize-sensor';\\n\\n            var style = {\\n                pointerEvents: 'none',\\n                position: 'absolute',\\n                left: '0px',\\n                top: '0px',\\n                right: '0px',\\n                bottom: '0px',\\n                overflow: 'hidden',\\n                zIndex: '-1',\\n                visibility: 'hidden',\\n                maxWidth: '100%'\\n            };\\n            var styleChild = {\\n                position: 'absolute',\\n                left: '0px',\\n                top: '0px',\\n                transition: '0s',\\n            };\\n\\n            setStyle(element.resizeSensor, style);\\n\\n            var expand = document.createElement('div');\\n            expand.className = 'resize-sensor-expand';\\n            setStyle(expand, style);\\n\\n            var expandChild = document.createElement('div');\\n            setStyle(expandChild, styleChild);\\n            expand.appendChild(expandChild);\\n\\n            var shrink = document.createElement('div');\\n            shrink.className = 'resize-sensor-shrink';\\n            setStyle(shrink, style);\\n\\n            var shrinkChild = document.createElement('div');\\n            setStyle(shrinkChild, styleChild);\\n            setStyle(shrinkChild, { width: '200%', height: '200%' });\\n            shrink.appendChild(shrinkChild);\\n\\n            element.resizeSensor.appendChild(expand);\\n            element.resizeSensor.appendChild(shrink);\\n            element.appendChild(element.resizeSensor);\\n\\n            var computedStyle = window.getComputedStyle(element);\\n            var position = computedStyle ? computedStyle.getPropertyValue('position') : null;\\n            if ('absolute' !== position && 'relative' !== position && 'fixed' !== position) {\\n                element.style.position = 'relative';\\n            }\\n\\n            var dirty, rafId;\\n            var size = getElementSize(element);\\n            var lastWidth = 0;\\n            var lastHeight = 0;\\n            var initialHiddenCheck = true;\\n            var lastAnimationFrame = 0;\\n\\n            var resetExpandShrink = function () {\\n                var width = element.offsetWidth;\\n                var height = element.offsetHeight;\\n\\n                expandChild.style.width = (width + 10) + 'px';\\n                expandChild.style.height = (height + 10) + 'px';\\n\\n                expand.scrollLeft = width + 10;\\n                expand.scrollTop = height + 10;\\n\\n                shrink.scrollLeft = width + 10;\\n                shrink.scrollTop = height + 10;\\n            };\\n\\n            var reset = function() {\\n                // Check if element is hidden\\n                if (initialHiddenCheck) {\\n                    var invisible = element.offsetWidth === 0 && element.offsetHeight === 0;\\n                    if (invisible) {\\n                        // Check in next frame\\n                        if (!lastAnimationFrame){\\n                            lastAnimationFrame = requestAnimationFrame(function(){\\n                                lastAnimationFrame = 0;\\n\\n                                reset();\\n                            });\\n                        }\\n\\n                        return;\\n                    } else {\\n                        // Stop checking\\n                        initialHiddenCheck = false;\\n                    }\\n                }\\n\\n                resetExpandShrink();\\n            };\\n            element.resizeSensor.resetSensor = reset;\\n\\n            var onResized = function() {\\n                rafId = 0;\\n\\n                if (!dirty) return;\\n\\n                lastWidth = size.width;\\n                lastHeight = size.height;\\n\\n                if (element.resizedAttached) {\\n                    element.resizedAttached.call(size);\\n                }\\n            };\\n\\n            var onScroll = function() {\\n                size = getElementSize(element);\\n                dirty = size.width !== lastWidth || size.height !== lastHeight;\\n\\n                if (dirty && !rafId) {\\n                    rafId = requestAnimationFrame(onResized);\\n                }\\n\\n                reset();\\n            };\\n\\n            var addEvent = function(el, name, cb) {\\n                if (el.attachEvent) {\\n                    el.attachEvent('on' + name, cb);\\n                } else {\\n                    el.addEventListener(name, cb);\\n                }\\n            };\\n\\n            addEvent(expand, 'scroll', onScroll);\\n            addEvent(shrink, 'scroll', onScroll);\\n\\n            // Fix for custom Elements\\n            requestAnimationFrame(reset);\\n        }\\n\\n        forEachElement(element, function(elem){\\n            attachResizeEvent(elem, callback);\\n        });\\n\\n        this.detach = function(ev) {\\n            ResizeSensor.detach(element, ev);\\n        };\\n\\n        this.reset = function() {\\n            element.resizeSensor.resetSensor();\\n        };\\n    };\\n\\n    ResizeSensor.reset = function(element) {\\n        forEachElement(element, function(elem){\\n            elem.resizeSensor.resetSensor();\\n        });\\n    };\\n\\n    ResizeSensor.detach = function(element, ev) {\\n        forEachElement(element, function(elem){\\n            if (!elem) return;\\n            if(elem.resizedAttached && typeof ev === \\\"function\\\"){\\n                elem.resizedAttached.remove(ev);\\n                if(elem.resizedAttached.length()) return;\\n            }\\n            if (elem.resizeSensor) {\\n                if (elem.contains(elem.resizeSensor)) {\\n                    elem.removeChild(elem.resizeSensor);\\n                }\\n                delete elem.resizeSensor;\\n                delete elem.resizedAttached;\\n            }\\n        });\\n    };\\n\\n    if (typeof MutationObserver !== \\\"undefined\\\") {\\n        var observer = new MutationObserver(function (mutations) {\\n            for (var i in mutations) {\\n                if (mutations.hasOwnProperty(i)) {\\n                    var items = mutations[i].addedNodes;\\n                    for (var j = 0; j < items.length; j++) {\\n                        if (items[j].resizeSensor) {\\n                            ResizeSensor.reset(items[j]);\\n                        }\\n                    }\\n                }\\n            }\\n        });\\n\\n        document.addEventListener(\\\"DOMContentLoaded\\\", function (event) {\\n            observer.observe(document.body, {\\n                childList: true,\\n                subtree: true,\\n            });\\n        });\\n    }\\n\\n    return ResizeSensor;\\n\\n}));\\n\\n'use strict';\\n\\n/**\\n * Copyright Marc J. Schmidt. See the LICENSE file at the top-level\\n * directory of this distribution and at\\n * https://github.com/marcj/css-element-queries/blob/master/LICENSE.\\n */\\n(function (root, factory) {\\n    if (typeof define === \\\"function\\\" && define.amd) {\\n        define(['./ResizeSensor.js'], factory);\\n    } else if (typeof exports === \\\"object\\\") {\\n        module.exports = factory(require('./ResizeSensor.js'));\\n    } else {\\n        root.ElementQueries = factory(root.ResizeSensor);\\n        root.ElementQueries.listen();\\n    }\\n}(typeof window !== 'undefined' ? window : this, function (ResizeSensor) {\\n\\n    /**\\n     *\\n     * @type {Function}\\n     * @constructor\\n     */\\n    var ElementQueries = function () {\\n        //<style> element with our dynamically created styles\\n        var cssStyleElement;\\n\\n        //all rules found for element queries\\n        var allQueries = {};\\n\\n        //association map to identify which selector belongs to a element from the animationstart event.\\n        var idToSelectorMapping = [];\\n\\n        /**\\n         *\\n         * @param element\\n         * @returns {Number}\\n         */\\n        function getEmSize(element) {\\n            if (!element) {\\n                element = document.documentElement;\\n            }\\n            var fontSize = window.getComputedStyle(element, null).fontSize;\\n            return parseFloat(fontSize) || 16;\\n        }\\n\\n        /**\\n         * Get element size\\n         * @param {HTMLElement} element\\n         * @returns {Object} {width, height}\\n         */\\n        function getElementSize(element) {\\n            if (!element.getBoundingClientRect) {\\n                return {\\n                    width: element.offsetWidth,\\n                    height: element.offsetHeight\\n                }\\n            }\\n\\n            var rect = element.getBoundingClientRect();\\n            return {\\n                width: Math.round(rect.width),\\n                height: Math.round(rect.height)\\n            }\\n        }\\n\\n        /**\\n         *\\n         * @copyright https://github.com/Mr0grog/element-query/blob/master/LICENSE\\n         *\\n         * @param {HTMLElement} element\\n         * @param {*} value\\n         * @returns {*}\\n         */\\n        function convertToPx(element, value) {\\n            var numbers = value.split(/\\\\d/);\\n            var units = numbers[numbers.length - 1];\\n            value = parseFloat(value);\\n            switch (units) {\\n                case \\\"px\\\":\\n                    return value;\\n                case \\\"em\\\":\\n                    return value * getEmSize(element);\\n                case \\\"rem\\\":\\n                    return value * getEmSize();\\n                // Viewport units!\\n                // According to http://quirksmode.org/mobile/tableViewport.html\\n                // documentElement.clientWidth/Height gets us the most reliable info\\n                case \\\"vw\\\":\\n                    return value * document.documentElement.clientWidth / 100;\\n                case \\\"vh\\\":\\n                    return value * document.documentElement.clientHeight / 100;\\n                case \\\"vmin\\\":\\n                case \\\"vmax\\\":\\n                    var vw = document.documentElement.clientWidth / 100;\\n                    var vh = document.documentElement.clientHeight / 100;\\n                    var chooser = Math[units === \\\"vmin\\\" ? \\\"min\\\" : \\\"max\\\"];\\n                    return value * chooser(vw, vh);\\n                default:\\n                    return value;\\n                // for now, not supporting physical units (since they are just a set number of px)\\n                // or ex/ch (getting accurate measurements is hard)\\n            }\\n        }\\n\\n        /**\\n         *\\n         * @param {HTMLElement} element\\n         * @param {String} id\\n         * @constructor\\n         */\\n        function SetupInformation(element, id) {\\n            this.element = element;\\n            var key, option, elementSize, value, actualValue, attrValues, attrValue, attrName;\\n\\n            var attributes = ['min-width', 'min-height', 'max-width', 'max-height'];\\n\\n            /**\\n             * Extracts the computed width/height and sets to min/max- attribute.\\n             */\\n            this.call = function () {\\n                // extract current dimensions\\n                elementSize = getElementSize(this.element);\\n\\n                attrValues = {};\\n\\n                for (key in allQueries[id]) {\\n                    if (!allQueries[id].hasOwnProperty(key)) {\\n                        continue;\\n                    }\\n                    option = allQueries[id][key];\\n\\n                    value = convertToPx(this.element, option.value);\\n\\n                    actualValue = option.property === 'width' ? elementSize.width : elementSize.height;\\n                    attrName = option.mode + '-' + option.property;\\n                    attrValue = '';\\n\\n                    if (option.mode === 'min' && actualValue >= value) {\\n                        attrValue += option.value;\\n                    }\\n\\n                    if (option.mode === 'max' && actualValue <= value) {\\n                        attrValue += option.value;\\n                    }\\n\\n                    if (!attrValues[attrName]) attrValues[attrName] = '';\\n                    if (attrValue && -1 === (' ' + attrValues[attrName] + ' ').indexOf(' ' + attrValue + ' ')) {\\n                        attrValues[attrName] += ' ' + attrValue;\\n                    }\\n                }\\n\\n                for (var k in attributes) {\\n                    if (!attributes.hasOwnProperty(k)) continue;\\n\\n                    if (attrValues[attributes[k]]) {\\n                        this.element.setAttribute(attributes[k], attrValues[attributes[k]].substr(1));\\n                    } else {\\n                        this.element.removeAttribute(attributes[k]);\\n                    }\\n                }\\n            };\\n        }\\n\\n        /**\\n         * @param {HTMLElement} element\\n         * @param {Object}      id\\n         */\\n        function setupElement(element, id) {\\n            if (!element.elementQueriesSetupInformation) {\\n                element.elementQueriesSetupInformation = new SetupInformation(element, id);\\n            }\\n\\n            if (!element.elementQueriesSensor) {\\n                element.elementQueriesSensor = new ResizeSensor(element, function () {\\n                    element.elementQueriesSetupInformation.call();\\n                });\\n            }\\n        }\\n\\n        /**\\n         * Stores rules to the selector that should be applied once resized.\\n         *\\n         * @param {String} selector\\n         * @param {String} mode min|max\\n         * @param {String} property width|height\\n         * @param {String} value\\n         */\\n        function queueQuery(selector, mode, property, value) {\\n            if (typeof(allQueries[selector]) === 'undefined') {\\n                allQueries[selector] = [];\\n                // add animation to trigger animationstart event, so we know exactly when a element appears in the DOM\\n\\n                var id = idToSelectorMapping.length;\\n                cssStyleElement.innerHTML += '\\\\n' + selector + ' {animation: 0.1s element-queries;}';\\n                cssStyleElement.innerHTML += '\\\\n' + selector + ' > .resize-sensor {min-width: '+id+'px;}';\\n                idToSelectorMapping.push(selector);\\n            }\\n\\n            allQueries[selector].push({\\n                mode: mode,\\n                property: property,\\n                value: value\\n            });\\n        }\\n\\n        function getQuery(container) {\\n            var query;\\n            if (document.querySelectorAll) query = (container) ? container.querySelectorAll.bind(container) : document.querySelectorAll.bind(document);\\n            if (!query && 'undefined' !== typeof $$) query = $$;\\n            if (!query && 'undefined' !== typeof jQuery) query = jQuery;\\n\\n            if (!query) {\\n                throw 'No document.querySelectorAll, jQuery or Mootools\\\\'s $$ found.';\\n            }\\n\\n            return query;\\n        }\\n\\n        /**\\n         * If animationStart didn't catch a new element in the DOM, we can manually search for it\\n         */\\n        function findElementQueriesElements(container) {\\n            var query = getQuery(container);\\n\\n            for (var selector in allQueries) if (allQueries.hasOwnProperty(selector)) {\\n                // find all elements based on the extract query selector from the element query rule\\n                var elements = query(selector, container);\\n\\n                for (var i = 0, j = elements.length; i < j; i++) {\\n                    setupElement(elements[i], selector);\\n                }\\n            }\\n        }\\n\\n        /**\\n         *\\n         * @param {HTMLElement} element\\n         */\\n        function attachResponsiveImage(element) {\\n            var children = [];\\n            var rules = [];\\n            var sources = [];\\n            var defaultImageId = 0;\\n            var lastActiveImage = -1;\\n            var loadedImages = [];\\n\\n            for (var i in element.children) {\\n                if (!element.children.hasOwnProperty(i)) continue;\\n\\n                if (element.children[i].tagName && element.children[i].tagName.toLowerCase() === 'img') {\\n                    children.push(element.children[i]);\\n\\n                    var minWidth = element.children[i].getAttribute('min-width') || element.children[i].getAttribute('data-min-width');\\n                    //var minHeight = element.children[i].getAttribute('min-height') || element.children[i].getAttribute('data-min-height');\\n                    var src = element.children[i].getAttribute('data-src') || element.children[i].getAttribute('url');\\n\\n                    sources.push(src);\\n\\n                    var rule = {\\n                        minWidth: minWidth\\n                    };\\n\\n                    rules.push(rule);\\n\\n                    if (!minWidth) {\\n                        defaultImageId = children.length - 1;\\n                        element.children[i].style.display = 'block';\\n                    } else {\\n                        element.children[i].style.display = 'none';\\n                    }\\n                }\\n            }\\n\\n            lastActiveImage = defaultImageId;\\n\\n            function check() {\\n                var imageToDisplay = false, i;\\n\\n                for (i in children) {\\n                    if (!children.hasOwnProperty(i)) continue;\\n\\n                    if (rules[i].minWidth) {\\n                        if (element.offsetWidth > rules[i].minWidth) {\\n                            imageToDisplay = i;\\n                        }\\n                    }\\n                }\\n\\n                if (!imageToDisplay) {\\n                    //no rule matched, show default\\n                    imageToDisplay = defaultImageId;\\n                }\\n\\n                if (lastActiveImage !== imageToDisplay) {\\n                    //image change\\n\\n                    if (!loadedImages[imageToDisplay]) {\\n                        //image has not been loaded yet, we need to load the image first in memory to prevent flash of\\n                        //no content\\n\\n                        var image = new Image();\\n                        image.onload = function () {\\n                            children[imageToDisplay].src = sources[imageToDisplay];\\n\\n                            children[lastActiveImage].style.display = 'none';\\n                            children[imageToDisplay].style.display = 'block';\\n\\n                            loadedImages[imageToDisplay] = true;\\n\\n                            lastActiveImage = imageToDisplay;\\n                        };\\n\\n                        image.src = sources[imageToDisplay];\\n                    } else {\\n                        children[lastActiveImage].style.display = 'none';\\n                        children[imageToDisplay].style.display = 'block';\\n                        lastActiveImage = imageToDisplay;\\n                    }\\n                } else {\\n                    //make sure for initial check call the .src is set correctly\\n                    children[imageToDisplay].src = sources[imageToDisplay];\\n                }\\n            }\\n\\n            element.resizeSensorInstance = new ResizeSensor(element, check);\\n            check();\\n        }\\n\\n        function findResponsiveImages() {\\n            var query = getQuery();\\n\\n            var elements = query('[data-responsive-image],[responsive-image]');\\n            for (var i = 0, j = elements.length; i < j; i++) {\\n                attachResponsiveImage(elements[i]);\\n            }\\n        }\\n\\n        var regex = /,?[\\\\s\\\\t]*([^,\\\\n]*?)((?:\\\\[[\\\\s\\\\t]*?(?:min|max)-(?:width|height)[\\\\s\\\\t]*?[~$\\\\^]?=[\\\\s\\\\t]*?\\\"[^\\\"]*?\\\"[\\\\s\\\\t]*?])+)([^,\\\\n\\\\s\\\\{]*)/mgi;\\n        var attrRegex = /\\\\[[\\\\s\\\\t]*?(min|max)-(width|height)[\\\\s\\\\t]*?[~$\\\\^]?=[\\\\s\\\\t]*?\\\"([^\\\"]*?)\\\"[\\\\s\\\\t]*?]/mgi;\\n\\n        /**\\n         * @param {String} css\\n         */\\n        function extractQuery(css) {\\n            var match, smatch, attrs, attrMatch;\\n\\n            css = css.replace(/'/g, '\\\"');\\n            while (null !== (match = regex.exec(css))) {\\n                smatch = match[1] + match[3];\\n                attrs = match[2];\\n\\n                while (null !== (attrMatch = attrRegex.exec(attrs))) {\\n                    queueQuery(smatch, attrMatch[1], attrMatch[2], attrMatch[3]);\\n                }\\n            }\\n        }\\n\\n        /**\\n         * @param {CssRule[]|String} rules\\n         */\\n        function readRules(rules) {\\n            var selector = '';\\n\\n            if (!rules) {\\n                return;\\n            }\\n\\n            if ('string' === typeof rules) {\\n                rules = rules.toLowerCase();\\n                if (-1 !== rules.indexOf('min-width') || -1 !== rules.indexOf('max-width')) {\\n                    extractQuery(rules);\\n                }\\n            } else {\\n                for (var i = 0, j = rules.length; i < j; i++) {\\n                    if (1 === rules[i].type) {\\n                        selector = rules[i].selectorText || rules[i].cssText;\\n                        if (-1 !== selector.indexOf('min-height') || -1 !== selector.indexOf('max-height')) {\\n                            extractQuery(selector);\\n                        } else if (-1 !== selector.indexOf('min-width') || -1 !== selector.indexOf('max-width')) {\\n                            extractQuery(selector);\\n                        }\\n                    } else if (4 === rules[i].type) {\\n                        readRules(rules[i].cssRules || rules[i].rules);\\n                    } else if (3 === rules[i].type) {\\n                        if(rules[i].styleSheet.hasOwnProperty(\\\"cssRules\\\")) {\\n                            readRules(rules[i].styleSheet.cssRules);\\n                        }\\n                    }\\n                }\\n            }\\n        }\\n\\n        var defaultCssInjected = false;\\n\\n        /**\\n         * Searches all css rules and setups the event listener to all elements with element query rules..\\n         */\\n        this.init = function () {\\n            var animationStart = 'animationstart';\\n            if (typeof document.documentElement.style['webkitAnimationName'] !== 'undefined') {\\n                animationStart = 'webkitAnimationStart';\\n            } else if (typeof document.documentElement.style['MozAnimationName'] !== 'undefined') {\\n                animationStart = 'mozanimationstart';\\n            } else if (typeof document.documentElement.style['OAnimationName'] !== 'undefined') {\\n                animationStart = 'oanimationstart';\\n            }\\n\\n            document.body.addEventListener(animationStart, function (e) {\\n                var element = e.target;\\n                var styles = element && window.getComputedStyle(element, null);\\n                var animationName = styles && styles.getPropertyValue('animation-name');\\n                var requiresSetup = animationName && (-1 !== animationName.indexOf('element-queries'));\\n\\n                if (requiresSetup) {\\n                    element.elementQueriesSensor = new ResizeSensor(element, function () {\\n                        if (element.elementQueriesSetupInformation) {\\n                            element.elementQueriesSetupInformation.call();\\n                        }\\n                    });\\n\\n                    var sensorStyles = window.getComputedStyle(element.resizeSensor, null);\\n                    var id = sensorStyles.getPropertyValue('min-width');\\n                    id = parseInt(id.replace('px', ''));\\n                    setupElement(e.target, idToSelectorMapping[id]);\\n                }\\n            });\\n\\n            if (!defaultCssInjected) {\\n                cssStyleElement = document.createElement('style');\\n                cssStyleElement.type = 'text/css';\\n                cssStyleElement.innerHTML = '[responsive-image] > img, [data-responsive-image] {overflow: hidden; padding: 0; } [responsive-image] > img, [data-responsive-image] > img {width: 100%;}';\\n\\n                //safari wants at least one rule in keyframes to start working\\n                cssStyleElement.innerHTML += '\\\\n@keyframes element-queries { 0% { visibility: inherit; } }';\\n                document.getElementsByTagName('head')[0].appendChild(cssStyleElement);\\n                defaultCssInjected = true;\\n            }\\n\\n            for (var i = 0, j = document.styleSheets.length; i < j; i++) {\\n                try {\\n                    if (document.styleSheets[i].href && 0 === document.styleSheets[i].href.indexOf('file://')) {\\n                        console.warn(\\\"CssElementQueries: unable to parse local css files, \\\" + document.styleSheets[i].href);\\n                    }\\n\\n                    readRules(document.styleSheets[i].cssRules || document.styleSheets[i].rules || document.styleSheets[i].cssText);\\n                } catch (e) {\\n                }\\n            }\\n\\n            findResponsiveImages();\\n        };\\n\\n        /**\\n         * Go through all collected rules (readRules()) and attach the resize-listener.\\n         * Not necessary to call it manually, since we detect automatically when new elements\\n         * are available in the DOM. However, sometimes handy for dirty DOM modifications.\\n         *\\n         * @param {HTMLElement} container only elements of the container are considered (document.body if not set)\\n         */\\n        this.findElementQueriesElements = function (container) {\\n            findElementQueriesElements(container);\\n        };\\n\\n        this.update = function () {\\n            this.init();\\n        };\\n    };\\n\\n    ElementQueries.update = function () {\\n        ElementQueries.instance.update();\\n    };\\n\\n    /**\\n     * Removes all sensor and elementquery information from the element.\\n     *\\n     * @param {HTMLElement} element\\n     */\\n    ElementQueries.detach = function (element) {\\n        if (element.elementQueriesSetupInformation) {\\n            //element queries\\n            element.elementQueriesSensor.detach();\\n            delete element.elementQueriesSetupInformation;\\n            delete element.elementQueriesSensor;\\n\\n        } else if (element.resizeSensorInstance) {\\n            //responsive image\\n\\n            element.resizeSensorInstance.detach();\\n            delete element.resizeSensorInstance;\\n        }\\n    };\\n\\n    ElementQueries.init = function () {\\n        if (!ElementQueries.instance) {\\n            ElementQueries.instance = new ElementQueries();\\n        }\\n\\n        ElementQueries.instance.init();\\n    };\\n\\n    var domLoaded = function (callback) {\\n        /* Mozilla, Chrome, Opera */\\n        if (document.addEventListener) {\\n            document.addEventListener('DOMContentLoaded', callback, false);\\n        }\\n        /* Safari, iCab, Konqueror */\\n        else if (/KHTML|WebKit|iCab/i.test(navigator.userAgent)) {\\n            var DOMLoadTimer = setInterval(function () {\\n                if (/loaded|complete/i.test(document.readyState)) {\\n                    callback();\\n                    clearInterval(DOMLoadTimer);\\n                }\\n            }, 10);\\n        }\\n        /* Other web browsers */\\n        else window.onload = callback;\\n    };\\n\\n    ElementQueries.findElementQueriesElements = function (container) {\\n        ElementQueries.instance.findElementQueriesElements(container);\\n    };\\n\\n    ElementQueries.listen = function () {\\n        domLoaded(ElementQueries.init);\\n    };\\n\\n    return ElementQueries;\\n\\n}));\\n\\nElementQueries.listen();\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2021-05-20T16:46:49.000Z\",\"updated_at\":\"2021-05-20T16:58:33.000Z\",\"title\":\"Media Queries with Grids\",\"description\":\"\",\"slug_hash\":\"dyvNWaw\",\"head\":\"\",\"private\":true,\"slug_hash_private\":\"30e50a52ec2c5843f96687fae29a7627\",\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":43259165,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":null,\"cpid\":\"01798aac-28a8-7b1d-a537-23e82bb95d72\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Private\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css","__path_to_infinite_loop_detection":"https://cpwebassets.codepen.io/assets/packs/js/infiniteLoopDetection-2da1288227e223513db7.js"}