using foundation 6.4 xy grid basics

Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format

here is a basic grid layout

add some style to show the cell border

<style>
.grid-x .cell {
	border:1px solid #CCC;
}
</style>

include foundation css

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.3/css/foundation.css">

i would suggest downloading a custom build of foundation which only includes the xy grid and normalization so it does not mess with your other styles. such as this one: foundation.min.css (6.4.2 custom)

basic grid

here is a basic grid with no margin and padding, or diy padding and margin

<div class="grid-x">
	<div class="small-3 cell">3 cells</div>
	<div class="small-3 cell">3 cells</div>
	<div class="small-6 cell">6 cells</div>
</div>

Demo

3 cells
3 cells
6 cells

basic grid with margin and padding

here is a grid that has some margin and padding on the cells

<div class="grid-x grid-padding-x grid-margin-x">
	<div class="small-3 cell">3 cells</div>
	<div class="small-3 cell">3 cells</div>
	<div class="small-6 cell">6 cells</div>
</div>

Demo

3 cells
3 cells
6 cells

Wrap it in a container

grid-container and add grid-container fluid to go full width

<div class="grid-container fluid">
<div class="grid-x grid-padding-x grid-margin-x">
	<div class="small-3 cell">3 cells</div>
	<div class="small-3 cell">3 cells</div>
	<div class="small-6 cell">6 cells</div>
</div>
</div>

Demo

3 cells
3 cells
6 cells

Foundation Docs

Foundation Docs: x y grid

Demo

Page Views

This page has been viewed 214 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹