Menu icon Foundation
Full width row with centered row

Hello!,

What is the best way to build a full width row with inside two centered columns. The left column is 40% and the right column 60%. But the content in the columns should be inside a row so it keeps inside the grid. Below the design. The green and grey bg color should continue until the browser window.

Regards,
Bas

 

fullwidth

Hello!,

What is the best way to build a full width row with inside two centered columns. The left column is 40% and the right column 60%. But the content in the columns should be inside a row so it keeps inside the grid. Below the design. The green and grey bg color should continue until the browser window.

Regards,
Bas

 

Jarryd Fillmore over 3 years ago

+1!

Rafi Benkual over 3 years ago

You can create a grid like this:

<div class="row expanded">
  <div class="medium-5 columns">
    <!-- content -->
  </div>
  <div class="medium-7 columns">
    <!-- content -->
  </div>
</div>

To vertically center the content, the easiest way is to add a div wrapper on the content and use padding top and bottom on the columns.

Otherwise you can use the vertical centering trick

https://css-tricks.com/snippets/sass/centering-mixin/ (this mixin is in Foundation's Sass build)

 

Or use the flex grid :)