<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* grid layout configuration for main and full-width elements */
/* $Id: 03_grids.css 92 2019-07-26 12:30:30Z fuchsm $ */

/* break-points */

/* our default breakpoints:

   for these breakpoints, we fill the available space and keep a fixed outside margin

   - 320: (implicit): that's the mobile-first design width we try to support
   - 480: (iPhone landscape / VGA portrait)\
   - 768: (XGA portrait)

  -  for these breakpoints, we limit the content width and scale the outside margin accordingly

   - 1024: (XGA landscape)
   - 1920: (widescreen?)

  for these breakpoints, we go back to fill-space, but layout handles that by re-arranging the elements
   - 1600: (?)

*/

/* default grid construction for mobile first layouting */

body &gt; main, body &gt; header, body &gt; nav, body &gt; footer, body &gt; main &gt; .banner {
    display: grid;
    grid-template-columns: var(--outside-margin) repeat(12, 1fr) var(--outside-margin);
    
    grid-column-gap: 0; /* mobile first: only one effective column, no gaps */ 
    column-gap: 0;
}

/* as soon as we leave the one-column mobile layout, introduce column gaps */

@media (min-width: 480px) {
    body &gt; main, body &gt; header, body &gt; nav, body &gt; footer, body &gt; main &gt; .banner {
        display: grid;
        grid-template-columns: calc( var(--outside-margin) - var(--default-grid-column-gap )) repeat(12, 1fr) calc( var(--outside-margin) - var(--default-grid-column-gap ));
        
        grid-column-gap: var(--default-grid-column-gap); 
        column-gap: var(--default-grid-column-gap); 
    }
}

/* finally, for wide screens, put extra space to the outside instead of scaling elements */
/* 
@media (min-width: 1024px) {
    body &gt; main, body &gt; header, body &gt; nav, body &gt; footer,  body &gt; main &gt; .banner  {
        display: grid;
        grid-template-columns:  1fr repeat(12, var(--max-column-width)) 1fr ;
        
        grid-column-gap: var(--default-grid-column-gap); 
        column-gap: var(--default-grid-column-gap); 
    }
} */

/* for super-wide screens, go back to the winner-takes-all construction (layout has to handle that) */

@media (min-width: 1600px) {

    body &gt; main, body &gt; header, body &gt; nav, body &gt; footer, body &gt; main &gt; .banner {
        display: grid;
        grid-template-columns: calc( var(--outside-margin) - var(--default-grid-column-gap )) repeat(12, 1fr) calc( var(--outside-margin) - var(--default-grid-column-gap ));
        
        grid-column-gap: var(--default-grid-column-gap); 
        column-gap: var(--default-grid-column-gap); 
    }

}

/* for super-super-wide screens, fill up with white space again */

@media (min-width: 1920px) {
    body &gt; main, body &gt; header, body &gt; nav, body &gt; footer,  body &gt; main &gt; .banner  {
        display: grid;
        grid-template-columns:  1fr repeat(12, var(--max-column-width)) 1fr ;
        
        grid-column-gap: var(--default-grid-column-gap); 
        column-gap: var(--default-grid-column-gap); 
    }
}
</pre></body></html>