Foundation CSS Float Grid Advanced
Last Updated :
30 Jun, 2022
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
Foundation CSS Float Grid Advanced classes:
Combined Column or Row: When you need just one column in a row. You can save yourself from a little hard work by combining the column and row classes together and that will generate only one column in one row.
- row: This class is used to contain all the content/columns that will be in a row.
- column: This class is used to signify the individual columns inside a row.
Syntax:
<div class="column row">
...
</div>
Fluid Row: By default, the rows are 1200px wide. So using these rows on a wider screen is not the perfect option to choose. So we use the fluid row option and for that, we just need to add the expanded class with the row class.
- expanded: This class is added with the row class and it will enable the row to fill into the entire width.
Syntax:
<div class="expanded row">
...
</div>
Nesting: Float Grid provides us with an indefinite amount of nesting. This means that we can insert a row under a column, then again insert columns under that inserted row, and so on. This does not have any use of a specific class we just have to nest with basic float grid classes.
Syntax:
<div class="row">
<div class="columns">
<div class="row">
<div class="columns">
<div class="row">
<div class="columns">...</div>
<div class="columns">...</div>
</div>
</div>
</div>
</div>
</div>
Offsets: We can add some space or move the column up to 11 blocks using this option.
- large-offset-[1-11]: This class is used to add offset when the screen size is large.
- medium-offset-[1-11]: This class is used to add offset when the screen size is medium.
- small-offset-[1-11]: This class is used to add offset when the screen size is small.
Syntax:
<div class="row">
<div class="columns large-offset-1">10, offset 1</div>
</div>
Example 1: The code below demonstrates the application of the combined column and row, fluid row, and nested rows. The combined column and row are expanded for wider screens.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
body {
margin-left:20px;
margin-right:20px;
}
.row {
border:darkgreen 5px solid;
background-color: green;
}
p {
color:azure;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<strong>Foundation CSS Float Grid Advanced</strong>
<div class="expanded column row one">
<p>
GeeksforGeeks
</p>
</div>
<div class="row" style="margin-top:2rem;">
<div class="columns small-8">
<div class="row">
<div class="columns small-8">
<p>
Nested
</p>
<div class="row">
<div class="columns small-8">
<p>
Nested Again
</p>
</div>
<div class="columns small-4">
<p>
Column-3
</p>
</div>
</div>
</div>
<div class="columns small-4">
<p>
Column-2
</p>
</div>
</div>
</div>
<div class="columns small-4">
<p>
Column-1
</p>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: The code below demonstrates a different offset with 1, 2, or 3 column values.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
<style>
body {
margin-left:20px;
margin-right:20px;
}
.row {
border:darkgreen 5px solid;
background-color:greenyellow;
}
.columns {
background-color:green;
}
p {
color: azure;
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<strong>Foundation CSS Float Grid Advanced</strong>
<div class="row">
<div class="columns large-1">
<p>
GFG
</p>
</div>
<div class="columns large-11">
<p>
When no Offset is added
</p>
</div>
</div>
<div class="row">
<div class="columns large-1">
<p>
GFG
</p>
</div>
<div class="columns large-10 large-offset-1">
<p>
Offset with only 1 Column Value
</p>
</div>
</div>
<div class="row">
<div class="columns large-1">
<p>
GFG
</p>
</div>
<div class="columns large-9 large-offset-2">
<p>
Offset with only 2 Column Value
</p>
</div>
</div>
<div class="row">
<div class="columns large-1">
<p>
GFG
</p>
</div>
<div class="columns large-8 large-offset-3">
<p>
Offset with only 3 Column Value
</p>
</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/grid.html#advanced
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...