feat: introduce o3-grid-column-width CSS Custom Property

components/o3-foundation/README.md

@@ -181,6 +181,19 @@ You can precisely control the positioning of grid items using the `grid-column`
 </div>
 ```
 
+#### Using grid with nested children
+
+In some cases, an element may be nested deeply and not have access to the grid. o3-foundation provides CSS Custom Properties to help align elements to grid in these cases:
+
+```css
+.my-nested-class {
+	--o3-grid-columns-to-span-count: 6;
+	width: var(--o3-grid-columns-to-span-width)
+}
+```
+
+Use `--o3-grid-columns-to-span-count` to control how many columns you want your element to span. In this example, the width of `my-nested-class` will be equivalent to 6 columns. `--o3-grid-columns-to-span-count` must be defined for `.o3-grid-columns-to-span-width` to work.
+
 #### Advanced usage of grid
 
 For advanced usage `o3-foundation` provides CSS Custom Properties for grid that you can set on your class:

components/o3-foundation/grid.css

@@ -1,15 +1,18 @@
 :root {
+	--_o3-grid-gutters: calc(var(--o3-grid-columns) - 1);
 	--o3-grid-template: 0px
 		repeat(var(--o3-grid-columns), 1fr) 0px;
 	--o3-grid-area: 'bleed-left content-start . . content-end bleed-right';
 	--o3-grid-columns: 4;
 	--o3-grid-gap: 16px;
+	--_o3-grid-column-width: calc((100vw - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
 
 	@media screen and (min-width: 740px) {
 		--o3-grid-template: 8px
 			repeat(var(--o3-grid-columns), 1fr) 8px;
 		--o3-grid-area: 'bleed-left content-start . . . . . . content-end bleed-right';
 		--o3-grid-columns: 8;
+
 	}
 
 	@media screen and (min-width: 980px) {
@@ -21,12 +24,17 @@
 	}
 
 	@media screen and (min-width: 1268px) {
-		--column-width: calc((1220px - 11 * var(--o3-grid-gap)) / 12);
+		--o3-grid-columns: 12;
 		--o3-grid-template: 1fr
-			repeat(var(--o3-grid-columns), var(--column-width)) 1fr;
+			repeat(var(--o3-grid-columns), var(--o3-grid-column-width)) 1fr;
+		--o3-grid-column-width: calc((1220px - var(--_o3-grid-gutters) * var(--o3-grid-gap)) / var(--o3-grid-columns));
 	}
 }
 
+.o3-grid * {
+	--o3-grid-columns-to-span-width: calc(((var(--_o3-grid-column-width) + var(--o3-grid-gap)) * var(--o3-grid-columns-to-span-count)) - var(--o3-grid-gap));
+}
+
 .o3-grid {
 	display: grid;
 	grid-template-columns: var(--o3-grid-template);

components/o3-foundation/stories/grid-sb-styles.css

@@ -7,3 +7,9 @@
 	background-color: tomato;
 	cursor: pointer;
 }
+
+.nested-element {
+	--o3-grid-columns-to-span-count: 2;
+	width: var(--o3-grid-columns-to-span-width);
+	background-color: green;
+}

components/o3-foundation/stories/grid.tsx

@@ -74,6 +74,10 @@ export function O3Grid() {
 					{item.text}
 				</div>
 			))}
+			<div style={{gridColumn: `content-start / span 6`, backgroundColor: 'tomato'}}>
+				Span 6
+				<div className='nested-element'>Nested Element</div>
+			</div>
 		</div>
 	);
 }