Foundation CSS XY Grid Offsets
Last Updated :
10 Mar, 2022
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 >
< link rel = "stylesheet"
href =
< script src =
</ script >
</ head >
< body style = "margin-inline: 5rem;" >
< center >
< h1 style = "color: green" >
GeeksforGeeks
</ 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:
Foundation CSS XY Grid Offsets
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 >
< link rel = "stylesheet"
href =
< script src =
</ script >
</ head >
< body style = "margin-inline: 5rem;" >
< center >
< h1 style = "text-align: center; color: green" >
GeeksforGeeks
</ 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:
Foundation CSS XY Grid Offsets
Reference: https://get.foundation/sites/docs/xy-grid.html#offsets
Share your thoughts in the comments
Please Login to comment...