Posted in
9
5:00 am, July 9, 2021
foundation grid for 6.6x - also known as the foundation xy grid
some foundation grid demos for 6.6x foundation
you can get foundation here: https://get.foundation/ or here https://cdnjs.com/libraries/foundation
more docs on this here: https://get.foundation/sites/docs/xy-grid.html
as this site uses bootstrap i wont include the foundation here as it looks a bit broken
HTML
<h3>2 columns with margin and padding</h3>
<div class="grid-x grid-padding-x grid-margin-x">
<div class="cell large-6">6 cells</div>
<div class="cell large-6">6 cells</div>
</div>
<h3>3 columns with margin and padding</h3>
<div class="grid-x grid-padding-x grid-margin-x">
<div class="cell large-4">4 cells</div>
<div class="cell large-4">4 cells</div>
<div class="cell large-4">4 cells</div>
</div>
<h3>Basic Grid Layout</h3>
<div class="grid-x">
<div class="cell">full width cell</div>
<div class="cell">full width cell</div>
</div>
<div class="grid-x">
<div class="cell small-6">6 cells</div>
<div class="cell small-6">6 cells</div>
</div>
<div class="grid-x">
<div class="cell medium-6 large-4">12/6/4 cells</div>
<div class="cell medium-6 large-8">12/6/8 cells</div>
</div>
<h3>2 columns with margin and padding and grid container</h3>
<p>adds a center aligned grid container</p>
<div class="grid-container">
<div class="grid-x grid-padding-x grid-margin-x">
<div class="cell large-6">6 cells</div>
<div class="cell large-6">6 cells</div>
</div>
</div>2 columns with margin and padding
6 cells
6 cells
3 columns with margin and padding
4 cells
4 cells
4 cells
Basic Grid Layout
full width cell
full width cell
6 cells
6 cells
12/6/4 cells
12/6/8 cells
2 columns with margin and padding and grid container
adds a center aligned grid container
6 cells
6 cells
View Statistics
This Week
0
This Month
0
This Year
0
Add Comment
Other Items in foundation
Related Search Terms
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress
