[Grid] Vector 2022 layout uses CSS grid

It gracefully degrades to a single column
layout on grade C browsers, IE11, and Safari 9.

Bug: T303484
Change-Id: Iaa3c1bee146dc39b1259a1ce712a29c6b22305d1

bundlesize.config.json

@@ -5,7 +5,7 @@
 	},
 	{
 		"resourceModule": "skins.vector.styles",
-		"maxSize": "10.7 kB"
+		"maxSize": "11.0 kB"
 	},
 	{
 		"resourceModule": "skins.vector.legacy.js",

includes/templates/skin.mustache

@@ -43,7 +43,7 @@
 
 {{>Header}}
 
-<div class="mw-workspace-container">
+<div class="mw-workspace-container vector-sidebar-container">
 	<div id="mw-navigation">
 		{{^is-title-above-tabs}}
 			{{>ArticleToolbar}}

resources/skins.vector.styles/layouts/gradeC.less

@@ -0,0 +1,17 @@
+//
+// No grid support behaviour
+//
+
+// If there is no display grid support we remove the table of contents
+// On IE11 this leaves a clean single column grid.
+// To be revisited when table of contents is collapsible in which situation we should be able to
+// force it as sticky.
+.vector-layout-grid .mw-table-of-contents-container {
+	display: none;
+}
+
+@supports ( display: grid ) {
+	.vector-layout-grid .mw-table-of-contents-container {
+		display: block;
+	}
+}

resources/skins.vector.styles/layouts/grid.less

@@ -0,0 +1,63 @@
+//
+// Grid layout
+//
+
+.vector-layout-grid {
+	@media ( max-width: @width-breakpoint-tablet ) {
+		.mw-header {
+			// Should match grid-template-rows definition below.
+			height: 66px;
+			// Should match row-gap below.
+			margin-bottom: 24px;
+		}
+	}
+
+	@media ( min-width: @width-breakpoint-tablet ) {
+		.mw-page-container-inner {
+			display: grid;
+			width: 100%;
+			grid-template: ~'66px auto 1fr / 232px 20px minmax(0, 1fr)';
+			grid-template-areas: 'header header header'
+				'sidebar gutter content'
+				'sidebar gutter footer';
+			row-gap: 24px;
+		}
+
+		.mw-body {
+			padding-left: 0;
+		}
+
+		.mw-header {
+			grid-area: header;
+		}
+
+		.vector-sidebar-container {
+			grid-area: sidebar;
+		}
+
+		.mw-content-container {
+			grid-area: content;
+		}
+
+		.mw-footer-container {
+			grid-area: footer;
+		}
+	}
+
+	@media ( min-width: @width-breakpoint-desktop ) {
+		.mw-page-container-inner {
+			grid-template-columns: ~'284px 20px 1fr';
+		}
+	}
+
+	/* Special handling for sidebar when table of contents is visible */
+	@media ( max-width: @width-breakpoint-desktop ) {
+		@{selector-workspace-container-sidebar-closed} {
+			display: none;
+
+			& + .mw-content-container {
+				grid-column: sidebar / content;
+			}
+		}
+	}
+}

resources/skins.vector.styles/layouts/screen.less

@@ -415,3 +415,5 @@ body:not( .skin-vector-toc-experiment-control ):not( .skin-vector-toc-experiment
 		}
 	}
 }
+
+@import 'grid.less';

resources/skins.vector.styles/skin.less

@@ -30,3 +30,5 @@
 @media print {
 	@import './layouts/print.less';
 }
+
+@import './layouts/gradeC.less';