Menu icon Foundation
Nesting columns inside columns

Via http://zurb.com/responsive I found the following site: http://www.trinitysf.com/

As you can see from below html, div's with the "columns" class are nested inside other div's with columns class WITHOUT putting them into a div with a "row" class. 

Is this just another correct way of doing things in foundation or why do the do that?

Thanks 

 

Jimmy

 

 

<div id="container" class="home-page">

	<div class="row">	
			
		<div class="search-bar">

			<div class="search-right medium-6 large-6 columns">
				
				<div class="small-12 medium-6 large-6 columns">
					
				</div>
			
				<div class="small-12 medium-6 large-6 columns">
					
				</div>
			
			</div>	
			
			<div class="search-left medium-6 large-6 columns">
				
				<div class="medium-7 large-8 columns">			
					
					<div class="large-12 columns">
						
					</div>
					
					<div class="medium-6 large-6 columns">
						 					
					</div>
					
					<div class="medium-6 large-6 columns">
						 					
					</div>
				
				</div>
			
				<div class="medium-5 large-4 columns">
					
				</div>
			
			</div>
		
		</div>

	</div>

</div>

Foundationgrid

Via http://zurb.com/responsive I found the following site: http://www.trinitysf.com/

As you can see from below html, div's with the "columns" class are nested inside other div's with columns class WITHOUT putting them into a div with a "row" class. 

Is this just another correct way of doing things in foundation or why do the do that?

Thanks 

 

Jimmy

 

 

<div id="container" class="home-page">

	<div class="row">	
			
		<div class="search-bar">

			<div class="search-right medium-6 large-6 columns">
				
				<div class="small-12 medium-6 large-6 columns">
					
				</div>
			
				<div class="small-12 medium-6 large-6 columns">
					
				</div>
			
			</div>	
			
			<div class="search-left medium-6 large-6 columns">
				
				<div class="medium-7 large-8 columns">			
					
					<div class="large-12 columns">
						
					</div>
					
					<div class="medium-6 large-6 columns">
						 					
					</div>
					
					<div class="medium-6 large-6 columns">
						 					
					</div>
				
				</div>
			
				<div class="medium-5 large-4 columns">
					
				</div>
			
			</div>
		
		</div>

	</div>

</div>
Dominik Pieper over 3 years ago

Hi Jimmy,

you can do that, but you have to consider that without the row, the column padding will be summarized. The row would remove the padding.

e.g. this:

<div class="row">
  <div class="medium-12 column">Hello</div>

  <div class="medium-12 column">
    <div class="medium-12 column">Hello</div>

    <div class="row">
      <div class="medium-12 column">Hello</div>>
    </div>
  </div>
</div>

will create something like this:

Hello
    Hello
Hello

Jimmy G over 3 years ago

Hi what do you mean with summarized? Normally the colums must add up to 12 inside a row but in my and your example there a 3 divs with a class of large-12 + large-6 + large-6 that add up to 24? I didn't know this was possible?

 

Jimmy  

Rafi Benkual over 3 years ago

I think Dominik is saying that you need rows in between nested columns.

.rows adjust for the extra padding when nested:

.row .row {
   max-width: none;
   margin-left: -0.625rem;
   margin-right: -0.625rem;
   max-width: none; 
}

Dominik Pieper over 3 years ago

Yes, I meant rows to adjust the extra padding.

In your example "of large-12 + large-6 + large-6 that add up to 24": It is possible, but there will be a "new line/row" after the first large-12. Even if your columns exceed 12, a row will not exceed 12.

Otherwise something like that wouldn't be possible, too. Because small exceed 12:

<div class="small-12 medium-6 column"></div>
<div class="small-12 medium-6 column"></div>

The content here would be on medium side by side and on small and mobiles one below the other.

To add more columns than 12 and nest columns without rows are two different things. It's both possible but you should be aware of whats going on.

Jimmy G over 3 years ago

Ok thanks a lot Dominique & Rafi, I appreciate your answers! I'm working on a site where I need a bunch of searchfields spread over more than one row and in the right order. When using more than one row I wasn't getting the result I expected to get but now I found following solution. 

It's one row with 6 "column" divs inside but they add up to more than one line as you can see.

Do you guys think this is a good solution and a good way to achieve this or is there a better or more elegant solution to achieve this?

Thanks a lot in advance!

Jimmy

 

<div class="row">

	<div style="background-color: #ededed" class="small-12 medium-3 large-2 columns">Status</div>

	<div style="background-color: #3debed" class="small-12 medium-9 large-6 columns">Location</div>

	<div style="background-color: #ededed" class="small-12 medium-3 large-2 columns">Type</div>

	<div style="background-color: #dddddd" class="small-12 medium-3 large-2 columns">Subtype</div>

	<div style="background-color: #ededed" class="small-12 columns medium-4 large-3">
		<div class="row">
			<div style="background-color: #ededed" class="small-6 columns">Min. price</div>
			<div style="background-color: #ededed" class="small-6 columns end">Max. price</div>
		</div>
	</div>

	<div style="background-color: #ededed" class="small-12 medium-2 large-2 columns">Search</div>

</div>