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 Kitchen Sink has the foundation elements to work well in our websites and applications. A Flex grid is a grid system that is based on the flex property that helps to add the responsive structure by creating the row and columns. The .row class is used for the row and .column is used for the column.
Foundation CSS Kitchen Sink Flex Grid Class:
- row: The row class is used to create the row.
- small-* large-expand-columns: It is used to create a column of specific count with large-sized expanded grids. The star(*) represents the specific number.
- small-* columns: This class is used to create the column of the specified number of small-size grids. The star(*) represents the specific number.
Syntax:
<div class="row">
<div class="small-4 columns"
style="background-color:#8BD6EE;">Small 4</div>
</div>Example: This example describes the Foundation CSS Kitchen Sink Flex Grid.
<!DOCTYPE html> <html>
<head>
<title>
Foundation CSS Kitchen Sink Flex Grid
</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color: green">GeeksforGeeks</h1>
<h3>Kitchen Sink Flex Grid Example</h3>
<div class="row">
<div class="small-4 columns" style="background-color: #8bd6ee"> Small 4
</div>
<div class="small-4 columns" style="background-color: #ff6347"> Small 4
</div>
<div class="small-4 columns" style="background-color: #8bd6ee"> Small 4
</div>
</div>
<div class="row">
<div class="medium-6 large-9 columns" style="background-color: #c0b0f0"> Medium 6/ Large 9
</div>
<div class="medium-6 large-3 columns" style="background-color: #7b68ee"> Medium 6/ Large 3
</div>
</div>
</body>
</html>
|
Output:
Example: This example illustrates the Foundation CSS Kitchen Sink Flex Grid by specifying small 6 with large-expand grids.
<!DOCTYPE html> <html>
<head>
<title>
Foundation CSS Kitchen Sink Flex Grid
</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>Kitchen Sink Flex Grid Example</h3>
<div class="row">
<div class="small-6 large-expand columns" style="background-color:#8BD6EE;"> First column
</div>
<br>
<div class="small-6 large-expand columns" style="background-color:#C0B0F0;"> Second column
</div>
<br>
<div class="small-6 large-expand columns" style="background-color:#8BD6EE;"> Third column
</div>
<br>
<div class="small-6 large-expand columns" style="background-color:#C0B0F0;"> Forth column
</div>
<br>
<div class="small-6 large-expand columns" style="background-color:#8BD6EE;"> Fifth column
</div>
<br>
<div class="small-6 large-expand columns" style="background-color:#C0B0F0;"> Sixth column
</div>
<br>
</div>
</body>
</html>
|
Output:
Reference: https://get.foundation/sites/docs/kitchen-sink.html#flex-grid