gecko-css flex-grid

by Petr Haluza

HTML

<link rel="stylesheet" href="https://haluzovic.cz/gecko-css/assets/css/reset.css">
<link rel="stylesheet" href="https://haluzovic.cz/gecko-css/assets/css/fonts.css">
<div class="fl row wrap ai:c jc:c" style="--gap: 1em">
	<div>Jedna</div>
	<div>Dvě</div>
	<div>Tři</div>
	<div>čtyři</div>
	<div>Pět</div>
	<div>šest</div>
</div>

<div class="fl col wrap ai:c jc:c" style="--gap: 1em">
	<div>Jedna</div>
	<div>Dvě</div>
	<div>Tři</div>
	<div>čtyři</div>
	<div>Pět</div>
	<div>šest</div>
</div>

<div class="gr" style="--gap: 1em; --cols: 4">
	<div>Jedna</div>
	<div>Dvě</div>
	<div>Tři</div>
	<div class="cspan" style="--colspan: 2">čtyři</div>
	<div>Pět</div>
	<div>šest</div>
</div>

CSS

/* Flex / Grid base for Gecko-css */
/* 2025-2-6 */

/**** Flex (fl) ****/
.fl {display:flex !important;
	&.row {flex-direction:row}
	&.col {flex-direction:column}
	&.wrap {flex-wrap: wrap}
/* horizontal behavior */
	&.ai\:c {align-items: center}
	&.ai\:b {align-items: baseline}
	&.ai\:fs {align-items: flex-start}
	&.ai\:fe {align-items: flex-end}
/* vetrical behavior */
	&.jc\:c {justify-content:center}
	&.jc\:fs {justify-content:flex-start}
	&.jc\:fe {justify-content:flex-end}
	&.jc\:l {justify-content:left}
	&.jc\:r {justify-content:right}
	&.jc\:sa {justify-content:space-around}
	&.jc\:sb {justify-content:space-between}
}


/* Grid (gr) */
.gr {display: grid !important; grid-template-columns: repeat(var(--cols),minmax(0,1fr));
    & .cspan {grid-column: span var(--colspan)/span var(--colspan); }
    & .cstart {grid-column-start: var(--colstart);}
    & .cend {grid-column-end: var(--colend);}
}

/* Flex & Grid common */
.fl,.gr {gap:var(--gap)}
/* does it make sense? grid-row-gap grid-column-gap; */


/* /Flex / GRID ***********/ 




/* up to 640px considering mobile device */
@media (min-width: 640px) { /* small (sm) */
}
@media (min-width: 992px) {/* medium (md) */
}
@media (min-width: 1280px) {/* large (lg) */
}
@media (min-width: 1600px) {/* extralarge (xl) */
}
@media (min-width: 1600px) {/* extralarge (xl) */
}


/* Jen demo */
.fl > *,
.gr > * { border: 1px dashed lightblue} 

/*****************************/
body:after {content:""; background: url(https://www.creativeagency.cz/gecko.png) no-repeat center center; background-size:1em; position: fixed; right:0; bottom:0; width:2em; height:2em}