Blaze UI Grid Widths
In this article, we’ll see about grid widths in Blaze UI. Blaze UI is a free, open-source UI toolkit to build a great website. It provides you with various features like responsiveness, custom components, etc. The grid allows the users to create a flexible layout with an easy method. The grid can be created of any size and can also be created of full width.
Blaze UI Grid Widths classes:
- .o-grid__cell–width-xx: This class is used to apply specific width to your cell and once you add a specific width to one cell then other cells will automatically take up the rest of the space equally. In “xx”, you can add your specific width.
- .o-grid–full: This class is used for making the cell of full width.
Syntax:
<div class="o-grid o-grid--demo">
<div class="o-grid__cell o-grid__cell--width-xx">
<div class="o-grid-text">.....</div>
</div>
........
</div>
<div class="o-grid o-grid--full o-grid--demo">
<div class="o-grid__cell">
<div class="o-grid-text">......</div>
</div>
........
</div>Example 1: Below example demonstrates the grid width in Blaze UI.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Blaze UI</title> <link rel="stylesheet" href=</head> <body> <div class="u-centered"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Grid Width in Blaze UI</h2> <h2>.o-grid__cell--width-xx class</h2> </div> <div class="o-container o-container--xlarge o-grid o-grid--demo"> <div class="o-grid__cell o-grid__cell--width-40" style="background-color: tomato;"> <div class="o-grid-text">Cell 1</div> </div> <div class="o-grid__cell" style="background-color: lightgreen;"> <div class="o-grid-text">Cell 2</div> </div> <div class="o-grid__cell" style="background-color: black;"> <div class="o-grid-text" style="color: white;">Cell 3</div> </div> </div></body> </html> |
Output:
Blaze UI Grid Widths
Example 2: Below example demonstrates the full grid width in Blaze UI.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Blaze UI</title> <link rel="stylesheet" href=</head> <body> <div class="u-centered"> <h1 style="color: green">GeeksforGeeks</h1> <h2>Grid Width in Blaze UI</h2> <h3>.o-grid--full class</h3> </div> <div class="o-container o-container--xlarge o-grid o-grid--full o-grid--demo"> <div class="o-grid__cell o-grid__cell--width-40" style="background-color: orange; padding: 20px;"> <h2 class="o-grid-text">Premium Job Portal</h2> </div> <div class="o-grid__cell" style="padding: 20px;"> <h2 class="o-grid-text">Coding Competitions</h2> </div> <div class="o-grid__cell" style= "background-color: green; padding: 20px;"> <h2 class="o-grid-text" style="color: white;"> Online courses </h2> </div> </div></body> </html> |
Output:
Blaze UI Grid Widths
Reference: https://www.blazeui.com/objects/grid
Please Login to comment...