CSS Grid Example

Developer
Lucas Motta
Size
10,061 Kb
Views
32,384
  1. CSS Grid Example Previews
  2. CSS Grid Example HTML Codes
  3. CSS Grid Example CSS Codes
  4. CSS Grid Example JS Codes

How do I make an css grid example?

What is a css grid example? How do you make a css grid example? This script and codes were developed by Lucas Motta on 22 September 2022, Thursday.

CSS Grid Example Previews
IQ Test

CSS Grid Example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Grid Example</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/ojvvzv.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="root"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js'></script> <script src="js/index.js"></script>
</body>
</html>

CSS Grid Example - Script Codes CSS Codes

$grid-gutter: 1.5rem;
@include grid();
.wrapper { position: relative; margin: 0 auto; @include break(md) { max-width: rem(640); } @include break(lg) { max-width: rem(960); } @include break(xl) { max-width: rem(1200); }
}
.layout--guide { position: absolute; width: calc(100% + #{$grid-gutter}); height: 100%; top: 0px; left: 0px; pointer-events: none; z-index: 100; display: none; > .layout__item { position: relative; height: 100%; } > .layout__item:after { content: ""; position: absolute; width: calc(100% - #{$grid-gutter}); height: 100%; background: rgba(100, 100, 100, 0.05); border-left: 1px solid rgba(100, 100, 100, 0.2); border-right: 1px solid rgba(100, 100, 100, 0.2); }
}
.layout__title { position: relative; font-size: 1.5rem; margin: 2rem 0 2rem; color: #222; display: inline-block; &:after { content: ""; position: absolute; bottom: -0.5rem; left: 0rem; width: 1rem; height: 2px; background-color: currentColor; }
}
.placeholder { background: #fff; color: #333; padding: 1rem; margin-bottom: $grid-gutter; border-radius: 2px; box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.03); p { margin-bottom: 0; color: #999; } small { font-size: 0.75rem; text-transform: uppercase; } h1, h2, h3, h4, h5 { color: currentColor; margin-bottom: 0rem; line-height: 1.25; } img { width: 100%; height: auto; display: block; margin-bottom: 0.5rem; }
}
.large-image__caption { font-size: rem(14); line-height: 1.5; padding-top: 0.25rem; font-style: italic; font-family: "Lucida Bright", "Lucida Fax", Palatino, "Palatino Linotype", Palladio, "URW Palladio", serif; @include break(lg) { padding-top: 1rem; border-top: 1px solid #ccc; } @include break(xl) { font-size: rem(16); }
}
.large-image__figure { background-color: #222; margin-bottom: 0.5rem; img { width: 100%; height: auto; display: block; }
}
.hero { min-height: 70vh; width: 100%; background-color: #222; color: #fff; display: flex; padding: 0 $grid-gutter; margin-bottom: $grid-gutter; justify-content: center; align-content: center; > .layout { width: calc(100% + #{$grid-gutter}); @include break(md) { max-width: calc(#{rem(640)} + #{$grid-gutter}); } @include break(lg) { max-width: calc(#{rem(960)} + #{$grid-gutter}); } @include break(xl) { max-width: calc(#{rem(1200)} + #{$grid-gutter}); } }
}
.placeholder--search { background: transparent; box-shadow: none; text-align: center; padding: 0; margin: -1rem 0 0 0; h1 { color: #fff; margin-bottom: 0.5rem; } input { border: none; padding: 1rem; width: 100%; font-size: 1.25rem; min-height: 3.75rem; text-align: center; @include break(md) { margin-bottom: 0; border-radius: 2px; } &::-webkit-input-placeholder { font-size: 1rem; line-height: 1.5rem; color: #ccc; } &:focus::-webkit-input-placeholder { color: #eee; } } input[type="button"] { padding: 1rem 0.5rem; cursor: pointer; background-color: #fff; font-size: 1rem; line-height: 1.5rem; border-top: 1px solid #eee; @include break(md) { border-top: none; } }
}
.debug { .layout--guide { display: flex; } &.debug--label { .layout:not(.layout--guide), .layout:not(.layout--guide) .layout__item { position: relative; outline: 1px solid blue; &:after { content: attr(class); position: absolute; z-index: 1000; top: 0; left: $grid-gutter; white-space: nowrap; padding: 0 3px; height: 1rem; line-height: 1rem; font-size: 0.625rem; font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas, "Liberation Mono", Monaco, "Lucida Console", monospace; color: white; background: rgba(blue, .7); } > .layout__item:first-child:after { top: 1rem; } > .layout__item:first-child > .layout:after { left: auto; right: 0; } } .layout:not(.layout--guide) .layout__item:after { // content: "layout__item"; background: rgba(red, .7); } .layout:not(.layout--guide) .layout__item { outline: 1px solid red; } }
}
/*========================================================================== GLOBAL STYLES
==========================================================================*/
html, body { padding: 0; margin: 0; height: 100%;
}
html { font-family: -apple-system , '.SFNSText-Regular' , 'Helvetica Neue' , 'Roboto' , 'Segoe UI' , sans-serif; font-weight: 300; font-size: 16px; color: #666;
}
body { background-color: #eee; padding: 0 $grid-gutter;
}
p, h1, h2, h3, h4, h5, h6 { line-height: 1.5; margin-bottom: $grid-gutter;
}
h1 { font-size: 1.75rem;
}
h2 { font-size: 1.5rem;
}
h3 { font-size: 1.5rem;
}
*, *:before, *:after { box-sizing: border-box;
}

CSS Grid Example - Script Codes JS Codes

"use strict";
var _class, _temp;
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Example = function (_React$Component) { _inherits(Example, _React$Component); function Example() { _classCallCheck(this, Example); return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); } Example.prototype.render = function render() { return React.createElement( "div", { className: "wrapper" }, React.createElement(GuideGrid, null), React.createElement(HeroSearchExample, null), React.createElement(CardsExample, null), React.createElement(LargeImageExample, null), React.createElement(CopyExample, null), React.createElement(GridExample, null) ); }; return Example;
}(React.Component);
var HeroSearchExample = function (_React$Component2) { _inherits(HeroSearchExample, _React$Component2); function HeroSearchExample() { _classCallCheck(this, HeroSearchExample); return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); } HeroSearchExample.prototype.render = function render() { return React.createElement( Hero, null, React.createElement( Layout, { align: "center", valign: "middle" }, React.createElement( LayoutItem, { size: "1-of-1", lg: "2-of-3", xl: "1-of-2" }, React.createElement( "div", { className: "placeholder placeholder--search" }, React.createElement( "h1", null, "Search" ), React.createElement( Layout, null, React.createElement( LayoutItem, { size: "1-of-1", md: "3-of-4", xl: "2-of-3" }, React.createElement("input", { placeholder: "Search by event, area or date" }) ), React.createElement( LayoutItem, { size: "1-of-1", md: "1-of-4", xl: "1-of-3" }, React.createElement("input", { type: "button", value: "Search" }) ) ) ) ) ) ); }; return HeroSearchExample;
}(React.Component);
var CardsExample = function (_React$Component3) { _inherits(CardsExample, _React$Component3); function CardsExample() { _classCallCheck(this, CardsExample); return _possibleConstructorReturn(this, _React$Component3.apply(this, arguments)); } CardsExample.prototype.render = function render() { var items = Array.from(Array(6).keys()); return React.createElement( Layout, { title: "Cards" }, items.map(function (item) { return React.createElement(Card, { image: "http://placehold.it/800x440", title: "Finally, we set some margins and paddings to keep everything lining up nicely." }); }) ); }; return CardsExample;
}(React.Component);
var Card = function (_React$Component4) { _inherits(Card, _React$Component4); function Card() { _classCallCheck(this, Card); return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments)); } Card.prototype.render = function render() { return React.createElement( SmallBox, null, React.createElement( "div", { className: "placeholder placeholder--card" }, React.createElement("img", { src: this.props.image }), React.createElement( "h4", null, this.props.title ), React.createElement( "p", null, React.createElement( "small", null, "Thursday 19 November, 6:30 PM" ) ) ) ); }; return Card;
}(React.Component);
var SmallBox = function (_React$Component5) { _inherits(SmallBox, _React$Component5); function SmallBox() { _classCallCheck(this, SmallBox); return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments)); } SmallBox.prototype.render = function render() { return React.createElement( LayoutItem, { size: "1-of-1", md: "1-of-2", lg: "1-of-3" }, this.props.children ); }; return SmallBox;
}(React.Component);
var LargeImageExample = function (_React$Component6) { _inherits(LargeImageExample, _React$Component6); function LargeImageExample() { _classCallCheck(this, LargeImageExample); return _possibleConstructorReturn(this, _React$Component6.apply(this, arguments)); } LargeImageExample.prototype.render = function render() { return React.createElement( Layout, { title: "Large Image and caption", className: "layout--reverse@lg" }, React.createElement( LayoutItem, { size: "1-of-1", lg: "5-of-6" }, React.createElement( "div", { className: "large-image__figure" }, React.createElement("img", { src: "http://placehold.it/1200x640/222222/444444" }) ) ), React.createElement( LayoutItem, { size: "1-of-1", lg: "1-of-6" }, React.createElement( "div", { className: "large-image__caption" }, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, sunt?" ) ) ); }; return LargeImageExample;
}(React.Component);
var CopyExample = function (_React$Component7) { _inherits(CopyExample, _React$Component7); function CopyExample() { _classCallCheck(this, CopyExample); return _possibleConstructorReturn(this, _React$Component7.apply(this, arguments)); } CopyExample.prototype.render = function render() { return React.createElement( LayoutSmall, { title: "Copy" }, React.createElement( LayoutItem, { size: "1-of-1", lg: "1-of-2" }, React.createElement( "p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur veniam itaque aspernatur odio repudiandae nulla numquam, mollitia, iure nam incidunt eveniet optio natus, id illo, quibusdam sunt totam iusto quae quo possimus perspiciatis sint. Doloribus delectus deserunt culpa necessitatibus minima cum, veniam deleniti sit neque. Architecto illum minus, cupiditate quia doloribus error, non dolorum porro aliquam perspiciatis debitis rerum placeat nobis delectus quisquam eum harum dolore ullam vero ut." ) ), React.createElement( LayoutItem, { size: "1-of-1", lg: "1-of-2" }, React.createElement( "p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur veniam itaque aspernatur odio repudiandae nulla numquam, mollitia, iure nam incidunt eveniet optio natus, id illo, quibusdam sunt totam iusto quae quo possimus perspiciatis sint. Doloribus delectus deserunt culpa necessitatibus minima cum, veniam deleniti sit neque. Architecto illum minus, cupiditate quia doloribus error, non dolorum porro aliquam perspiciatis debitis rerum placeat nobis delectus quisquam eum harum dolore ullam vero ut." ) ), React.createElement( LayoutItem, { size: "1-of-1" }, React.createElement( "p", null, "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur veniam itaque aspernatur odio repudiandae nulla numquam, mollitia, iure nam incidunt eveniet optio natus, id illo, quibusdam sunt totam iusto quae quo possimus perspiciatis sint." ) ) ); }; return CopyExample;
}(React.Component);
var GridExample = function (_React$Component8) { _inherits(GridExample, _React$Component8); function GridExample() { _classCallCheck(this, GridExample); return _possibleConstructorReturn(this, _React$Component8.apply(this, arguments)); } GridExample.prototype.render = function render() { var items = Array.from(Array(12).keys()); return React.createElement( Layout, { title: "Grid" }, React.createElement( LayoutItem, { size: "whole", md: "1-of-3", lg: "1-of-4", xl: "1-of-3" }, React.createElement( "div", { className: "placeholder" }, "Sidebar" ) ), React.createElement( LayoutItem, { size: "whole", md: "2-of-3", lg: "3-of-4", xl: "2-of-3" }, React.createElement( "div", { className: "placeholder" }, "Content" ) ), items.map(function (item) { return React.createElement( LayoutItem, { size: "1-of-2", md: "1-of-4", lg: "1-of-6", xl: "1-of-12" }, React.createElement( "div", { className: "placeholder" }, item ) ); }) ); }; return GridExample;
}(React.Component);
var Hero = function (_React$Component9) { _inherits(Hero, _React$Component9); function Hero() { _classCallCheck(this, Hero); return _possibleConstructorReturn(this, _React$Component9.apply(this, arguments)); } Hero.prototype.render = function render() { return React.createElement( Layout, { full: true }, React.createElement( LayoutItem, { size: "1-of-1" }, React.createElement( "div", { className: "hero" }, this.props.children ) ) ); }; return Hero;
}(React.Component);
var LayoutSmall = (_temp = _class = function (_React$Component10) { _inherits(LayoutSmall, _React$Component10); function LayoutSmall() { _classCallCheck(this, LayoutSmall); return _possibleConstructorReturn(this, _React$Component10.apply(this, arguments)); } LayoutSmall.prototype.render = function render() { return React.createElement( Layout, { align: "center" }, React.createElement( LayoutItem, { size: "1-of-1", md: this.props.size }, React.createElement( Layout, this.props, this.props.children ) ) ); }; return LayoutSmall;
}(React.Component), _class.defaultProps = { size: '5-of-6'
}, _temp);
var Layout = function (_React$Component11) { _inherits(Layout, _React$Component11); function Layout() { _classCallCheck(this, Layout); return _possibleConstructorReturn(this, _React$Component11.apply(this, arguments)); } Layout.prototype.render = function render() { var className = 'layout'; className += this.props.className ? " " + this.props.className : ''; className += this.props.align ? " layout--" + this.props.align : ''; className += this.props.valign ? " layout--" + this.props.valign : ''; className += this.props.guide ? ' layout--guide' : ''; className += this.props.full ? ' layout--full' : ''; return React.createElement( "div", { className: className }, this.props.title && React.createElement( LayoutItem, { size: "1-of-1" }, React.createElement( "h1", { className: "layout__title" }, this.props.title ) ), this.props.children ); }; return Layout;
}(React.Component);
var LayoutItem = function (_React$Component12) { _inherits(LayoutItem, _React$Component12); function LayoutItem() { _classCallCheck(this, LayoutItem); return _possibleConstructorReturn(this, _React$Component12.apply(this, arguments)); } LayoutItem.prototype.render = function render() { var className = 'layout__item'; className += this.props.size ? " size-" + this.props.size : ''; className += this.props.md ? " size-" + this.props.md + "@md" : ''; className += this.props.mdOnly ? " size-" + this.props.mdOnly + "@md-only" : ''; className += this.props.lg ? " size-" + this.props.lg + "@lg" : ''; className += this.props.lgOnly ? " size-" + this.props.lgOnly + "@lg-only" : ''; className += this.props.xl ? " size-" + this.props.xl + "@xl" : ''; return React.createElement( "div", { className: className }, this.props.children ); }; return LayoutItem;
}(React.Component);
var GuideGrid = function (_React$Component13) { _inherits(GuideGrid, _React$Component13); function GuideGrid() { _classCallCheck(this, GuideGrid); return _possibleConstructorReturn(this, _React$Component13.apply(this, arguments)); } GuideGrid.prototype.render = function render() { var items = Array.from(Array(12).keys()); return React.createElement( Layout, { guide: true }, items.map(function (item) { return React.createElement(LayoutItem, null); }) ); }; return GuideGrid;
}(React.Component);
React.render(React.createElement(Example, null), document.getElementById('root'));
window.addEventListener("keyup", function (e) { if (e.keyCode === 68) { document.body.classList.toggle('debug'); document.body.classList.remove('debug--debug'); } if (e.keyCode === 76) { document.body.classList.add('debug'); document.body.classList.toggle('debug--label'); }
});
CSS Grid Example - Script Codes
CSS Grid Example - Script Codes
Home Page Home
Developer Lucas Motta
Username lucasmotta
Uploaded September 22, 2022
Rating 3
Size 10,061 Kb
Views 32,384
Do you need developer help for CSS Grid Example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lucas Motta (lucasmotta) Script Codes
Name
3D Kitty Grid
Responsive Infinite Carousel
A Pen by Lucas Motta
CSS Triangles with shadow
Follow the kitty
Flying Particles
Medium Menu
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!