Width

Updated on Oct 28, 2026

By default, the Grid has no set width. It behaves like a block-level element and expands to 100% of its parent element width.

Getting Started

To control the width of the Grid, set CSS width properties on the Grid element or its ancestors. When you use hierarchy and the detail template is not scrollable, the detail template must be narrower than the combined width of all master columns. For more information about supported Grid scroll modes, see Scroll Modes of the Grid HtmlHelper for ASP.NET MVC.

If you enable scrolling and the sum of all column widths is greater than the Grid width, a horizontal scrollbar appears. If you disable scrolling and the columns do not fit, they overflow the Grid <div> element. This overflow can move the Grid right border through the data cells because the Grid renders a <table> inside a <div>. The table can grow beyond 100% width to fit its content, but the <div> cannot.

When scrolling is disabled, the horizontal movement caused by overflowing columns is not a Grid content scrollbar. It can instead make the table or an ancestor element extend beyond the Grid width, depending on the surrounding CSS. To render a scrollbar in the Grid content area, enable scrolling and configure the Grid and column widths as described in the scrolling overview.

To avoid table overflowing, apply any of the following approaches:

• Enable scrolling, which is disabled by default when you use the Kendo UI Grid MVC wrapper.
• Set a large enough width or min-width style on the Grid wrapper (<div class="k-widget k-grid">).
• (Use this approach only if the previous two are unacceptable.) Float the Grid wrapper and clear the float right after the Grid. Floated elements expand and shrink automatically to enclose their content when needed.

Applying a Minimum Width

Depending on the specific scenarios, you can use any of the following approaches to define a minimum width to the Grid.

• If scrolling is disabled, use the following CSS.

  CSS

  #GridID
  {
      min-width: 800px;
  }

• If scrolling is enabled and the Grid is not hierarchical (with no nested tables), use the following CSS. For more information about supported Grid scroll modes, see Scroll Modes of the Grid HtmlHelper for ASP.NET MVC.

  CSS

  /* Header table */
  #GridID .k-grid-header-wrap > table,
  /* Data table without virtual scrolling */
  #GridID .k-grid-content table,
  /* Data table with virtual scrolling */
  #GridID .k-virtual-scrollable-wrap table
  {
      min-width: 800px;
  }

• If scrolling is enabled and the Grid is hierarchical (with nested tables), use the following CSS. For more information about supported Grid scroll modes, see Scroll Modes of the Grid HtmlHelper for ASP.NET MVC.

  CSS

  /* Header table */
  #GridID .k-grid-header-wrap > table,
  /* Data table without virtual scrolling */
  #GridID .k-grid-content table,
  /* Data table with virtual scrolling */
  #GridID .k-virtual-scrollable-wrap table
  {
      min-width: 800px;
  }
  /* Nested data table without virtual scrolling */
  #GridID .k-grid-content table table,
  /* Nested data table with virtual scrolling */
  #GridID .k-virtual-scrollable-wrap table table
  {
      min-width: initial;
  }

See Also

• Scrolling by the Grid HtmlHelper for ASP.NET MVC (Demos)
• Scroll Modes of the Grid HtmlHelper for ASP.NET MVC
• Server-Side API