Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Columns
Flexbox grid system enables to adjust columns with a variety of alignment, ordering, and offsetting options. See also how to control the widths of non-grid items using column classes.
INFO
Heads up! Be sure to read the Grid page first before diving into how to modify and customize your grid columns.
How they work #
-
Columns expand upon the flexbox architecture of the grid. Flexbox refers to the ability to alter both individual columns as well as groups of columns at the row level. Decide how columns expand, contract, or change in any other way.
-
All content is arranged in columns when creating grid layouts. The UX4G grid's structure runs from the container to the row to the column to the content. You might combine material with a column on rare instances, but be aware that this could have unforeseen implications.
-
To build quick, responsive layouts, UX4G has predefined classes. There are dozens of classes already develop in order to design the layouts you want, with six breakpoints and a dozen columns at each grid tier. If you would like, you can disable this using Sass.
Alignment #
Use flexbox alignment utilities to vertically and horizontally align columns.
Vertical alignment #
RESULT
RESULT
Horizontal alignment #
RESULT
Column wrapping #
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
RESULT
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
Subsequent columns continue along the new line.
Column breaks #
A simple hack is needed in flexbox to break columns to a new line: Wherever it is
required to wrap the columns to a new line, add an element with
width: 100%. Multiple rows are typically used to
accomplish this, although not all implementation techniques can take this into
consideration.
RESULT
You may also apply this break at specific breakpoints with our responsive display utilities.
RESULT
Reordering #
Order classes #
Use .order classes for controlling the visual order
of your content. These classes are responsive, so you can set the order by
breakpoint (e.g., .order-1.order-md-2). Includes support for 1
through 5 across all six grid tiers.
RESULT
Additionally, the responsive classes .order-first and
.order-last can be used to reorder elements by using
order: -1 and order: 6, respectively. When necessary,
these classes can also be mixed along with the numbered .order-*
classes.
RESULT
Offsetting columns #
With responsive .offset- grid classes and our margin utilities,
developers may offset grid columns in two different ways. In contrast to
margins, which are more suited for rapid layouts since the offset's
width is flexible, grid classes are proportioned to match columns.
Offset classes #
RESULT
In addition to column clearing at responsive breakpoints, you may need to reset offsets. See this in action in the grid example.
RESULT
Margin utilities #
With the move to flexbox in v4, you can use margin utilities like
.me-auto to force sibling columns away from one
another.
RESULT
Standalone column classes #
To provide an element a certain width outside of a .row, use the
.col-* classes. The paddings are never needed when column classes
are used as indirect children of a row.
RESULT
To generate responsive floated pictures, combine the classes with
utilities. If the text is shorter, make sure to enclose it in a
.clearfix wrapper to remove the float.
RESULT
A paragraph serving as a placeholder. Here, it is used to demonstrate how to use the clearfix class. To show how the columns here interact with the floated image, there are quite a few meaningless phrases.
The paragraphs flow beautifully around the floating image, as it is visible. Imagine how this would appear if there were some genuine content here instead of simply this dull placeholder text that goes on and on but actually says nothing of substance. It is unnecessary and only serves as storage.
And yet, continuing to read this placeholder text in the hopes of discovering some additional information or a hidden piece of content. A joke, possibly. Sadly, none of that exists in this place.
