Grid 1

Developer
Onsen & Monaca
Size
2,267 Kb
Views
42,504
  1. Grid 1 Previews
  2. Grid 1 HTML Codes
  3. Grid 1 CSS Codes
  4. Grid 1 JS Codes

How do I make an grid 1?

What is a grid 1? How do you make a grid 1? This script and codes were developed by Onsen & Monaca on 14 September 2022, Wednesday.

Grid 1 Previews
IQ Test

Grid 1 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Grid 1</title> <link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsenui.css'>
<link rel='stylesheet prefetch' href='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/css/onsen-css-components.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ons-page> <ons-toolbar> <div class="center">Grid</div> </ons-toolbar> <h3>Bottom-aligned Grid Cells</h3> <ons-row align="bottom"> <ons-col> <div class="Demo"> This cell should be bottom-aligned. </div> </ons-col> <ons-col> <div class="Demo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua. </div> </ons-col> <ons-col> <div class="Demo"> This cell should be bottom-aligned. </div> </ons-col> </ons-row> <h3>Vertically Centered Grid Cells</h3> <ons-row align="center"> <ons-col> <div class="Demo"> This cell should be verticaly-centered with the cell to its right. </div> </ons-col> <ons-col> <div class="Demo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua. </div> </ons-col> </ons-row> <h3>Equally spaced</h3> <ons-row> <ons-col>Col</ons-col> <ons-col>Col</ons-col> </ons-row> <p></p> <ons-row> <ons-col>Col</ons-col> <ons-col>Col</ons-col> <ons-col>Col</ons-col> </ons-row> <p></p> <ons-row> <ons-col>Col</ons-col> <ons-col>Col</ons-col> <ons-col>Col</ons-col> <ons-col>Col</ons-col> </ons-row> <h3>Full height</h3> <ons-row> <ons-col> <div class="Demo"> This column's height will grow to the same height as the tallest column. </div> </ons-col> <ons-col> <div class="Demo"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. </div> </ons-col> </ons-row> <h3>Individual Sizing</h3> <ons-row> <ons-col width="160px">Col width="160px"</ons-col> <ons-col>Col</ons-col> <ons-col>Col</ons-col> </ons-row> <p></p> <ons-row> <ons-col> <div class="Demo">Col</div> </ons-col> <ons-col width="33%"> <div class="Demo">Col width="33%"</div> </ons-col> </ons-row> <p></p> <ons-row> <ons-col width="25%"> <div class="Demo">Col width="25%"</div> </ons-col> <ons-col> <div class="Demo">Col</div> </ons-col> <ons-col width="33%"> <div class="Demo">Col width="33%"</div> </ons-col> </ons-row> <p></p> <ons-row> <ons-col width="100px"> <div class="Demo">Col width="100px"</div> </ons-col> <ons-col> <div class="Demo">Col</div> </ons-col> <ons-col width="50px"> <div class="Demo">Col width="50px"</div> </ons-col> </ons-row> <h3>Top-aligned Grid Cells</h3> <ons-row align="top"> <ons-col> <div class="Demo"> This cell should be top-aligned. </div> </ons-col> <ons-col> <div class="Demo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua. </div> </ons-col> <ons-col> <div class="Demo"> This cell should be top-aligned. </div> </ons-col> </ons-row> <h3>Mixed Vertical Alignment</h3> <ons-row> <ons-col align="top"> <div class="Demo"> This cell should be top aligned. </div> </ons-col> <ons-col> <div class="Demo"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do euismod tempor incididunt ut larbore et dolore magna aliqua. </div> </ons-col> <ons-col align="center"> <div class="Demo"> This cell should be center-aligned. </div> </ons-col> <ons-col align="bottom"> <div class="Demo"> This cell should be bottom-aligned. </div> </ons-col> </ons-row>
</ons-page> <script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/angular/angular.min.js'></script>
<script src='https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.11/build/js/onsenui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Grid 1 - Script Codes CSS Codes

.col { border: 1px solid #ccc; background: #fff; overflow: hidden; padding: 4px; color: #999;
}
.page__content { background-color: #f6f6f6; padding: 8px;
}
h3 { color: #666; font-size: 17px;
}

Grid 1 - Script Codes JS Codes

ons.bootstrap();
Grid 1 - Script Codes
Grid 1 - Script Codes
Home Page Home
Developer Onsen & Monaca
Username onsen
Uploaded September 14, 2022
Rating 3
Size 2,267 Kb
Views 42,504
Do you need developer help for Grid 1?

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!

Onsen & Monaca (onsen) Script Codes
Name
Alert, confirm and prompt dialogs
Icons
Popover in various places
Many carousel items in a row
Popover in different styles
Splitter
Split View
Tabbar
Navigator with Custom Animation
Navigator Animation
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!