The concept of different Span unit sizes is explained and exemplified in the Responsive Layout help article
. You should also take a look at the Viewport Breakpoints help article
to get clearer when each kind of Span is used.
I would try to summarize the concept. The whole width of the screen is divided into 12 columns. So you may fit next to each other columns, whose Span values sum up to 12. If you have one column with Span 6 and 2 columns with Span 3 each, the first column would take half of the viewport width, and the other two would take 1/4 each. All 3 columns will be next to each other.
SpanXs, SpanSm, SpanMd, SpanLg and SpanXl allow you to specify different width for some columns when viewed on a viewport width, falling into a specified size range.
If SpanXs is set to 12 and Span is set to 6 for a column, when the respective column is viewed on a viewport with extra small size, it will occupy the whole viewport width (all12 grid units available). And for the rest of the cases (when viewed on larger viewports), it will occupy half of the screen size (6 of the available 12 grid units). You could further specify the width of the column for different sizes using the rest of the Span subsets.
For a live demo, take a look at the PageLayout demo
and browse its WindowContent.aspx content in the code viewer.
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer
and share your thoughts.