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

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

<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/css-grid/example","height":120}'></LiveDemo>

### Implementation Details

- The CSS 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-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&mdash;the `.k-d-grid` wraps the content and sets the layout to CSS Grid.\
  Adding a [Gap](/utils/flex-grid/gap/) utility class to the CSS Grid will add a gutter.
- Number of Columns&mdash;the `.k-grid-cols-{n}`, `k-grid-cols-{bp}-{n}` specifies how many grid columns the layout will have (maximum 12 columns).
- Column&mdash;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&mdash;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:

|              | xs `<576px`          | sm `≥576px`          | md `≥768px`          | lg `≥992px`          | xl `≥1200px`         | xxl `≥1400px`         |
| ------------ | -------------------- | -------------------- | -------------------- | -------------------- | -------------------- | --------------------- |
| Class prefix | `.k-col-span-xs-1` | `.k-col-span-sm-1` | `.k-col-span-md-1` | `.k-col-span-lg-1` | `.k-col-span-xl-1` | `.k-col-span-xxl-1` |

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

<CSSRulesList data='{"id":"grid-column-responsive"}'></CSSRulesList>

To use the non-responsive variants see the [Grid Column](/utils/flex-grid/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.

<CSSRulesList data='{"id":"grid-row-responsive"}'></CSSRulesList>

To use the non-responsive variants see the [Grid Row](/utils/flex-grid/grid-column/) 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.

<CSSRulesList data='{"id":"grid-template-columns-responsive"}'></CSSRulesList>

To use the non-responsive variants see the [Grid Template Columns](/utils/flex-grid/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.

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

To use the non-responsive variants see the [Gap](/utils/flex-grid/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.

<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/css-grid/equal-columns","height":120}'></LiveDemo>

#### Setting Column Span

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

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

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

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

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

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

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

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

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

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

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

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