Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style id="jsbin-css">
- .item-1 {
- grid-area: header;
- background-color: #83CAFE;
- }
- .item-2 {
- grid-area: menu;
- background-color: #CB99CC;
- width: 65px;
- }
- .item-3 {
- grid-area: content;
- background-color: #FECCCB;
- width:368px;
- }
- .item-4 {
- grid-area: ad;
- background-color: #CB99CC;
- width: 65px;
- }
- .item-5 {
- grid-area: footer;
- background-color: #82CBFE;
- }
- .grid-container {
- width: 500px;
- height: 200px;
- display: grid;
- text-align: center;
- background-color: black;
- grid-gap: 1px;
- padding: 1px;
- grid-template-areas: 'header header header header'
- 'menu content content ad'
- 'menu content content ad'
- 'menu content content ad'
- 'footer footer footer footer';
- }
- </style>
- <html>
- <body>
- <div class="grid-container">
- <div class="item-1">HEADER</div>
- <div class="item-2">MENU</div>
- <div class="item-3">CONTENT</div>
- <div class="item-4">AD</div>
- <div class="item-5">FOOTER</div>
- </div>
- <script id="jsbin-source-html" type="text/html"><html>
- <body>
- <div class="grid-container">
- <div class="item-1">HEADER</div>
- <div class="item-2">MENU</div>
- <div class="item-3">CONTENT</div>
- <div class="item-4">AD</div>
- <div class="item-5">FOOTER</div>
- </div>
- </body>
- </html>
- </script>
- <script id="jsbin-source-css" type="text/css">.item-1 {
- grid-area: header;
- background-color: #83CAFE;
- }
- .item-2 {
- grid-area: menu;
- background-color: #CB99CC;
- width: 65px;
- }
- .item-3 {
- grid-area: content;
- background-color: #FECCCB;
- width:368px;
- }
- .item-4 {
- grid-area: ad;
- background-color: #CB99CC;
- width: 65px;
- }
- .item-5 {
- grid-area: footer;
- background-color: #82CBFE;
- }
- .grid-container {
- width: 500px;
- height: 200px;
- display: grid;
- text-align: center;
- background-color: black;
- grid-gap: 1px;
- padding: 1px;
- grid-template-areas: 'header header header header'
- 'menu content content ad'
- 'menu content content ad'
- 'menu content content ad'
- 'footer footer footer footer';
- }
- </script>
- </body>
- </html>
Add Comment
Please, Sign In to add comment