Menu icon Foundation
Grid Medium-6 Large-4

Hi everyone,

I would like to know if that possible with the grid system to use medium-6 large-4 columns as I would like to display 10 boxes like 1 per row in small, 2 per row in medium and 4 per row in large screen.

I may have to use the nested thing but I don't know how..

Thanks you to guide me.

dGs

Foundation 5grid

Hi everyone,

I would like to know if that possible with the grid system to use medium-6 large-4 columns as I would like to display 10 boxes like 1 per row in small, 2 per row in medium and 4 per row in large screen.

I may have to use the nested thing but I don't know how..

Thanks you to guide me.

dGs

Karl Ward over 5 years ago

The above will create 4 columns on large, 2 columns on medium, and 1 column on small ... wrapping consecutive columns vertically. You can build on this conept ..

<div class=row>
  <div class="medium-6 large-3">
  <div class="medium-6 large-3">
  <div class="medium-6 large-3">
  <div class="medium-6 large-3">
</div>

Maybe you should be considering the block grid though, since you have x amount of columns you want to wrap differently:
http://foundation.zurb.com/docs/components/block_grid.html

Block grid vs normal grid is basically just to different methods og grid logic, that overlap slightly to some degree in functionality.

doGus over 5 years ago

Oops.. I made a mistake in my description I mean 3 columns in large screen (large-4).

<div class="row">
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
</div>
<div class="row">
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3>bleh</div>
</div>
<div class="row">
  <div class="medium-6 large-3>bleh</div>
  <div class="medium-6 large-3 end>bleh</div>
</div>

Works as expected.

But I don't know how to do with large-4.

I tried with block-grid, it's ok but I have to figure out how I can replicate the margin like if it was inside a row.

Karl Ward over 5 years ago

Sorry, not quite sure what you mean ... large-4 means 3 columns of course (3 * large-4 = 12) ... In your html example you have large-3, which makes 4 columns as you have correctly made out in your example ...

The point of the block-grid is that it is more flexible if you have X amount of elements you just want to stack without having to manually create container rows for sets of columns ...

What margins are you referring to? Margin between the elements, or margin on the left and right limits?

doGus over 5 years ago

Hehe sorry for the mess, yes I want 3 columns.

In the precedent post I used your example with 4 columns with works like I would wanted if I would like to use 4 columns but I don't.

And yes I speak about the left and right limits.

Here the unfinished website : http://dl.dropboxusercontent.com/u/9629550/mif/index.html#projects

In the first part, I use medium-6 large-4 but I can't get the layout I would like.
In the second part, I use small-block-grid-1 medium-block-grid-2 large-block-grid-3, but I would like the left and right margin limits like when I use the grid.

Thanks you for your time !

edit:

I think I found a working the solution :

<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>
<div class="project-wrapper">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
  </ul>
</div>
.project-wrapper {  
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 62.5rem;

  padding-left: 0.9375rem;
  padding-right: 0.9375rem;
}

Karl Ward over 5 years ago

Yep, that looks fine ... however, I would do it differently. First of all, with the block-grid, you dont need to create multiple "project-wrapper" containers ... Half the point of block-grid is that they will stack accordingly. Second, the reason why you dont have the paddings by default, is because you are not using the grid, which should be default (especially if you are wrapping the rest of your website elements into a grid). Try this without even having to use your project-wrapper class:

<div class="row">
  <div class="small-12 columns">
  <ul class="small-block-grid-1 medium-block-grid-2 large-block-grid-3">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  </div>
</div>

doGus over 5 years ago

I think I had a typo somewhere because I'm sure that I tried as your example but the result was not good..

Now it's good thank you for your help !