Foundation CSS XY Grid Offsets
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device. In this article, we will discuss the XY Block Grid in Foundation CSS.
XY Grid offset class:
- [size]-offset-[n]: This class is used to set the offset of the grid. Here size is the among small, medium, large, and n is the number.
Syntax:
<div class="grid-x [size]-offset-[n]"> ..... </div>
Example 1: This example illustrates the use of grid offset using the large-offset-2 class.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Foundation CSS XY Grid Offsets</ title > <!-- Compressed CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" > <!-- Compressed JavaScript --> < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" > </ script > </ head > < body style = "margin-inline: 5rem;" > < center > < h1 style = "color: green" > w3wiki </ h1 > < h3 >Foundation CSS XY Grid Offsets</ h3 > </ center > < div class="callout warning grid-x grid-margin-x"> < div class="callout success cell small-4 large-offset-2"> it has offset-2 in large </ div > < div class = "callout success cell small-4" > small-4 cells </ div > </ div > </ body > </ html > |
Output:
Example 2: This example illustrates the use of grid offset using the medium-offset-4 class.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Foundation CSS XY Grid Offsets</ title > <!-- Compressed CSS --> < link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" /> <!-- Compressed JavaScript --> < script src = "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" > </ script > </ head > < body style = "margin-inline: 5rem;" > < center > < h1 style = "text-align: center; color: green" > w3wiki </ h1 > < h3 >Foundation CSS XY Grid Offsets</ h3 > </ center > < div class="callout warning grid-x grid-margin-x"> < div class="callout success small-4 medium-offset-4"> it has medium-offset-4 </ div > < div class = "cell callout success small-4" > small-4 cells </ div > </ div > </ body > </ html > |
Output:
Reference: https://get.foundation/sites/docs/xy-grid.html#offsets