Skip to content

Commit 1287ca9

Browse files
author
mrmrs
committed
Add grid to homepage
1 parent f004f1c commit 1287ca9

File tree

1 file changed

+114
-0
lines changed

1 file changed

+114
-0
lines changed

‎index.html

+114
Original file line numberDiff line numberDiff line change
@@ -491,6 +491,120 @@ <h4 class="mt4 fw6 f6">Narrow Measure</h4>
491491
</div>
492492
</div>
493493
</article>
494+
</div>
495+
</div>
496+
<article class="mt5">
497+
<div class="ph3 ph5-ns">
498+
<div class="mw9 center">
499+
<h3 class="f6 ttu fw6 mt0 bb pb2">Grids</h3>
500+
<p class="lh-copy measure">
501+
Floats, widths, and padding can be combined to build a
502+
wide variety of grids.
503+
</p>
504+
</div>
505+
</div>
506+
<section class="cf w-100 pv3 f6 ph3 ph4-ns">
507+
<div class="mw9 center ph3-ns">
508+
<div class="ph2-ns">
509+
<div class="fl w-100 pa2">
510+
<div class="outline bg-white tc pv4"><code>fl w-100 pa2</code></div>
511+
</div>
512+
<div class="fl w-80 pa2">
513+
<div class="outline bg-white tc pv4"><code>fl w-80 pa2</code></div>
514+
</div>
515+
<div class="fl w-20 pa2">
516+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
517+
</div>
518+
<div class="fl w-75 pa2">
519+
<div class="outline bg-white tc pv4"><code>fl w-75 pa2</code></div>
520+
</div>
521+
<div class="fl w-25 pa2">
522+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
523+
</div>
524+
<div class="fl w-60 pa2">
525+
<div class="outline bg-white tc pv4"><code>fl w-60 pa2</code></div>
526+
</div>
527+
<div class="fl w-40 pa2">
528+
<div class="outline bg-white tc pv4"><code>fl w-40 pa2</code></div>
529+
</div>
530+
<div class="fl w-50 pa2">
531+
<div class="outline bg-white tc pv4"><code>fl w-50 pa2</code></div>
532+
</div>
533+
<div class="fl w-50 pa2">
534+
<div class="outline bg-white tc pv4"><code>fl w-50 pa2</code></div>
535+
</div>
536+
<div class="fl w-third pa2">
537+
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
538+
</div>
539+
<div class="fl w-third pa2">
540+
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
541+
</div>
542+
<div class="fl w-third pa2">
543+
<div class="outline bg-white tc pv4"><code>fl w-third pa2</code></div>
544+
</div>
545+
<div class="fl w-25 pa2">
546+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
547+
</div>
548+
<div class="fl w-25 pa2">
549+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
550+
</div>
551+
<div class="fl w-25 pa2">
552+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
553+
</div>
554+
<div class="fl w-25 pa2">
555+
<div class="outline bg-white tc pv4"><code>fl w-25 pa2</code></div>
556+
</div>
557+
<div class="fl w-20 pa2">
558+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
559+
</div>
560+
<div class="fl w-20 pa2">
561+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
562+
</div>
563+
<div class="fl w-20 pa2">
564+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
565+
</div>
566+
<div class="fl w-20 pa2">
567+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
568+
</div>
569+
<div class="fl w-20 pa2">
570+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
571+
</div>
572+
<div class="fl w-10 pa2">
573+
<div class="outline bg-white tc pv4"><code>fl w-20 pa2</code></div>
574+
</div>
575+
<div class="fl w-10 pa2">
576+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
577+
</div>
578+
<div class="fl w-10 pa2">
579+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
580+
</div>
581+
<div class="fl w-10 pa2">
582+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
583+
</div>
584+
<div class="fl w-10 pa2">
585+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
586+
</div>
587+
<div class="fl w-10 pa2">
588+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
589+
</div>
590+
<div class="fl w-10 pa2">
591+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
592+
</div>
593+
<div class="fl w-10 pa2">
594+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
595+
</div>
596+
<div class="fl w-10 pa2">
597+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
598+
</div>
599+
<div class="fl w-10 pa2">
600+
<div class="outline bg-white tc pv4"><code>fl w-10 pa2</code></div>
601+
</div>
602+
</div>
603+
</div>
604+
</section>
605+
</article>
606+
<div class="ph3 ph5-ns pt5">
607+
<div class="mw9 center overflow-auto">
494608
<article class="mt5">
495609
<h3 class="f6 ttu fw6 mt0 mb3 bb pb2">Colors</h3>
496610
<div class="dt-ns dt--fixed-ns">

0 commit comments

Comments
 (0)