Grid

is a stylesheet that allows editors to easily create custom layouts within a page.
== ==
== ==
Grid layouts can be helpful to get a consistent layout across the desktop and mobile versions of a page without having to use, for example, tables. It comes with 12 columns where you can place its contents by filling its columns with cells. If the sum of two or more child elements (hereafter called cells) gives a total higher than 12 columns, the exceeding cells will move into a new row below. You can't use a single cell that spans 13 or more columns. If the grid's width is less than 600px, all columns will be merged into one and each cell will be stacked on top of each other (note: this only works on modern browsers as it uses container queries).
In the following examples, the grid will have a dark gray background, while the cells inside it will have a pink background. To see each HTML element, CSS class, and CSS variable available, see the API section.
Note: In these examples, we're using some extra CSS styles for demonstration and visualization purposes. Copying the raw code shown below will not result in the grid having properties such as background and text colors.
=== Grid and cell alignment ===
== API ==
=== HTML elements ===
HTML element	
 	Mandatory, for the layout grid element.
 	Mandatory, for each grid cell. It has to be children of the main grid element.
=== CSS classes ===
There are some classes to modify the behavior of the grid. Replace the text inside brackets ([]), including the brackers themselves, with any of the text in the "values" column.
CSS class 	Target 	 	Values
grid 	Grid 	Mandatory. Initites all grid styling rules. 	-
grid--unresponsive	Grid 	Optional. Removes responsive behavior that merges all columns into one if the grid becomes too narrow. 	-
grid__padding 	Grid 	Optional. Adds a padding equivalent to the grid gap's size on all four sides (top, bottom, left, and right). 	-
 	Grid 	Optional. Specifies the horizontal alignment of the grid. 	left, right, center
 	Grid 	Optional. Adds a padding equivalent to the grid gap's size on a specific side. In case of using either inline or block in the class, it will add padding to the left and right or to the top and bottom of the grid respectively.	top, bottom, left, right, inline, block
 	Grid cell	Mandatory. Specifies the number of columns that the cell spans. 	0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
 	Grid cell	Optional. Specifies the vertical alignment of a grid cell. 	top, middle, bottom
=== CSS variable ===
There is one variable available for this component. You can use these anywhere from the :root element all the way down to the .grid element itself.
CSS variable	
--grid-gap 	Adds spacing between each grid cell (and to the padding if it's added through any of the grid__padding classes). Defaults to 16px.
Example:
.grid {
 --grid-gap: 16px;
}