Blaze UI Grid
Last Updated :
08 Jun, 2022
Blaze UI is an open-source, framework-free UI toolkit that provides a solid structure for quickly constructing websites with a scalable and maintainable base. It is responsive in nature since all of the components were designed to work on any screen size.
Blaze UI Grid is a necessary component for each website since it properly aligns space and improves the user interface.
Blaze UI Grid Fixed Width is a component provided by the framework The cells of a grid will be fluid and responsive in this component. It enables us to give each grid cell a set width.
Type of Grids:
- Basic Grid: The classes under this type are used to wrap the elements in a grid manner.
- Widths: The classes under this type are used to apply widths to the cells.
- Offsets: The classes under this type are used to push the cells horizontally across a grid.
- Wrapping: The classes under this type are used to wrap the elements into one line or can be wrapped into multiple lines.
- Nesting: The classes under this type are used to nest two or more cells in the grids.
- Vertical Alignment: If one of your cells has more height than the usual, then you can use this class for that case.
- Responsiveness: Using the classes under this category maximizes screen space and offers outstanding user experiences on a variety of devices, the grid can go full width at specific breakpoints.
- Responsive Suffixes: Individual cells can change the width at specific breakpoints by using classes under this type.
- Gutters: Blaze’s grid includes a gutter surrounding each grid cell as well as padding on both sides. You might want your cells to be flush with each other at times. You can use the classes under this type to remove the gutter effect.
- Fixed widths: Grid cells are often fluid and responsive. If you want to make a cell a fixed width, use the classes under this type to provide a fixed width.
Example 1: The following code shows a basic grid that is used as a normal grid.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title> Blaze UI Fixed Widths</title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Grids
</div>
</h1>
<br>
<div class="o-grid o-grid--demo">
<div class="o-grid__cell"
style="border:solid black;">
<div class="o-grid-text">first</div>
</div>
<div class="o-grid__cell"
style="border:solid black;">
<div class="o-grid-text">second</div>
</div>
<div class="o-grid__cell"
style="border:solid black;">
<div class="o-grid-text">third</div>
</div>
</div>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the o-grid__cell–width-50 class that is used to add width to the cells.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title> Blaze UI Fixed Widths</title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Grids
</div>
</h1>
<br>
<div class="o-grid o-grid--demo"
style="border: solid black;">
<div class="o-grid__cell o-grid__cell--width-50">
<div class="o-grid-text">first</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">second</div>
</div>
<div class="o-grid__cell">
<div class="o-grid-text">third</div>
</div>
</div>
</body>
</html>
|
Output:
Example 3: The following code shows demonstrate the o-grid__cell–full class that is used to add the full length of all cells.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title> Blaze UI Fixed Widths</title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Grids
</div>
</h1>
<br>
<div class="o-grid o-grid--full o-grid--demo">
<div class="o-grid__cell" style="border:solid black;">
<div class="o-grid-text">first</div>
</div>
<div class="o-grid__cell" style="border:solid black;">
<div class="o-grid-text">second</div>
</div>
<div class="o-grid__cell" style="border:solid black;">
<div class="o-grid-text">third</div>
</div>
</div>
</body>
</html>
|
Output:
Example 4: The following code shows demonstrate the o-grid__cell–offset-60 class that is used to push a cell across the grid horizontally.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title> Blaze UI Fixed Widths</title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Grids
</div>
</h1>
<br>
<div class="o-grid o-grid--demo">
<div class="o-grid__cell o-grid__cell--width-20"
style="border:solid black;">
<div class="o-grid-text">first</div>
</div>
<div class="o-grid__cell o-grid__cell--width-20
o-grid__cell--offset-60"
style="border: solid black;">
<div class="o-grid-text">second</div>
</div>
</div>
</body>
</html>
|
Output:
Example 5: This code demonstrates the nesting grid that can be used to perform nesting between two cells.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title> Blaze UI Fixed Widths</title>
<link rel="stylesheet" href=
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
<div class="c-heading__sub">
Blaze UI Grids
</div>
</h1>
<br>
<div class="o-grid o-grid--demo">
<div class="o-grid__cell">
<div class="o-grid" style="border: solid black;">
<div class="o-grid__cell" style="border:solid black;">
<div class="o-grid-text">first</div>
</div>
<div class="o-grid__cell" style="border:solid black;">
<div class="o-grid-text">second</div>
</div>
</div>
<div class="o-grid" style="border: solid black;">
<div class="o-grid__cell" style="border:solid black;">
<div class="o-grid-text">third</div>
</div>
<div class="o-grid__cell" style="border:solid black;">
<div class="o-grid-text">fourth</div>
</div>
</div>
</div>
<div class="o-grid__cell" style="border:solid black;">
<div class="o-grid-text">fifth</div>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/objects/grid/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...