How to create single column grid ?
In this article, we will learn how to create a single-column grid. We will be discussing two approaches to the task.
Approach 1: Using the jQuery Mobile Grid: jQuery Mobile is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. The Grids in JQuery provides CSS-based columns that are responsive. The grids have a width of 100%, grids do not have a background colour, border, and padding. The grids contain elements in them, these elements can be made float side-by-side using ui-block-a/b/c/d/e.
Steps:
- Include jQuery Mobile to the HTML page either through a CDN or locally.
- In the body, create a div element with the class as ui-grid-solo.
- In the div element, we create another div element with the class as ui-block-a.
- That’s it our single-column grid is ready to use. We can now add anything to this single grid.
Example 1: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html> < html > < head > < link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> < script src = "http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js" > </ script > </ head > < body > < div class = "ui-grid-solo" > < div class = "ui-block-a" > < a href = "#" class="ui-btn ui-shadow ui-corner-all"> Single Column Grid </ a > </ div > </ div > </ body > </ html > |
Output:
Approach 2: Using the grid display property in CSS: The CSS Grid offers a grid-based layout system, with rows and columns, making it easier to design web pages without floats and positioning. We can use this for creating our single-column grid.
Steps:
- Create a div and set the display as Grid and set the grid-template-columns property to 100%.
- Now inside that div create another div this will be the single column.
- Add some padding and border you are good to go.
Example 2: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html> < html > < head > < style > .wrapper { display: grid; } .column { border: 3px rgb(216, 117, 81) solid; text-align: center; padding: 10px; } </ style > </ head > < body > < div class = "wrapper" > < div class = "column" >Single-column Grid</ div > </ div > </ body > </ html > |
Output:
Contact Us