Template:GridHalfContainer

Template Documentation

This documentation is transcluded from Template:GridHalfContainer/doc. ▪ Examples ▪ Sandbox ▪

Intro This 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 Parameters This section lists all the available parameters for use with the template. It is split into two sections; "Required" and "Optional". Required The parameters which you must use for this template to work are: defineAreas This 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. Optional The parameters which you can use to further customize the grid container are: defineColSize - This allows you to define the size of each individual column (i.e. the width). By default, this will be set to "auto" which means the browser will automatically size the columns based on the size of the content in that grid area. defineRowSize - This allows you to define the size of each individual row (i.e. the height). By default, this will be set to "auto" which means the browser will automatically size the rows based on the size of the content in that grid area. extraStyle - This allows you to define any extra CSS. You can determine the background color, border style and size and color, and any other CSS which can be used inline. Template You can copy/paste the following guide into your page, then add the values. Minimal GridContainer This 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 GridContainer This 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. -->