Foundation - Nesting

Description

We can nest the grids columns inside columns. In one column, we can define many more columns inside it.

Example

The following example demonstrates the use of nesting in Foundation −

Live Demo 
<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" crossorigin="anonymous"></script>
   </head>

   <body>
      <div class = "row">
         <h2>Grid - Nested Columns</h2>
         <div class = "small-9 columns"  style = "background-color:#8BD6EE;">
            <h4>Main column small-9</h4>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

            <div class = "row">
               <div class = "small-6 columns"  style = "background-color:#808000;">
                  Nested inside the small-9 class
               </div>

               <div class = "small-6 columns"  style = "background-color:#FF6347;">
                  Nested inside the small-9 class
               </div>
            </div>

         </div>

         <div class = "small-3 columns" style = "background-color:#808000;">Column small-3 class
            <div class = "row">
               <div class = "small-8 columns" style = "background-color:#7B68EE;">
                  Nested inside small-3 class
               </div>
            </div>
         </div>

      </div>
   </body>
</html>

Output

Let us carry out the following steps to see how the above given code works −

  • Save the above given html code nested.html file.

  • Open this HTML file in a browser, an output is displayed as shown below.

foundation_the_grid.htm
Advertisements