Government of
India
Powered by NeGD | MeitY Government of India® UX4G
Grid
With a twelve-column structure, six standard responsive tiers, Sass variables and mixins, and dozens of predefined classes, developers can create layouts of any size and shape with our robust mobile-first flexbox grid.
Example #
The grid system used by UX4G arranges and aligns material using a number of containers, rows, and columns. It is entirely responsive and flexbox-built. Here is a detailed explanation of how the grid system works with an example.
INFO
New to or unfamiliar with flexbox? Read this CSS Tricks flexbox guide for background, terminology, guidelines, and code snippets.
RESULT
Using the preset grid classes, the aforementioned example generates three columns that are of same width across all devices and viewports. The parent .container-centered page has those columns in the center.
How it works #
Here is how the grid system is put together, broken down:
-
The grid supports six responsive breakpoints. Because breakpoints are based on min-width media queries, they have an impact on all breakpoints below them as well (for example .col-sm-4 affects
sm, md, lg, xl, and xxl). This means that eachbreakpointhas control over the size and behavior of the container and the column. -
The content is horizontally and centrally padded by containers. Use a responsive container (such as .container-md) for a combination of fluid and pixel widths,
.container-fluidfor width: 100% across all viewports and devices, or a responsive pixel width (such as .container). -
Columns are encased in rows. To manage the distance between each column, there is horizontal padding (referred to as a gutter) between them. To guarantee that the information in the columns is visibly aligned down the left side, this padding is then offset on the rows with negative margins. Additionally, rows enable gutter classes to alter the spacing of your text and modifier classes to apply column sizing consistently.
-
Columns are quite adaptable. Developers can design various combinations of items that span any number of columns thanks to the 12 template columns that are accessible each row. Column classes specify how many template columns will be covered, for example, col-4 covers four. For consistent relative size, widths are set in percentages.
-
Gutters can be customized and are sensitive. All breakpoints offer gutter classes that come in the same sizes as our margin and padding spacing. Change all gutters
to.g-*classes, all vertical guttersto.gy-*classes, or only the horizontal guttersto.gx-*classes. Gutters can also be removed using..g-0.
The grid is powered by Sass variables, maps, and mixins. Utilize the grid's source Sass to make personalized grid classes with more semantic markup if there is no need of predefined grid classes in UX4G. For even more versatility, UX4G also supply some CSS unique attributes to use with these Sass variables.
Grid options #
All six of the standard breakpoints as well as any custom breakpoints are compatible with UX4G's grid structure. The following are the six standard grid tiers:
- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)
Each of these breakpoints has its own container, particular class prefix, and modifiers, as was already mentioned. Following are the modifications to the grid at these breakpoints:
| xs <576px |
sm ≥576px |
md ≥768px |
lg ≥992px |
xl ≥1200px |
xxl ≥1400px |
|
|---|---|---|---|---|---|---|
Container max-width |
None (auto) | 540px | 720px | 960px | 1140px | 1320px |
| Class prefix | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
| # of columns | 12 | |||||
| Gutter width | 1.5rem (.75rem on left and right) | |||||
| Custom gutters | Yes | |||||
| Nestable | Yes | |||||
| Column ordering | Yes | |||||
Auto-layout columns #
Utilize breakpoint-specific column classes for easy column sizing without an
explicit numbered class like .col-sm-6.
Equal-width #
Here are two grid layouts as an illustration that work with any device and viewport, from xs to xxl. Every column will be the same width if there is an addition of any number of unit-less classes for each breakpoint that is required.
RESULT
Setting one column width #
By using auto-layout for flexbox grid columns, also adjust a column's width and have the adjacent columns resize themselves to fit it. Grid mixins, inline widths, or predefined grid classes (like the ones below) are all options. Regardless of the width of the central column, the other columns will resize.
RESULT
Variable width content #
Use col-{breakpoint}-auto classes to size columns
based on the natural width of their content.
RESULT
Responsive classes #
The grid from UX4G has six tiers of predefined classes that can be used to create intricate responsive layouts. Choose the size of columns to be on extremely small, small, medium, large, or extra large devices.
All breakpoints #
Use the .col and .col-* classes for consistent grids across all device sizes. If there Is a requirement for a column of a specific size, specify a numbered class; otherwise, feel free to keep with .col.
RESULT
Stacked to horizontal #
A simple grid system that begins as stacking and transitions to horizontality at the small breakpoint (sm) can be made using just one set of .col-sm-* classes.
RESULT
Mix and match #
Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
RESULT
Row columns #
To rapidly select the number of columns that best portray the content and layout, use the responsive .row-cols-* classes. The row columns classes are set on the parent .row as a shortcut as opposed to the standard .col-* classes, which are applied to the individual columns (for example .col-md-4). Give the columns their natural width by using.
Make basic grid layouts easily with these row columns classes, or manage the card layouts.
RESULT
RESULT
<div class="container text-center">
<div class="row row-cols-auto">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
RESULT
<div class="container text-center">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>RESULT
<div class="container text-center">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>RESULT
RESULT
You can also use the accompanying Sass mixin,
row-cols():
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}Nesting #
Add a new .row and set of .col-sm-* columns inside an already-existing .col-sm-* column to nest the content with the default grid. Nested rows must have a collection of columns that totals 12 or less (but you don't have to use all 12 available columns).
RESULT
Sass #
There is a choice to use Sass variables and mixins to build unique, sensible, and responsive page layouts when working with UX4G's source Sass files. These same variables and mixins are used by the predefined grid classes, which offer a complete set of ready-to-use classes for quick responsive layouts.
Variables #
The number of columns, gutter width, and media query point at which to start floating columns are all determined by variables and maps. Both the preset grid classes described above and the custom mixins listed below are created using these.
$grid-columns: 12;
$grid-gutter-width: 1.5rem;
$grid-row-columns: 6;$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);Mixins #
Mixins are used in conjunction with the grid variables to generate semantic CSS for individual grid columns.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);
// Offset with margins
@include make-col-offset($size, $columns: $grid-columns);Example usage #
Either utilize the mixins with their default values or alter the variables to have custom values. Here is an illustration of how to make a two-column layout with a space in between using the default options.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}RESULT
Customizing the grid#
The default grid classes can be entirely altered using the built-in grid Sass variables and maps. Alter the container widths, media query dimensions, and tier count before recompiling.
Columns and gutters #
The number of grid columns can be modified via Sass variables. $grid-columns is used to generate the widths (in
percent) of each individual column while $grid-gutter-width sets the width for the column
gutters.
$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;
$grid-row-columns: 6 !default;Grid tiers #
Beyond the actual columns, choose how many grid layers there are. Update the $grid-breakpoints and $container-max-widths to something like this if there is only a need of four grid tiers:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);Must save your changes and recompile any time you alter the Sass variables or maps. By doing this, a fresh set of preset grid classes for column widths, offsets, and ordering will be produced. Additionally, responsive visibility tools will be enhanced to make use of the unique breakpoints. Set grid values in pixels (not in rem, em, or %).
