Sizing the component

Bryntum components are intended to be sized using CSS, but it is also possible to give them a fixed size programmatically.

When rendered into an element without any sizing rules applied, a warning is displayed on the console:

The Grid is sized by its predefined minHeight, likely this is not intended.
Please check your CSS and review how you size the widget, or assign a fixed height in the config. 
For more information, see the "Basics/Sizing the component" guide in docs.

To get rid of this warning and give the component the size you want, either apply sizing rules using CSS or configure a fixed size.

Using CSS (recommended)

Most included demos renders the component into a container element that uses a flexbox layout with column direction. The flex value then drives the height of the component. But this is not a requirement, the components can be sized using any CSS (parent element with block layout, flexbox layout or grid layout) as long as the component element itself still uses flexbox layout (display : flex).

Using a fixed width and height:

.b-grid {
    width  : 800px;
    height : 600px;
}

Filling a parent element that uses block layout:

.b-grid {
    width  : 100%;
    height : 100%;
}

Filling a parent element that uses flex column:

.b-grid {
    flex  : 1; /* Drives height */
    width : 100%; /* Width might not be needed, depending on rules applied to the parent */
}

Filling a parent element that uses flex row:

.b-grid {
    height : 100%; /* Height might not be needed, depending on rules applied to the parent */
    flex   : 1; /* Drives width */
}

Programmatically

The components have width and height configs that accepts numerical (in px) and string based sizes. Set them to use a fixed size:

const grid = new Grid({
    width  : 800, // = 800px
    height : '30em'
})

API docs for other size related configs:

• minWidth
• minHeight
• maxWidth
• maxHeight
• flex

Auto height

You can let the Bryntum Grid decides its own height by using the autoHeight property.

const grid = new Grid({
    // other configs
    autoHeight : true,
})