Foundation CSS Flex Grid Block
Last Updated :
16 Mar, 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 discuss the Flex Grid Block Classes in Foundation CSS.
In Foundation CSS, Flex Grid Block is used to specify the column width at the row level and instead of at individual level.
Foundation CSS Flex Grid Block classes:
- [size]-up-[n]: This class is used to specify the number(n) of columns visible per grid according to the screen size. Here size can be small, medium or large and n can be 1,2,3,4,5,6,7,8.
Syntax:
<div class="row [size]-up=[n]">
...........
</div>
Example 1: Below is the example that illustrates the use of Flex Grid Block using small-up-3, medium-up-2 and large-up-1 classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Flex Grid Block</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script crossorigin="anonymous"
src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Flex Grid Block</h3>
<div class="row small-up-3 medium-up-2 large-up-1">
<div class="column callout">
small-up-3 medium-up-2 large-up-1
</div>
<div class="column callout">
small-up-3 medium-up-2 large-up-1
</div>
<div class="column callout">
small-up-3 medium-up-2 large-up-1
</div>
<div class="column callout">
small-up-3 medium-up-2 large-up-1
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Flex Grid Block
Example 2: Below is the example that illustrates the use of Flex Grid Block using small-up-1 medium-up-2 and large-up-3 classes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Flex Grid Block</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script crossorigin="anonymous"
src=
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Foundation CSS Flex Grid Block</h3>
<div class="row small-up-1 medium-up-2 large-up-3">
<div class="column callout alert">
small-up-1 medium-up-2 large-up-3
</div>
<div class="column callout success">
small-up-1 medium-up-2 large-up-3
</div>
<div class="column callout warning">
small-up-1 medium-up-2 large-up-3
</div>
<div class="column callout primary">
small-up-1 medium-up-2 large-up-3
</div>
</div>
</center>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Flex Grid Block
Reference: https://get.foundation/sites/docs/flex-grid.html#block-grids
Share your thoughts in the comments
Please Login to comment...