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 {
	/* -- Row Full : 100vw */
	/* -- Row Wide : 996px */
	/* -- Row Main : 840px */
	--row-wide-width     : 996px;
	--row-main-width     : 840px;
 
	--col-gap            : 16px;
}
 
/* 
-- CONTAINER 
-- <container> ... </container>
-- <container style="--row-wide-width: 996px; --row-main-width: 840px"> ... </container>
*/
container{
	/* -- Local Vars */
	--row-wide-col-width : calc( var(--row-wide-width) / 2 - var(--row-main-width) / 2 );
 
	/* -- Regular CSS */
	display               : grid;
	gap                   : 0px;
	grid-template-columns : 
		[row-full-start] 1fr
		[row-wide-start] var( --row-wide-col-width )
		[row-main-start] var( --row-main-width )
		[row-main-end]   var( --row-wide-col-width )
		[row-wide-end]   1fr
		[row-full-end];
}
 
/* 
-- ROW 
-- <row> ... </row>
-- <row style="--col-gap: 16px;"> ... </row>
*/
container row{
	display               : grid;
	grid-template-columns : repeat( 12, 1fr );
  	gap                   : var( --col-gap );
}
container row[span="main"]{
	grid-column : row-main-start / row-main-end;
	border      : 1px solid green;
}
container row[span="wide"]{
	grid-column : row-wide-start / row-wide-end;
	border      : 1px solid red;
}
container row[span="full"]{
	grid-column : row-full-start / row-full-end;
	border      : 1px solid blue;
}
 
/* 
-- COLUMN 
-- <column> ... </column>
-- <column span="4/12"> ... </column>
-- <column style="--span: 4"> ... </column>
*/
container row > * {
	grid-column : span var( --span, 12 );
}
container row column{
	display     : block;
	grid-column : span var( --span, 12 );
}
container row column[span="1/12"]{  grid-column : span var( --span,  1 ); }
container row column[span="2/12"]{  grid-column : span var( --span,  2 ); }
container row column[span="3/12"]{  grid-column : span var( --span,  3 ); }
container row column[span="4/12"]{  grid-column : span var( --span,  4 ); }
container row column[span="5/12"]{  grid-column : span var( --span,  5 ); }
container row column[span="6/12"]{  grid-column : span var( --span,  6 ); }
container row column[span="7/12"]{  grid-column : span var( --span,  7 ); }
container row column[span="8/12"]{  grid-column : span var( --span,  8 ); }
container row column[span="9/12"]{  grid-column : span var( --span,  9 ); }
container row column[span="10/12"]{ grid-column : span var( --span, 10 ); }
container row column[span="11/12"]{ grid-column : span var( --span, 11 ); }
container row column[span="12/12"]{ grid-column : span var( --span, 12 ); }

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="wide" style="--container-wide-width:1200px">Wider Container with Custom 1.200px Width</row>
 
	<row span="main">
		<column span="4/12">4/12 Columns wide</column>
		<column span="6/12">6/12 Columns wide</column>
		<column span="2/12">2/12 Columns wide</column>
		<column style="--span:12;">12/12 Columns wide</column>
	</row> 
</container>