d1-web/src/css/grid.css

Lightweight responsive front-end framework

/* grid-flowing */

.row.shift{flex-wrap:wrap;}
.row.shift>*{flex:none;box-sizing:border-box;}
/**/
.row.shift>.col-1[class][class][class]{width:100%;}
.row.shift>.col-1-4[class], .row.shift.col-1-4>*{width:25%;}
.row.shift>.col-1-3[class], .row.shift>*{width:33.33%;}
.row.shift>.col-1-2[class], .row.shift.col-1-2>*{width:50%;}
.row.shift>.col-2-3[class]{width:66.66%;}
.row.shift>.col-3-4[class]{width:75%;}

/* 1. space-between: bad last row adjustment * /
.row.shift.mar{justify-content:space-between;}
/* gap 3% * /
.row.shift.mar>.col-1-4[class], .row.shift.mar.col-1-4>*{width:22.75%;}
.row.shift.mar>.col-1-3[class], .row.shift.mar>*{width:31.33%;}
.row.shift.mar>.col-1-2[class], .row.shift.mar.col-1-2>*{width:48.5%;}
.row.shift.mar>.col-2-3[class]{width:65.66%;}
.row.shift.mar>.col-3-4[class]{width:74.25%;}
	/* gap 2% * /
	.row.shift.mar>*{width:49%;}
	.row.shift.mar>.col-3{width:23.5%;}
	.row.shift.mar>.col-4{width:32%;}
	.row.shift.mar>.col-8{width:66%;}
	.row.shift.mar>.col-9{width:74.5%;}
/* 2. negative margin (gap 3%): better last row alignment */
/* but has aberration -0.1% width if gap 3% and may cause horizontal scroll */
.row.shift.mar{margin-right:-3%;}
.row.shift.mar[class][class]>*{margin-right:3%;}
.row.shift.mar>.col-1[class][class]{width:97%;}
.row.shift.mar>.col-1-4[class], .row.shift.mar.col-1-4>*{width:22%;}
.row.shift.mar>.col-1-3[class], .row.shift.mar>*{width:30.33%;}
.row.shift.mar>.col-1-2[class], .row.shift.mar.col-1-2>*{width:47%;}
.row.shift.mar>.col-2-3[class]{width:63.66%;}
.row.shift.mar>.col-3-4[class]{width:72%;}
/* --- */
.row.shift>.col-0[class]{width:auto;}
.row.let.mar, .row.shift.mar{margin-bottom:0;} /* ! will not collapse with following element */
.row.let.mar>*, .row.shift.mar>*{margin-bottom:var(--gap-n);}


@media (max-width: 899px){
	/* mobile */
	.row.shift.flip[class][class]>*{width:auto;}
	.row.shift.fit[class][class]>*{width:50%;}
	.row.shift.fit.mar[class]>*{width:47%;/*48.5%;*/}
}

@media (max-width: 479px){
	/* phone */
	.row.shift.fit{display:block;}
	.row.shift.fit[class][class]>*{width:auto;}
}