Template:Columns: Difference between revisions
From Ymirheim Wiki
(Created page with "<templatestyles src="Template:Columns/styles.css"/>") |
No edit summary |
||
| (3 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
<templatestyles src="Template:Columns/styles.css"/> | <includeonly><templatestyles src="Template:Columns/styles.css"/></includeonly><noinclude> | ||
This template allows you to format the page in responsive column-style layout. | |||
Simply include the template anywhere in the page and use the block classes provided in the example below to structure your page layout. | |||
== Examples == | |||
{{Columns}} | |||
<pre><nowiki> | |||
<!-- Row of columns of equal size: --> | |||
<div class="columns-row"> | |||
<div class="columns-col"> | |||
Column 1 | |||
</div> | |||
<div class="columns-col"> | |||
Column 2, will be next to Column 1, but will wrap under it if there's not enough horizontal space (like on mobile). | |||
</div> | |||
<div class="columns-col"> | |||
Column 3, will also wrap under if there's not enough horizontal space (like on mobile). | |||
</div> | |||
</div> | |||
</nowiki></pre> | |||
<!-- Row of columns of equal size: --> | |||
<div class="columns-row"> | |||
<div class="columns-col"> | |||
Column 1 | |||
</div> | |||
<div class="columns-col"> | |||
Column 2, will be next to Column 1, but will wrap under it if there's not enough horizontal space (like on mobile). | |||
</div> | |||
<div class="columns-col"> | |||
Column 3, will also wrap under if there's not enough horizontal space (like on mobile). | |||
</div> | |||
</div> | |||
<pre><nowiki> | |||
<!-- One bigger clumn: --> | |||
<div class="columns-row"> | |||
<div class="columns-col columns-col-2"> | |||
Column 1 is twice as big as Column 2 | |||
</div> | |||
<div class="columns-col"> | |||
Column 2 | |||
</div> | |||
</div> | |||
</nowiki></pre> | |||
<!-- One bigger clumn: --> | |||
<div class="columns-row"> | |||
<div class="columns-col columns-col-2"> | |||
Column 1 is twice as big as Column 2 | |||
</div> | |||
<div class="columns-col"> | |||
Column 2 | |||
</div> | |||
</div> | |||
[[Category:Formatting Templates{{#translation:}}]] | |||
</noinclude> | |||
Latest revision as of 19:31, 8 July 2024
This template allows you to format the page in responsive column-style layout.
Simply include the template anywhere in the page and use the block classes provided in the example below to structure your page layout.
Examples
<!-- Row of columns of equal size: -->
<div class="columns-row">
<div class="columns-col">
Column 1
</div>
<div class="columns-col">
Column 2, will be next to Column 1, but will wrap under it if there's not enough horizontal space (like on mobile).
</div>
<div class="columns-col">
Column 3, will also wrap under if there's not enough horizontal space (like on mobile).
</div>
</div>
Column 1
Column 2, will be next to Column 1, but will wrap under it if there's not enough horizontal space (like on mobile).
Column 3, will also wrap under if there's not enough horizontal space (like on mobile).
<!-- One bigger clumn: -->
<div class="columns-row">
<div class="columns-col columns-col-2">
Column 1 is twice as big as Column 2
</div>
<div class="columns-col">
Column 2
</div>
</div>
Column 1 is twice as big as Column 2
Column 2