ထႅမ်းပလဵတ်ႉ:acol/styles.css

/* ouac (ol ul add class):
   -- .ouac-acol0
   -- .ouac-acoln: .ouac-acol2, .ouac-acol3, ...
*/

.ouac-acoln+ol, .ouac-acoln+ul,
.ouac-acol0+ol, .ouac-acol0+ul {
	background: #F8F8FF;
	column-gap: 32px; /* "gap" to avoid column intersection (list item marker) */
	margin-left: 0;
	padding-left: 24px;
}

/* https://stackoverflow.com/questions/47601564/equal-width-columns-in-css-grid */
.ouac-acol0+ol, .ouac-acol0+ul {
  display: inline-grid; /* "inline" to fit content */
  grid-auto-flow: column; /* default order (X elements=columns in 1 row) */
  grid-auto-columns: minmax(256px,1fr); /* same-width columns (min is 256px) */
}

.ouac-acoln+ol, .ouac-acoln+ul {display: inline-block;}
.ouac-acol2+ol, .ouac-acol2+ul {column-count: 2; min-width: 192px;} /* 2x96 */
.ouac-acol3+ol, .ouac-acol3+ul {column-count: 3; min-width: 288px;} /* 3x96 */
.ouac-acol4+ol, .ouac-acol4+ul {column-count: 4; min-width: 384px;} /* 4x96 */
.ouac-acol5+ol, .ouac-acol5+ul {column-count: 5; min-width: 480px;} /* 5x96 */

.ouac-acoln+ol > li > ol,
.ouac-acoln+ol > li > ul,
.ouac-acoln+ul > li > ul,
.ouac-acoln+ul > li > ol {
  break-inside: avoid;
}

/* https://www.w3schools.com/cssref/css3_pr_mediaquery.asp */
/* https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile */
@media only screen and (max-width: 640px) {
  .ouac-acol0+ol, .ouac-acol0+ul {background: initial; grid-auto-flow: row;}
  .ouac-acoln+ol, .ouac-acoln+ul {background: initial; column-count: 1;}
}


/* https://stackoverflow.com/questions/952861/targeting-only-firefox-with-css */
/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */

/* wiki-unwritable
@-moz-document url-prefix() {
	.ouac-acoln+ol > li,
	.ouac-acoln+ul > li {
		display: table;
		position: relative;
	}
	
	.ouac-acoln+ul > li::before,
	.ouac-acoln+ol > li::before {
		content: "";
		display: list-item;
		position: absolute;
		top: 0;
		left: 0;
	}
}
*/