User Tools

Site Tools

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
programmieren:css:minigridframework [2026/08/21 15:12] – created jgehrkeprogrammieren:css:minigridframework [2026/08/21 15:35] (current) – jgehrke
Line 7: Line 7:
  Micro CSS Grid Framework  Micro CSS Grid Framework
 \* ----------------------------------------- */ \* ----------------------------------------- */
- 
 :root { :root {
- /* -- Container Fill : 100vw */ + /* -- Row Full : 100vw */ 
- /* -- Wide Container : 996px */ + /* -- Row Wide : 996px */ 
- /* -- Container Main : 840px */ + /* -- Row Main : 840px */ 
- --container-wide-width     : 996px; + --row-wide-width     : 996px; 
- --container-main-width     : 840px;+ --row-main-width     : 840px; 
 + 
 + --col-gap            : 16px;
 } }
  
 +/* 
 +-- CONTAINER 
 +-- <container> ... </container>
 +-- <container style="--row-wide-width: 996px; --row-main-width: 840px"> ... </container>
 +*/
 container{ container{
  /* -- Local Vars */  /* -- Local Vars */
- --container-wide-col-width : calc( var(--container-wide-width) / 2 - var(--container-main-width) / 2 );+ --row-wide-col-width : calc( var(--row-wide-width) / 2 - var(--row-main-width) / 2 );
  
  /* -- Regular CSS */  /* -- Regular CSS */
Line 24: Line 30:
  gap                   : 0px;  gap                   : 0px;
  grid-template-columns :   grid-template-columns : 
- [container-full-start] 1fr + [row-full-start] 1fr 
- [container-wide-start] var( --container-wide-col-width ) + [row-wide-start] var( --row-wide-col-width ) 
- [container-main-start] var( --container-main-width ) + [row-main-start] var( --row-main-width ) 
- [container-main-end]   var( --container-wide-col-width ) + [row-main-end]   var( --row-wide-col-width ) 
- [container-wide-end]   1fr + [row-wide-end]   1fr 
- [container-full-end];+ [row-full-end];
 } }
  
- +/*  
-row, +-- ROW  
-row[span="main"]{ +-- <row> ... </row> 
- display     : block; +-- <row style="--col-gap: 16px;"> ... </row> 
- grid-column : container-main-start / container-main-end;+*/ 
 +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;  border      : 1px solid green;
 } }
-row[span="wide"]{ +container row[span="wide"]{ 
- display     : block; + grid-column : row-wide-start / row-wide-end;
- grid-column : container-wide-start / container-wide-end;+
  border      : 1px solid red;  border      : 1px solid red;
 } }
-row[span="full"]{ +container row[span="full"]{ 
- display     : block; + grid-column : row-full-start / row-full-end;
- grid-column : container-full-start / container-full-end;+
  border      : 1px solid blue;  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 ); }
 </code> </code>
  
 +So funktioniert es dann in HTML:
 +
 +<code 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>
 +</code>
programmieren/css/minigridframework.1787325129.txt.gz · Last modified: by jgehrke
CC Attribution-Share Alike 4.0 International Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International

Page Tools