Flexbox Grid

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 Flexbox Grid 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:

@use '@progress/kendo-theme-utils/scss/all.scss' as * with (
    $kendo-container-max-widths: (
      sm: 500px,
      md: 700px,
      lg: 920px,
      xl: 1100px,
      xxl: 1300px,
    )
);

Flexbox Grid Classes

Flexbox Grid classes are utility classes designed to make responsive grid layouts easy and consistent. All classes are composed with a base name, and some are followed by a breakpoint identifier (xs, sm, md, lg, xl, or xxl), and lastly, 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.

Flexbox Column Size

These utility classes allow you to control the width and sizing behavior of flexbox columns, making it easy to create flexible or fixed-width layouts. Responsive variants like .k-col-md-size-33-3 let you apply these widths at different breakpoints for adaptive layouts.

Flexbox Column Gap

These utility classes let you control the gap between columns in a layout. You can use them to quickly adjust column spacing for consistent and flexible designs. Responsive variants like .k-col-gap-md-1 are also available, allowing you to set different gaps at different breakpoints.

Usage

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

Equal Width Columns

Setting а size-less class (e.g. k-col) for each Flexbox Grid column will make every column the same width.

Setting One Column Width

Setting а size class (e.g. k-col-size-50) 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 (e.g. k-col-sm-size-75) to adjust the layout across viewports. The example shows how the layout is stacked horizontally on a mobile device and vertical on everything else.

Row/Column Gutter

Use breakpoint-specific classes (e.g. k-col-gap-sm-6) to adjust the gap across viewports. The example shows how the gap is 1 on a mobile device, and 6 on everything else.