CSS Grid

CSS Grid Layout

The Responsive CSS Grid Layout System is built using CSS Grid and is fully responsive. See the example and the detailed explanation of the CSS Grid Responsive Layout below.

Implementation Details

• The CSS Grid is compatible with six responsive breakpoints, which are based on min-width media queries.
  This means that a breakpoint affects that specific breakpoint and all those above it. For example, the class .k-col-span-sm-2 applies to sm, md, lg, xl, and xxl breakpoints.
  You can manage the column sizing and behavior for each breakpoint individually.
• CSS Grid Wrapper—the .k-d-grid wraps the content and sets the layout to CSS Grid.
  Adding a Gap utility class to the CSS Grid will add a gutter.
• Number of Columns—the .k-grid-cols-{n}, k-grid-cols-{bp}-{n} specifies how many grid columns the layout will have (maximum 12 columns).
• Column—the k-col-span-{n}, k-col-span-{bp}-{n} column classes set the number of columns an element will span.
  The k-col-start-{n}, k-col-start-{bp}-{n}, k-col-end-{n}, k-col-end-{bp}-{n} column classes set the element's start/end position.
• Gutters—the .k-gap-{n}, .k-gap-{bp}-{n} add gap to the CSS Grid layout.

Breakpoints

Here is how the Responsive Layout System changes across the above-mentioned breakpoints:

CSS Grid Breakpoint Classes

The CSS Grid Breakpoint classes are designed to make responsive grid layouts easy and consistent. Each class is composed of a base name, followed by a breakpoint identifier (xs, sm, md, lg, xl or xxl), and then a value or modifier. This naming convention allows you to apply different grid settings at various screen sizes, making your layouts fully responsive and adaptable.

Grid Column

These responsive Columns utility classes provide fine-grained control over CSS Grid column positioning and spanning at different responsive breakpoints. Use them with specific identifier (e.g k-col-start-sm-1) to set where a grid column starts, ends, or how many columns it spans, making it easy to build flexible and responsive grid layouts.

To use the non-responsive variants see the Grid Column article.

Grid Row

These responsive Rows utility classes provide fine-grained control over CSS Grid row positioning and spanning at different responsive breakpoints. Use them with specific identifier (e.g k-row-start-sm-1) to set where a grid row starts, ends, or how many rows it spans, making it easy to build flexible and responsive grid layouts.

To use the non-responsive variants see the Grid Row article.

Grid Template Columns

These responsive Grid Template Columns utility classes allow you to define the number of columns in a CSS Grid layout at different responsive breakpoints. Use them with specific identifier (e.g k-grid-cols-sm-1) to quickly set up flexible and adaptive grid structures that adjust the column count based on screen size.

To use the non-responsive variants see the Grid Template Columns article.

Gap

These responsive Gap utility classes let you control the gap between grid items, both globally and along the horizontal (x) or vertical (y) axes, at different responsive breakpoints. Use them with specific identifier (e.g k-gap-sm-1) to quickly adjust the space between elements for consistent and flexible layouts.

To use the non-responsive variants see the Gap article.

Usage

Here are a few examples that show how you can use the CSS Grid Responsive Layout System.

Equal Columns

Setting no classes to a CSS Grid item will default its column span to one.

Setting Column Span

Setting a column span class (e.g. k-col-span-4) to a CSS Grid item changes its column span.

Wrapping

CSS Grid items wrap when there is no horizontal room. In this example, the grid has 6 columns, and each item has a column span of 3.

Breakpoint-Specific Classes

Use breakpoint-specific classes (e.g. k-grid-cols-xs-3) to adjust the layout across viewports. The examples below show how the layout is stacked horizontally on a mobile device by adjusting the total column size of the CSS Grid (3 on mobile, 6 on everything else).

Use breakpoint-specific classes (e.g. k-col-span-xs-6) to adjust the layout across viewports. The examples below show how the layout is stacked horizontally on a mobile device by by adjusting the column span of each CSS Grid item (6 on mobile, 3 on everything else).

Gutter

Use the breakpoint-specific classes (e.g. k-gap-xs-1) to adjust the gap across viewports. In this example, the gap is 1 on mobile devices, and 6 on everything else.

Nesting

Every CSS Grid item can be a CSS Grid, which allows for easy nesting. Use k-grid-cols-{n} to specify the total number of columns in each CSS Grid.