Grids

XY Grid for Foundation

A fully reworked new grid system in v6.4 which has all the variety inbuilt in the form of multiple grid types which includes margin grid, padding grid, frame grid, block grid and vertical grid - https://foundation.zurb.com/sites/docs/xy-grid.html


2 Column Grid

<div class="grid-x grid-margin-x grid-padding-y">
<div class="cell large-auto"><img alt="Image" src="http://via.placeholder.com/585x200" /></div>
<div class="cell large-auto"><img alt="Image" src="http://via.placeholder.com/585x200" /></div>
</div>
Image
Image

3 Column Grid

<div class="grid-x grid-margin-x grid-padding-y">
<div class="cell large-auto"><img alt="Image" src="http://via.placeholder.com/585x200" /></div>
<div class="cell large-auto"><img alt="Image" src="http://via.placeholder.com/585x200" /></div>
<div class="cell large-auto"><img alt="Image" src="http://via.placeholder.com/585x200" /></div>
</div>
Image
Image
Image

4 Column Grid

<div class="grid-x grid-margin-x grid-padding-y">

<div class="cell large-auto medium-4 small-6"><img alt="Image" src="http://via.placeholder.com/292x200" /></div>
<div class="cell large-auto medium-4 small-6"><img alt="Image" src="http://via.placeholder.com/292x200" /></div>
<div class="cell large-auto medium-4 small-6"><img alt="Image" src="http://via.placeholder.com/292x200" /></div>
<div class="cell large-auto medium-4 small-6"><img alt="Image" src="http://via.placeholder.com/292x200" /></div>
</div>

 

Image
Image
Image
Image

Auto Sizing Grids

<div class="grid-x grid-margin-x">

<div class="cell small-4"><img alt="Image" src="http://via.placeholder.com/350x150" /></div>
<div class="cell auto"><img alt="Image" src="http://via.placeholder.com/350x150" /></div>
<div class="cell auto"><img alt="Image" src="http://via.placeholder.com/350x150" /></div>
</div>
Image
Image
Image

You Belong at UCR

All programs, services, and events offered here are open to everyone, consistent with federal and state law and the University of California’s nondiscrimination policies. Whether you’re seeking support, joining a community, or participating in campus life, every effort is made to ensure your experience is inclusive, respectful, and accessible, regardless of background or identity.

Visit the following links to learn more: UC Nondiscrimination Statement, UC Anti-Discrimination Policy.