forked from barryclark/jekyll-now
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgrid.html
34 lines (26 loc) · 2.96 KB
/
grid.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
---
title: Grid Test
---
<p>Below is a grid row with two columns. Its background color is blueviolet, which should only be seen between columns where there is margin unless there is a problem with the columns.</p>
<div class="grid" style="background-color: blueviolet; margin-bottom: 30px;">
<div class="one-half first" style="background-color: yellow; min-height: 100px;">This column is one half the size of the row. Its background color is yellow.</div>
<div class="one-half" style="background-color: yellowgreen; min-height: 100px;">This column is one half the size of the row. Its background color is yellowgreen</div>
</div>
<p>Below is a grid row with three columns. Its background color is blueviolet, which should only be seen between columns where there is margin unless there is a problem with the columns.</p>
<div class="grid" style="background-color: blueviolet; margin-bottom: 30px;">
<div class="one-third first" style="background-color: yellow; min-height: 100px;">This column is one third the size of the row. Its background color is yellow.</div>
<div class="one-third" style="background-color: yellowgreen; min-height: 100px;">This column is one third the size of the row. Its background color is yellowgreen.</div>
<div class="one-third" style="background-color: greenyellow; min-height: 100px;">This column is one third the size of the row. Its background color is greenyellow.</div>
</div>
<p>Below is a grid row with two columns (1/3 and 2/3). Its background color is blueviolet, which should only be seen between columns where there is margin unless there is a problem with the columns.</p>
<div class="grid" style="background-color: blueviolet; margin-bottom: 30px;">
<div class="one-third first" style="background-color: yellow; min-height: 100px;">This column is one third the size of the row. Its background color is yellow.</div>
<div class="two-thirds" style="background-color: yellowgreen; min-height: 100px;">This column is two thirds the size of the row. Its background color is yellowgreen</div>
</div>
<p>Below is a grid row with four columns. Its background color is blueviolet, which should only be seen between columns where there is margin unless there is a problem with the columns.</p>
<div class="grid" style="background-color: blueviolet; margin-bottom: 30px;">
<div class="one-fourth first" style="background-color: yellow; min-height: 100px;">This column is one fourth the size fo the row. Its background color is yellow.</div>
<div class="one-fourth" style="background-color: yellowgreen; min-height: 100px;">This column is one fourth the size fo the row. Its background color is yellowgreen.</div>
<div class="one-fourth first-at-half" style="background-color: greenyellow; min-height: 100px;">This column is one fourth the size fo the row. Its background color is greenyellow.</div>
<div class="one-fourth" style="background-color: green; min-height: 100px;">This column is one fourth the size fo the row. Its background color is green.</div>
</div>