[Feature Request]: Responsive layout and grid spans support for new grid system

[srburtsev]

Requirements before reporting

• [X] No duplicated issue reported
• [X] I have checked the latest version if the feature exist there

Type of feature request

Functionality

What is your feature request?

Extend the new tds-grid set of CSS classes with classes that support merging of grid columns and classes for merging the columns conditionally by the current screen size.

It would also be nice to add a class to remove the horizontal margins or gaps from .tds-grid-fluid.

Background

I see that the tds-container grid system is deprecated and the new tds-grid has almost no functionality. Because of it, I have to use a lot of custom css classes when creating a layout in the new grid system.

Idea

I want to have the next additional css classes for each grid colspan and screen size:

.tds-grid-col-5: { grid-column: span 5; }
 
.tds-grid-col-md-5: { grid-column: span 12; }
@media screen and (min-width: 796px) {
     .tds-grid-col-md-5: { grid-column: span 5; }
}

Goals and objectives

1. Be able to control the horizontal block sizes in the new Scania grid system.
2. Create responsive applications that change page layout according to the available screen space.

Timeline

No response

Resources

https://getbootstrap.com/docs/5.3/layout/grid/#responsive-classes

Contact information

[email protected]