indian flagGovernment of India
|
GitHub GitHub

Powered by NeGD | MeitY Government of India® UX4G

CSS Grid

The default grid system used by UX4G is the result of more than ten years and millions of CSS layout experiments. However, it was also developed without a lot of the contemporary CSS capabilities and methods that are now visible in browsers, such as the new CSS Grid.

danger

Heads up—our CSS Grid system is experimental and opt-in as of v1.0! We included it in our documentation's CSS to demonstrate it for you, but it's disabled by default. Keep reading to learn how to enable it in your projects.

How it works #

The ability to set a different grid system based on CSS Grid but with a UX4G twist has been added with UX4G. Although the methodology for creating flexible layouts has changed, developers still have classes at their disposal.

  • CSS Grid can be chosen. Set $enable-grid-classes: false to disable the built-in grid system, and $enable-cssgrid: true to enable it. Recompile the Sass after that.

  • Replace .col-* classes with .g-col-* classes. This is so because the grid-column property—rather than the width—is used for the CSS Grid columns.

  • Through CSS variables, column and gutter sizes are adjustable. Set these on the parent .grid and alter them using the --bs-columns and --bs-gap options inline or in a stylesheet.

  • Since nearly all browsers now offer flexbox via the gap feature, UX4G will probably switch to a hybrid approach in the future.

In the future, UX4G will likely shift to a hybrid solution as the gap property has achieved nearly full browser support for flexbox.

Key differences #

Compared to the default grid system:

  • The CSS Grid columns aren't affected in the same way as Flex utilities.

  • Gutter replacement: gaps. The horizontal padding from the default grid system is replaced by the gap attribute, which works more like a margin.

  • Therefore, unlike .rows, .grids do not have negative margins, and grid gutters cannot be changed using margin utilities. Grid gaps are automatically applied both horizontally and vertically. For more information, refer to the customizing section.

  • Modifier classes should be considered obsolete in favor of inline and custom styles (e.g., style="--bs-columns: 3;" vs. class="row-cols-3").

  • Similar to stacking, nesting may necessitate that you reset your column counts for each instance of a nested.grid. Details can be found in the nesting section.

Examples #

Three columns #

Using the .g-col-4 classes, three columns of equal width can be produced across all viewports and devices. To adjust the layout based on viewport size, add responsive classes.

RESULT
.g-col-4
.g-col-4
.g-col-4

Responsive #

In case there is a requirement of changing the layout across viewports, use responsive classes. On the smallest viewports, start with two columns here, and medium viewports and larger, increase to three columns.

RESULT
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4

Compare that to this two column layout at all viewports.

RESULT
.g-col-6
.g-col-6

Wrapping #

When there is no more room horizontally, grid items automatically wrap to the next line. Take note that both the horizontal and vertical gaps between grid items are covered by the gap.

RESULT
.g-col-6
.g-col-6
.g-col-6
.g-col-6

Starts #

Offset classes in the default grid are intended to be replaced with start classes, although they are not completely identical. Through the use of styles, CSS Grid generates a grid template by instructing browsers to "start at this column" and "end at this column." Grid-column-start and grid-column-end are those properties. Start classes are referred to by their abbreviation. To size and position the columns according to need, combine them with the appropriate column classes. As 0 is an incorrect value for these properties, start classes start at 1.

RESULT
.g-col-3 .g-start-2
.g-col-4 .g-start-6

Auto columns #

Each grid item (the direct children of a.grid) will be scaled to one column by default if there are no classes on those items.

RESULT
1
1
1
1
1
1
1
1
1
1
1
1

This behavior can be mixed with grid column classes.

RESULT
.g-col-6
1
1
1
1
1
1

Nesting #

The nesting of .grids is simple within the CSS Grid, much like with the default grid system. The rows, columns, and gaps of this grid have changed in contrast to the default, though. Consider the following illustration:

  • A local CSS variable named --bs-columns: 3 is used to override the default number of columns.
  • Each column fills one-third of the available width in the first auto-column, which inherits the column count.
  • The nested .grid's column count is set to 12 (default) in the second auto-column.
  • There is no nested content in the third auto-column.
  • Comparatively speaking to the normal grid approach, this enables more intricate and personalized layouts.

In practice this allows for more complex and custom layouts when compared to our default grid system.

RESULT
First auto-column
Auto-column
Auto-column
Second auto-column
6 of 12
4 of 12
2 of 12
Third auto-column

Customizing #

Customize the number of columns, the number of rows, and the width of the gaps with local CSS variables.

Variable Fallback value Description
--bs-rows 1 The number of rows in your grid template
--bs-columns 12 The number of columns in your grid template
--bs-gap 1.5rem The size of the gap between columns (vertical and horizontal)

These CSS variables have no default value; instead, they apply fallback values that are used until a local instance is provided. For example, we use var(--bs-rows, 1) for our CSS Grid rows, which ignores --bs-rows because that hasn't been set anywhere yet. Once it is, the .grid instance will use that value instead of the fallback value of 1.

No grid classes #

Immediate children elements of .grid are grid items, so they'll be sized without explicitly adding a .g-col class.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>
RESULT
Auto-column
Auto-column
Auto-column

Columns and gaps #

Adjust the number of columns and the gap.

RESULT
.g-col-2
.g-col-2
RESULT
.g-col-6
.g-col-4

Adding rows #

Adding more rows and changing the placement of columns:

RESULT
Auto-column
Auto-column
Auto-column

Gaps #

Change the vertical gaps only by modifying the row-gap. Note that we use gap on .grids, but row-gap and column-gap can be modified as needed.

RESULT
.g-col-6
.g-col-6
.g-col-6
.g-col-6

Because of that, you can have different vertical and horizontal gaps, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for gap, or with our --bs-gap CSS variable.

RESULT
.g-col-6
.g-col-6
.g-col-6
.g-col-6

Sass #

The default classes are still produced by two Sass variables, $grid-columns and $grid-gutter-width, which is one restriction of the CSS Grid. The number of classes generated by the compiled CSS is essentially predetermined by this. Here are two choices:

  • Change those Sass default variables, then compile the CSS again.
  • To improve the given classes, use inline or personalized styles.

For instance, alter the gap size and increase the number of columns before sizing the "columns" with a combination of inline styles and standard CSS Grid column classes (such as.g-col-4).

RESULT
14 columns
.g-col-4