Foundation CSS Float Grid
Last Updated :
16 Oct, 2022
Foundation CSS is an open-source and 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 and can be accessible to any device.
In this article, we will know about Float Grid in Foundation CSS.
Importing: we need to some changes to the CDN link of the foundation. In the CDN link replace foundation-float.css in place of foundation.css.
Basics: Foundation creates columns and rows by applying CSS classes to HTML elements. The columns are created using the .column class and rows can be defined using the .row class. To specify the widths of each column, use .small-#, .medium-#, and .large-# classes.
Advanced:
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.
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.
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.
Offsets: We can add some space or move the column up to 11 blocks using this option.
Example 1: This example illustrates the use of Nesting Grids.
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:rgb(83, 100, 0) 2px solid;
background-color: rgb(217, 211, 30);
}
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 small-8">8
<div class="row">
<div class="columns small-8">8 Nested
<div class="row">
<div class="columns small-8">8 Nested Again</div>
<div class="columns small-4">GFG</div>
</div>
</div>
<div class="columns small-4">GFG</div>
</div>
</div>
<div class="columns small-4">GFG</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Example 2: This example illustrates the use of offset Grids.
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:rgb(183, 145, 22) 5px solid;
background-color:rgb(27, 39, 150);
}
.columns {
background-color:rgb(234, 36, 14);
}
</style>
</head>
<body>
<h2 style="color:green">GeeksforGeeks</h2>
<strong>Foundation CSS Float Grid Advanced</strong>
<div class="row">
<div class="columns large-1">GFG</div>
<div class="columns large-11">11</div>
</div>
<div class="row">
<div class="columns large-1">GFG</div>
<div class="columns large-10 large-offset-1">10, offset 1</div>
</div>
<div class="row">
<div class="columns large-1">GFG</div>
<div class="columns large-9 large-offset-2">9, offset 2</div>
</div>
<div class="row">
<div class="columns large-1">GFG</div>
<div class="columns large-8 large-offset-3">8, offset 3</div>
</div>
<script>
$(document).foundation();
</script>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/grid.html
Share your thoughts in the comments
Please Login to comment...