Responsive Layout

Flexbox Grid Layout

The Responsive Flexbox Grid Layout System uses a series of containers, rows, and columns to lay out and align content. It is built with a flexbox and is fully responsive.

Implementation Details

• The Flexbox 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-sm-size-25 applies to sm, md, lg, xl, and xxl breakpoints.
  You can manage the column sizing and behavior for each breakpoint individually.
• Containers—they are used to contain and center the content and set the layout max-width for each breakpoint. Use .k-container for a responsive pixel width or .k-container-fluid for width: 100% across all viewports and devices. Adding a Gap utility class to the container will add a gutter between the rows.
• Rows—the .k-row wraps the columns. Adding a k-col-gap-{n}, k-col-gap-{bp}-{n} Gap class to the row will add a gutter between the columns.
• Columns—the .k-col, .k-col-{bp}, .k-col-size-{p}, .k-col-{bp}-size-{p} wrap the content and specify how wide a column will be. The width of the columns is based on the percentage of the available space. So if you need a column that occupies 1/2 of the available space, use the .k-col-size-50 (or .k-col-{bp}-size-50). If you need a column that occupies 1/3 of the available space, use the fraction class.k-col-size-33-3 (or .k-col-{bp}-size-33-3). You can choose from a list of Fraction Classes.
• Gutters—the .k-gap-{n}, .k-gap-{bp}-{n} add a gutter to the layout.

Breakpoints

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

Similarly to the breakpoints, you can also customize the container widths by using Sass:

$kendo-container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px,
);

Fraction Classes

Here is a list of all fraction classes for the Responsive Flexbox Grid Layout System.

Usage

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

Equal Width Columns

Setting а size-less class for each Flexbox Grid column will make every column the same width.

Setting One Column Width

Setting а size class for a Flexbox Grid column will set its width to the specified size and resize every other column to the available space.

Breakpoint-Specific Classes

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

The example below shows how the layout is stacked horizontally on a Smartphone.

Row/Column Gutter

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

Here the gap is 1 on a mobile device, and 6 on everything else.