Template:GridHalfContainer: Difference between revisions
(Start of a template system making use of CSS grid) |
(Added transclusion of documentation) |
||
Line 1: | Line 1: | ||
<includeonly> | |||
<div style="display: grid; grid-template-areas: {{{defineAreas}}}; grid-template-columns: {{{defineColSize|auto}}}; grid-template-rows: {{{defineRowSize|auto}}}; {{{extraStyle}}}"> | <div style="display: grid; grid-template-areas: {{{defineAreas}}}; grid-template-columns: {{{defineColSize|auto}}}; grid-template-rows: {{{defineRowSize|auto}}}; {{{extraStyle}}}"> | ||
</includeonly> | |||
<noinclude>{{Documentation}}</noinclude> |
Revision as of 20:11, 7 February 2022
Template Documentation | ||||||||||||
This documentation is transcluded from Template:GridHalfContainer/doc. | ||||||||||||
IntroThis template is designed to make use of CSS grid. CSS grid is used to create the layout of a webpage. This template will allow you to use CSS grid to layout your wiki pages. CSS grid has two components: a container and an item. This template is the container which defines the areas where items can be placed. The Grid Item Template is used to define the items themselves. Template ParametersThis section lists all the available parameters for use with the template. It is split into two sections; "Required" and "Optional". RequiredThe parameters which you must use for this template to work are: defineAreasThis defines the areas inside the grid container. You must use single quotation marks. Double quotation marks will result in errors. Inside one set of single quotation marks is one row. Each space used creates a new column. The names defined here are the area names. Example One: {{GridContainer |defineAreas = 'Red Blue Blue Green' }} This will define the areas of the container in the following way: Now, when you use the Grid Item Template, you will define the content that would go in the red, blue, or green sections of the page. Example Two: {{GridContainer |defineAreas = 'Red Blue Blue Green' 'Yellow Yellow Brown Brown' }} This will define the areas of the container in the following way: Due to the use of a second set of single quotation marks, a new row has been added to the grid. Just as before, the grid item template is used to add content to the areas defined here. Be sure to check out this page for more examples. OptionalThe parameters which you can use to further customize the grid container are:
TemplateYou can copy/paste the following guide into your page, then add the values. Minimal GridContainerThis provides the minimum parameters needed to add a Grid Container to your realm page. {{GridContainer |defineAreas = }} Content inside the Grid Container goes here. </div> <!-- Ends Grid Container. --> Full GridContainerThis provides the complete list of parameters that can be used with GridContainer. You can pick and choose what one you want, so long as you provide the one required parameters. {{GridContainer |defineAreas = |defineColSize = |defineRowSize = |extraStyle = }} Content inside the Grid Container goes here. </div> <!-- Ends Grid Container. --> |