Responsive Layout

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:

Usage

Here are a few examples that show how you can use the 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 to a CSS Grid item changes its column span.

Wrapping

CSS Grid items wrap when there is no horizontal room.

Breakpoint-Specific Classes

Use breakpoint-specific classes to adjust the layout across viewports. The examples below show how the layout is stacked horizontally on a Smartphone.

Here this is achieved by adjusting the total column size of the CSS Grid (3 on mobile, 6 on everything else).

Here this is achieved by adjusting the column span of each CSS Grid item (6 on mobile, 3 on everything else).

Gutter

Use the breakpoint-specific classes to adjust the gap across viewports.

Here 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.