Grid Test: Difference between revisions
(Created page with "<div class="grid-container"> <div class="grid-item" style="background:#ccc;">1</div> <div class="grid-item">2</div> <div class="grid-item">3</div> <div class="grid-i...") |
mNo edit summary |
||
| (One intermediate revision by the same user not shown) | |||
| Line 1: | Line 1: | ||
<div class="grid-container"> | <div class="grid-container-4" style="grid-gap: 1rem;"> | ||
<div class="grid-item" style="min-width:1rem; <!--border-top:solid 1px black; border-left:solid 1px black;--> grid-column-start: 1; grid-column: span 3;"></div> | |||
<div class="grid-item" style="min-width:150px; max-width:250px; <!--border-top:solid 1px red; border-left:solid 1px red;--> grid-row-start:1; grid-row: span 2; text-align:right;">{{sjogre cc}}</div> | |||
<div class="grid-item" style="min-width:150px; grid-column-start: 1; grid-column: span 3; text-align:left; <!--border-top:solid 1px black; border-left:solid 1px black;-->">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eleifend ac turpis nec malesuada. Phasellus sollicitudin consectetur felis sit amet consectetur. Morbi vitae porta nibh. Donec eu sem id urna mattis vulputate quis quis est. Mauris porta orci non dignissim volutpat. Mauris sodales dolor vitae turpis vehicula, in sodales lectus maximus. Praesent nisi risus, dignissim vitae imperdiet consequat, hendrerit vitae felis. Donec euismod varius facilisis. Donec at urna non erat tincidunt dapibus. Fusce et viverra nibh. Suspendisse potenti. Curabitur cursus felis sed semper congue.</div></div> | |||
<div class="grid-container-2" style="grid-gap: 1rem;"> | |||
<div class="grid-item" style="min-width:1rem; <!--border-top:solid 1px black; border-left:solid 1px black;--> grid-column-start: 1; grid-column: span 2; text-align:left;"> | |||
Donec molestie metus at arcu scelerisque volutpat. Duis at tellus in nunc laoreet dapibus. Nulla tincidunt nunc vitae est fringilla, eget sagittis nulla tincidunt. Aenean commodo metus molestie sem porttitor, sit amet ullamcorper elit accumsan. Quisque ullamcorper sapien ante, vel faucibus turpis varius id. Sed fermentum est eu tortor auctor maximus. Curabitur a faucibus enim. Nullam metus leo, dictum id augue et, finibus bibendum nulla. Donec varius ligula sit amet tortor pharetra maximus quis eget urna. Fusce euismod diam at suscipit posuere | |||
Mauris vehicula scelerisque felis quis eleifend. Nam mollis neque diam, eu pharetra augue fringilla eu. Proin sit amet elementum neque, vel accumsan ligula. Suspendisse scelerisque volutpat massa et pretium. Sed condimentum elit neque, a tincidunt quam scelerisque non. Cras mattis laoreet nisi sit amet tempus. Nullam fringilla eu turpis vitae euismod. Morbi bibendum, velit quis volutpat rhoncus, turpis tellus molestie quam, et viverra magna magna consequat dolor. Quisque suscipit pharetra enim eu maximus. In dignissim mi dui, iaculis tempor mauris tincidunt eu. Morbi commodo gravida justo, ut mollis eros tempus quis. Aenean ac diam semper, condimentum elit vitae, pretium urna. Nam at ullamcorper mi, eu eleifend purus. Aliquam a pulvinar sapien. Aliquam erat volutpat. | |||
</div> | |||
</div> | |||
<div class="grid-container-4"> | |||
<div class="grid-item" style="background:#ccc;">1</div> | <div class="grid-item" style="background:#ccc;">1</div> | ||
<div class="grid-item">2</div> | <div class="grid-item">2</div> | ||
| Line 12: | Line 23: | ||
<div class="grid-item">11</div> | <div class="grid-item">11</div> | ||
<div class="grid-item">12</div> | <div class="grid-item">12</div> | ||
<div class="grid-item" style="grid-column-start: 1; grid-column-end: | <div class="grid-item" style="grid-column-start: 1; grid-column-end: 3; background: #ccc;">13</div> | ||
<div class="grid-item">14</div> | <div class="grid-item">14</div> | ||
<div class="grid-item">15</div> | <div class="grid-item">15</div> | ||
Latest revision as of 08:26, 22 February 2020
Donec molestie metus at arcu scelerisque volutpat. Duis at tellus in nunc laoreet dapibus. Nulla tincidunt nunc vitae est fringilla, eget sagittis nulla tincidunt. Aenean commodo metus molestie sem porttitor, sit amet ullamcorper elit accumsan. Quisque ullamcorper sapien ante, vel faucibus turpis varius id. Sed fermentum est eu tortor auctor maximus. Curabitur a faucibus enim. Nullam metus leo, dictum id augue et, finibus bibendum nulla. Donec varius ligula sit amet tortor pharetra maximus quis eget urna. Fusce euismod diam at suscipit posuere
Mauris vehicula scelerisque felis quis eleifend. Nam mollis neque diam, eu pharetra augue fringilla eu. Proin sit amet elementum neque, vel accumsan ligula. Suspendisse scelerisque volutpat massa et pretium. Sed condimentum elit neque, a tincidunt quam scelerisque non. Cras mattis laoreet nisi sit amet tempus. Nullam fringilla eu turpis vitae euismod. Morbi bibendum, velit quis volutpat rhoncus, turpis tellus molestie quam, et viverra magna magna consequat dolor. Quisque suscipit pharetra enim eu maximus. In dignissim mi dui, iaculis tempor mauris tincidunt eu. Morbi commodo gravida justo, ut mollis eros tempus quis. Aenean ac diam semper, condimentum elit vitae, pretium urna. Nam at ullamcorper mi, eu eleifend purus. Aliquam a pulvinar sapien. Aliquam erat volutpat.