Grid Elements
Column takeover space
Column HTML Example
Click to copy
<div class="grid grid-gap-xs grid-column-3">
<div class="grid-span-3">Element full width </div>
<div>Element 1/3 of full width</div>
<div>Element 1/3 of full width</div>
<div>Element 1/3 of full width</div>
<div class="grid-span-2">Element 2/3 </div>
<div>Element 1/3 of full width</div>
<div>Element 1/3 of full width</div>
<div>Element 1/3 of full width</div>
</div>
Available Classes
.grid-span-1.grid-span-2.grid-span-3.grid-span-4.grid-span-5.grid-span-6.grid-span-7.grid-span-8.grid-span-9.grid-span-10.grid-span-11.grid-span-12
Visual Example
Element full width
Element 1/3 of full width
Element 1/3 of full width
Element 1/3 of full width
Element 2/3
Element 1/3 of full width
Element 1/3 of full width
Element 1/3 of full width
Row takeover space
Row HTML Example
Click to copy
<div class="grid grid-gap-xs grid-column-3 grid-row-3">
<div class="grid-row-2">Element takes 2 rows</div>
<div>Element 1/3 of full width</div>
<div>Element 1/3 of full width</div>
<div>Element 1/3 of full width</div>
</div>
Available Classes
.grid-row-1.grid-row-2.grid-row-3.grid-row-4.grid-row-5.grid-row-6.grid-row-7.grid-row-8.grid-row-9.grid-row-10.grid-row-11.grid-row-12
Visual Example
Element full width
Element 1/3 of full width
Element 1/3 of full width
Element 1/3 of full width
Comments Area
No comments have been posted yet. Please feel free to comment first!
Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!