Blaze UI Grid Widths
Last Updated :
26 Apr, 2022
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
Share your thoughts in the comments
Please Login to comment...