Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/**
* @title Grid styles
* @description Adds a grid component to easily create custom layouts within
a page.
* @author Polymeric
* @license CC-BY-SA 3.0
**/
@supports (display: grid) {
.mw-parser-output .grid {
display: grid;
gap: var(--grid-gap, 16px);
/*
* grid-gap brings support for older browsers
* (see: https://caniuse.com/mdn-css_properties_gap_grid_context).
*/
grid-gap: var(--grid-gap, 16px);
grid-template-columns: repeat(12, minmax(5px, 1fr));
max-width: 2280px;
}
.mw-parser-output .grid .grid__col--span-0 {
display: none;
}
.mw-parser-output .grid .grid__col--span-1 {
grid-column-end: span 1;
}
.mw-parser-output .grid .grid__col--span-1 .grid {
grid-template-columns: repeat(1, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-2 {
grid-column-end: span 2;
}
.mw-parser-output .grid .grid__col--span-2 .grid {
grid-template-columns: repeat(2, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-3 {
grid-column-end: span 3;
}
.mw-parser-output .grid .grid__col--span-3 .grid {
grid-template-columns: repeat(3, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-4 {
grid-column-end: span 4;
}
.mw-parser-output .grid .grid__col--span-4 .grid {
grid-template-columns: repeat(4, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-5 {
grid-column-end: span 5;
}
.mw-parser-output .grid .grid__col--span-5 .grid {
grid-template-columns: repeat(5, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-6 {
grid-column-end: span 6;
}
.mw-parser-output .grid .grid__col--span-6 .grid {
grid-template-columns: repeat(6, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-7 {
grid-column-end: span 7;
}
.mw-parser-output .grid .grid__col--span-7 .grid {
grid-template-columns: repeat(7, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-8 {
grid-column-end: span 8;
}
.mw-parser-output .grid .grid__col--span-8 .grid {
grid-template-columns: repeat(8, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-9 {
grid-column-end: span 9;
}
.mw-parser-output .grid .grid__col--span-9 .grid {
grid-template-columns: repeat(9, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-10 {
grid-column-end: span 10;
}
.mw-parser-output .grid .grid__col--span-10 .grid {
grid-template-columns: repeat(10, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-11 {
grid-column-end: span 11;
}
.mw-parser-output .grid .grid__col--span-11 .grid {
grid-template-columns: repeat(11, minmax(5px, 1fr));
}
.mw-parser-output .grid .grid__col--span-12 {
grid-column-end: span 12;
}
.mw-parser-output .grid .grid__col--span-12 .grid {
grid-template-columns: repeat(12, minmax(5px, 1fr));
}
/* Utility classes. */
/**
* Disables column merging when grid's width is less than 600px (see more at
* the last seciton of the stylesheet).
**/
@supports (container-type: inline-size) {
.mw-parser-output .grid.grid--unresponsive {
container: unset;
}
}
/**
* Horizontally align the grid itself (requires it's maximum width to be
* less than 100% for it to work).
**/
.mw-parser-output .grid.grid--align-left {
margin-right: auto;
margin-left: 0;
}
.mw-parser-output .grid.grid--align-right {
margin-right: 0;
margin-left: auto;
}
.mw-parser-output .grid.grid--align-center {
margin: 0 auto;
}
/**
* Verically align grid's cells (requires the grid's minimum height to be
* higher than a single row's maximum height for it to work).
**/
.mw-parser-output .grid .grid__col--align-top {
align-self: start;
}
.mw-parser-output .grid .grid__col--align-middle {
align-self: center;
}
.mw-parser-output .grid .grid__col--align-bottom {
align-self: end;
}
/** Adds padding equal to the grid gap's size into the grid itself. **/
/*** All sides. ***/
.mw-parser-output .grid.grid__padding {
padding: var(--grid-gap, 16px);
}
/*** Top only. ***/
.mw-parser-output .grid.grid__padding--top {
padding-top: var(--grid-gap, 16px);
}
/*** Bottom only. ***/
.mw-parser-output .grid.grid__padding--bottom {
padding-bottom: var(--grid-gap, 16px);
}
/*** Left only. ***/
.mw-parser-output .grid.grid__padding--left {
padding-left: var(--grid-gap, 16px);
}
/*** Right only. ***/
.mw-parser-output .grid.grid__padding--top {
padding-top: var(--grid-gap, 16px);
}
/*** Block (vertical) sides only. ***/
.mw-parser-output .grid.grid__padding--block {
padding-bottom: var(--grid-gap, 16px);
padding-top: var(--grid-gap, 16px);
}
/*** Inline (horizontal) sides only. ***/
.mw-parser-output .grid.grid__padding--inline {
padding-left: var(--grid-gap, 16px);
padding-right: var(--grid-gap, 16px);
}
/* Increases grid cells' spacing as the screen gets wider. */
@media only screen and (min-width: 600px) and (max-width: 799px) {
.mw-parser-output .grid {
gap: calc(var(--grid-gap, 16px) * 1.5); /* 24px */
grid-gap: calc(var(--grid-gap, 16px) * 1.5); /* 24px */
}
}
@media only screen and (min-width: 800px) and (max-width: 904px) {
.mw-parser-output .grid {
gap: calc(var(--grid-gap, 16px) * 2); /* 32px */
grid-gap: calc(var(--grid-gap, 16px) * 2); /* 32px */
}
}
@media only screen and (min-width: 905px) and (max-width: 1239px) {
.mw-parser-output .grid {
gap: calc(var(--grid-gap, 16px) * 2.25); /* 36px */
grid-gap: calc(var(--grid-gap, 16px) * 2.25); /* 36px */
}
}
@media only screen and (min-width: 1240px) and (max-width: 1440px) {
.mw-parser-output .grid {
gap: calc(var(--grid-gap, 16px) * 2.5); /* 40px */
grid-gap: calc(var(--grid-gap, 16px) * 2.5); /* 40px */
}
}
@media only screen and (min-width: 1441px) {
.mw-parser-output .grid {
gap: calc(var(--grid-gap, 16px) * 3); /* 48px */
grid-gap: calc(var(--grid-gap, 16px) * 3); /* 48px */
}
}
/*
* Merge all columns into one when grid's width is less than 600px.
* Note: this only works on modern browsers as it uses container queries
* (see: https://caniuse.com/css-container-queries).
*/
@supports (container-type: inline-size) {
.mw-parser-output .grid {
container: grid / inline-size;
}
@container grid (max-width: 600px) {
.mw-parser-output .grid :is(.grid__col--span-1,
.grid__col--span-2,
.grid__col--span-3,
.grid__col--span-4,
.grid__col--span-5,
.grid__col--span-6,
.grid__col--span-7,
.grid__col--span-8,
.grid__col--span-9,
.grid__col--span-10,
.grid__col--span-11) {
grid-column-end: span 12;
}
.mw-parser-output .grid,
.mw-parser-output .grid :is(.grid__col--span-1,
.grid__col--span-2,
.grid__col--span-3,
.grid__col--span-4,
.grid__col--span-5,
.grid__col--span-6,
.grid__col--span-7,
.grid__col--span-8,
.grid__col--span-9,
.grid__col--span-10,
.grid__col--span-11) .grid {
grid-template-columns: repeat(1, minmax(5px, 1fr));
}
}
}
}