Mini Grid-based CSS Framework

Das ist ein Micro-CSS-Framework um auf display:grid Basis in <container> <rows> zu erzeugen. <col> columns werden über Flexbox erzeugt.

/* ----------------------------------------- *\
	Micro CSS Grid Framework
\* ----------------------------------------- */
 
:root {
	/* -- Container Fill : 100vw */
	/* -- Wide Container : 996px */
	/* -- Container Main : 840px */
	--container-wide-width     : 996px;
	--container-main-width     : 840px;
}
 
container{
	/* -- Local Vars */
	--container-wide-col-width : calc( var(--container-wide-width) / 2 - var(--container-main-width) / 2 );
 
	/* -- Regular CSS */
	display               : grid;
	gap                   : 0px;
	grid-template-columns : 
		[container-full-start] 1fr
		[container-wide-start] var( --container-wide-col-width )
		[container-main-start] var( --container-main-width )
		[container-main-end]   var( --container-wide-col-width )
		[container-wide-end]   1fr
		[container-full-end];
}
 
 
row,
row[span="main"]{
	display     : block;
	grid-column : container-main-start / container-main-end;
	border      : 1px solid green;
}
row[span="wide"]{
	display     : block;
	grid-column : container-wide-start / container-wide-end;
	border      : 1px solid red;
}
row[span="full"]{
	display     : block;
	grid-column : container-full-start / container-full-end;
	border      : 1px solid blue;
}

So funktioniert es dann in HTML:

<container>
	<row span="full">Full Width</row>
	<row span="wide">Wider Container</row>
	<row span="main">Main Container</row>
	<row span="main">Main Container</row>
	<row span="wide" style="--container-wide-width:1200px">Wider Container with Custom Width</row>
</container>