Foundation CSS is an open-source and responsive front-end framework created by ZURB in September 2011 that makes it simple to create stunning responsive websites, apps, and emails that operate on any device. Many companies, like Facebook, eBay, Mozilla, Adobe, and even Disney, use it. It has numerous pre-built website component that makes our website look professional and improves the user experience of the website.
Why should we use Foundation CSS?
Foundation provides us with tons of features for free of charge and over that it’s highly optimized. We should always use Foundation because it helps us to simply illustrate and build websites. Foundation CSS provides us with a bunch of templates, which helps us to start out developing the website directly. It also gives us access to a strong grid system and a few useful UI components and funky JavaScript plugins, one among those UI components is Flex Grid.
Foundation CSS Flex Grid:
Flex Grid is nothing but a grid system that’s formed on the flex property that permits the responsive structure by creating the rows and columns. The row class is used to form a row and the column class is employed to form columns. It also comes with features that are available in flexboxes like automatic stacking, source ordering, vertical alignment, and horizontal alignment.
Column alignment is used to align the flex grid columns along the horizontal or vertical axis in the parent row. By default, all the flex grid columns are aligned to the left and it can be overridden with the .align-[dir] class to the flex parent class.
Horizontal alignment: No class needs to be added to the flex row to align the columns to the left because the column is by default aligned to the left.
Flex Grid Column Alignment classes:
- align-right: This class is added to the flex row to align the columns to the right. we don’t need to use the align-left class because the column is by default aligned to the left.
- align-center: This class is added to the flex row to align the columns in the middle with no space in between them and space at the other ends of them.
- align-spaced: This class is added to the flex row when we want an equal amount of space between all the columns.
- align-justify: This class is added to the flex row to align the left and right edges with space between the columns.
- align-bottom: By adding this class to the flex-container div, the columns are aligned to the bottom.
- align-middle: By adding this class to the flex-container div, the columns are aligned to the middle leaving an equal amount of space on the two ends.
- align-self-bottom, align-self-top, align-self-middle: By adding these classes to the column divs, the columns are aligned to the bottom.
Syntax:
<div class="row align-right">
<div class="column small-4">
...
</div>
<div class="column small-4">
...
</div>
...
</div>Example 1: The following code demonstrates the default alignment,
<!DOCTYPE html> <html>
<head>
<!--Foundation CSS CDN-->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Foundation CSS Flex Grid Column Alignment</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3 class="text-center">Not adding any Align Class</h3>
<div class="flex-container row margin-2" style="background-color:#b3ffb3">
<div class="column small-2" style="background-color: #66ff66">1</div>
<div class="column small-2" style="background-color: #2eb82e">2</div>
<div class="column small-2" style="background-color: #009933">3</div>
</div>
<pre class="margin-left-3">Columns are aligned to the left by default.</pre>
</body>
</html>
|
Output:
Example 2: The following code demonstrates the Flexgrid column align-right class.
<!DOCTYPE html> <html>
<head>
<!--Foundation CSS CDN-->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Foundation CSS Flex Grid Column Alignment</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3 class="text-center">align-right Class</h3>
<div class="flex-container row align-right margin-2" style="background-color: #b3ffb3">
<div class="column small-2" style="background-color: #66ff66">1</div>
<div class="column small-2" style="background-color: #2eb82e">2</div>
<div class="column small-2" style="background-color: #009933">3</div>
</div>
<pre class="margin-left-3">Columns are aligned to the right.</pre>
</body>
</html>
|
Output:
Example 3: The following code demonstrates the Flexgrid align-center class.
<!DOCTYPE html> <html>
<head>
<!--Foundation CSS CDN-->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Foundation CSS Flex Grid Column Alignment</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 class="text-center">align-center Class</h3>
<div class="flex-container row align-center margin-2" style="background-color: #b3ffb3">
<div class="column small-2" style="background-color:#66ff66">1</div>
<div class="column small-2" style="background-color:#2eb82e">2</div>
<div class="column small-2" style="background-color:#009933">3</div>
</div>
<pre class="margin-left-3">Columns are aligned to center.</pre>
</body>
</html>
|
Output:
Example 4: The following code demonstrates the flexgrid align-spaced class.
<!DOCTYPE html> <html>
<head>
<!--Foundation CSS CDN-->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Foundation CSS Flex Grid Column Alignment</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 class="text-center">align-spaced Class</h3>
<div class="flex-container row align-spaced margin-2" style="background-color: #b3ffb3">
<div class="column small-2" style="background-color:#66ff66">1</div>
<div class="column small-2" style="background-color:#2eb82e">2</div>
<div class="column small-2" style="background-color:#009933">3</div>
</div>
<pre class="margin-left-3">
Columns are aligned with equal amount of space between them.
</pre>
</body>
</html>
|
Output:
Example 5: The following code demonstrates the flexgrid align-justify class.
<!DOCTYPE html> <html>
<head>
<!--Foundation CSS CDN-->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Foundation CSS Flex Grid Column Alignment</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 class="text-center">align-justify Class</h3>
<div class="flex-container row align-justify margin-2" style="background-color: #b3ffb3">
<div class="column small-2" style="background-color:#66ff66">1</div>
<div class="column small-2" style="background-color:#2eb82e">2</div>
<div class="column small-2" style="background-color:#009933">3</div>
</div>
<pre class="margin-left-3">
Columns are aligned with equal amount of space between them and on
the other two ends of the left and right columns.
</pre>
</body>
</html>
|
Output:
Vertical Alignment:
- No Class: If we don’t add any vertical alignment class to a flex container the columns are aligned at the top.
Example 6: The following code demonstrates the vertical top alignment.
<!DOCTYPE html> <html>
<head>
<!--Foundation CSS CDN-->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Foundation CSS Flex Grid Column Alignment</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 class="text-center">No Class added</h3>
<div class="flex-container margin-2" style="background-color:#b3ffb3;height:10rem">
<div class="column small-4" style="background-color: #66ff66; height: 2rem">1
</div>
<div class="column small-4" style="background-color: #2eb82e; height: 5rem">2
</div>
<div class="column small-4" style="background-color: #009933; height: 8rem">3
</div>
</div>
<pre class="margin-left-3">
Columns are aligned to top by default.
</pre>
</body>
</html>
|
Output:
Example 7: The following code demonstrates the flexgrid align-bottom class.
<!DOCTYPE html> <html>
<head>
<!--Foundation CSS CDN-->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Foundation CSS Flexbox Mode</title>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 class="text-center">align-bottom Class</h3>
<div class="flex-container align-bottom margin-2" style="background-color:#b3ffb3; height:10rem">
<div class="column small-4" style="background-color:#66ff66; height:2rem">1
</div>
<div class="column small-4" style="background-color:#2eb82e; height:5rem">2
</div>
<div class="column small-4" style="background-color:#009933; height:8rem">3
</div>
</div>
<pre class="margin-left-3">
Columns are aligned to bottom.
</pre>
</body>
</html>
|
Output:
Example 8: The following code demonstrates the flexgrid align-middle class.
<!DOCTYPE html> <html>
<head>
<!--Foundation CSS CDN-->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<title>Foundation CSS Flex Grid Column Alignment</title>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3 class="text-center">align-middle Class</h3>
<div class="flex-container align-middle margin-2" style="background-color:#b3ffb3; height: 10rem">
<div class="column small-4" style="background-color:#66ff66; height:2rem">1
</div>
<div class="column small-4" style="background-color:#2eb82e; height:5rem">2
</div>
<div class="column small-4" style="background-color:#009933; height:8rem">3
</div>
</div>
<pre class="margin-left-3">
Columns are aligned to middle.
</pre>
</body>
</html>
|
Output:
Example 9: The following code demonstrates the align-self-bottom,align-self-top,align-self-middle classes.
<!DOCTYPE html> <html>
<head>
<!--Foundation CSS CDN-->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href=
crossorigin="anonymous">
<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href=
crossorigin="anonymous">
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3 class="text-center">align-self Class</h3>
<div class="flex-container margin-2" style="background-color:#b3ffb3; height:10rem">
<div class="column small-4 align-self-bottom" style="background-color:#66ff66; height:2rem">1
</div>
<div class="column small-4 align-self-top" style="background-color:#2eb82e; height:5rem">2
</div>
<div class="column small-4 align-self-middle" style="background-color:#009933; height:8rem">3
</div>
</div>
<pre class="margin-left-3">
Columns with the class align-self-bottom
is aligned to bottom.
</pre>
<pre class="margin-left-3">
Columns with the class align-self-top
is aligned to top.
</pre>
<pre class="margin-left-3">
Columns with the class align-self-middle
is aligned to middle.
</pre>
</body>
</html>
|
Output:
Reference link: https://get.foundation/sites/docs/flex-grid.html#column-alignment