---
title: Flexbox Grid
position: 3
seo_title: Telerik and Kendo UI Responsive Layout Utilities
seo_description: Use the Telerik and Kendo UI Responsive Layout Utilities to
  build responsive layouts.
---

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

<LiveDemo data='{"links":[],"codePreviewSettings":{"customHtml":"","ignoreClassNames":"k-border k-text-center k-p-4 k-border-solid k-border-primary k-bg-primary-subtle"},"demo":"utils/responsive-layout/flexbox-grid/example","height":120}'></LiveDemo>

### Implementation Details

- The Flexbox Grid is compatible with six responsive [breakpoints](/utils/responsive-layout/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&mdash;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](/utils/flex-grid/gap/) utility class to the container will add a gutter between the rows.
- Rows&mdash;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&mdash;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](#flexbox-grid-classes).
- Gutters&mdash;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:

|                       | xs `<576px`  | sm `≥576px`     | md `≥768px`     | lg `≥992px`     | xl `≥1200px`    | xxl `≥1400px`    |
| --------------------- | ------------ | --------------- | --------------- | --------------- | --------------- | ---------------- |
| Container `max-width` | None (auto)  | 540px           | 720px           | 960px           | 1140px          | 1320px           |
| Class prefix          | `.k-col-size-xs-1` | `.k-col-size-sm-1` | `.k-col-size-md-1` | `.k-col-size-lg-1` | `.k-col-size-xl-1` | `.k-col-size-xxl-1` |

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

```scss
@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.

<CSSRulesList data='{"id":"col"}'></CSSRulesList>

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

<CSSRulesList data='{"id":"col-gap"}'></CSSRulesList>

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

<LiveDemo data='{"links":[],"codePreviewSettings":{"customHtml":"","ignoreClassNames":"k-border k-text-center k-p-4 k-border-solid k-border-primary k-bg-primary-subtle"},"demo":"utils/responsive-layout/flexbox-grid/equal-width-column","height":120}'></LiveDemo>

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

<LiveDemo data='{"links":[],"demo":"utils/responsive-layout/flexbox-grid/one-column-width","codePreviewSettings":{"ignoreClassNames":"k-border k-text-center k-p-4 k-border-solid k-border-primary k-bg-primary-subtle"},"height":120}'></LiveDemo>

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

<LiveDemo data='{"links":[],"demo":"utils/responsive-layout/flexbox-grid/breakpoint-specific","codePreviewSettings":{"ignoreClassNames":"k-border k-text-center k-p-4 k-border-solid k-border-primary k-bg-primary-subtle"},"height":200}'></LiveDemo>

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

<LiveDemo data='{"links":[],"demo":"utils/responsive-layout/flexbox-grid/row-column-gutter","codePreviewSettings":{"ignoreClassNames":"k-border k-text-center k-p-4 k-border-solid k-border-primary k-bg-primary-subtle"},"height":200}'></LiveDemo>