🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
Span.CSSGrid
This page was created by Stephanie on 2023-05-18. Last edited by Wikiadmin on 2026-07-29.

You can use this page to understand the legacy Span.CSSGrid setting and move ViewModel layout decisions to CSSGrid.

Status

Span.CSSGrid is deprecated. CSS Grid is now the default rendering approach, and Bootstrap is no longer available.

Do not add Span.CSSGrid to new ViewModels. For existing applications, review the CSS Grid setting at the ViewModel level instead.

What to use instead

Use the CSSGrid tagged value on the ViewModel when you need to state the rendering choice explicitly.

Requirement Setting Result
Use the standard layout behavior No explicit ViewModel override when CSS Grid is enabled by default The application renders with CSS Grid.
Explicitly use CSS Grid for one ViewModel CSSGrid=true on the ViewModel The ViewModel renders HTML using CSS Grid rather than Bootstrap.
Override a server-wide CSS Grid default CSSGrid=false on the ViewModel The explicit ViewModel value overrides the default set in TurnkeySettings.

For example, if the TurnkeySettings file contains:

<UseCSSGridByDefault>True</UseCSSGridByDefault>

then ViewModels use CSS Grid unless a ViewModel explicitly has CSSGrid=false.

Why Span.CSSGrid is no longer needed

CSS Grid places content using the CSS Grid values read from the ViewModel. This makes placement independent of Bootstrap and of the surrounding HTML context. A generic component can therefore be placed without the component needing to know where its HTML will appear.

The former Bootstrap layout system is deprecated. Do not use Bootstrap-specific layout guidance or settings, including Span.FixColSize, for new work.

Update an existing model

  1. Find ViewModels that use the legacy Span.CSSGrid setting.
  2. Remove the legacy setting from new or updated layout work.
  3. Decide whether the ViewModel needs an explicit override:
    • Use CSSGrid=true when the ViewModel must explicitly render with CSS Grid.
    • Use CSSGrid=false only when you need to override a TurnkeySettings default.
  4. Check the application's TurnkeySettings for UseCSSGridByDefault to determine the default behavior.
  5. Test the rendered ViewModel and adjust its CSS Grid placement values as required.

Styling after the Bootstrap transition

Bootstrap classes and Bootstrap-based layout behavior are not available. Keep layout decisions in CSS Grid, and use application CSS for visual styling. For guidance on adding style references and CSS classes from MDriven Designer, see Styling and CSS for Bootstrap, Angular and MVC.

See also