How to create single column grid ?

Last Updated : 01 Jun, 2023

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>