Menu icon Foundation
Why doesn't this grid work?

If I have 4 divs in a row, all coded as

<div class="small-6 medium-3 columns">

I would expect one row of 4 columns if on a medium screen, or two rows or two columns if on a small screen, regardless of content. (Especially in a CMS, where another user might change the contents of one of the divs after publication.)

 

Medium screen works as expected, but if the lengths of the divs are not equal, the results on a small screen are uncertain:

unequal divs

 

There is no conflicting css code in that sample -- here is the entire code to produce that example (callout added to make it easier to see):

 

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
    <div class="row">
        <div class="small-6 medium-3 columns callout">
            <h4>Box 1</h4>
            <p>Line 1</p>
            <p>Line 2</p>
            <p>Line 3</p>
        </div>
        <div class="small-6 medium-3 columns callout">
            <h4>Box 2</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
        <div class="small-6 medium-3 columns callout">
            <h4>Box 3</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
        <div class="small-6 medium-3 columns callout">
            <h4>Box 4</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
    <script>
    $(document).foundation();
    </script>
</body>
</html>

 

 

gridstacking

If I have 4 divs in a row, all coded as

<div class="small-6 medium-3 columns">

I would expect one row of 4 columns if on a medium screen, or two rows or two columns if on a small screen, regardless of content. (Especially in a CMS, where another user might change the contents of one of the divs after publication.)

 

Medium screen works as expected, but if the lengths of the divs are not equal, the results on a small screen are uncertain:

unequal divs

 

There is no conflicting css code in that sample -- here is the entire code to produce that example (callout added to make it easier to see):

 

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
    <div class="row">
        <div class="small-6 medium-3 columns callout">
            <h4>Box 1</h4>
            <p>Line 1</p>
            <p>Line 2</p>
            <p>Line 3</p>
        </div>
        <div class="small-6 medium-3 columns callout">
            <h4>Box 2</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
        <div class="small-6 medium-3 columns callout">
            <h4>Box 3</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
        <div class="small-6 medium-3 columns callout">
            <h4>Box 4</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
    <script>
    $(document).foundation();
    </script>
</body>
</html>

 

 

Bill Sholar over 3 years ago

Am I misunderstanding something, or is this a bug?

Snig over 3 years ago

 

Bill,

 

I think the issue is that if using the default grid column count (e.g. 12 columns) then the number of columns specified within any given row needs to add up to 12 (that is when you are not using incomplete rows via the 'end' class).

 

In the example code you have above you have actually specificed is one row with either 24 large columns, or 16 medium columns - which will understandably give unexpected results (if the expected column count per row is 12).

 

I am not sure from your example what the layout is that you want...however if you use something like the following this will result in 4 columns side-by-side for medium and up, but for small the columns will just stack one on the other (essentially one column)...

 

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
    <div class="row">
        <div class="medium-3 columns callout">
            <h4>Box 1</h4>
            <p>Line 1</p>
            <p>Line 2</p>
            <p>Line 3</p>
        </div>
        <div class="medium-3 columns callout">
            <h4>Box 2</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
	
        <div class="medium-3 columns callout">
            <h4>Box 3</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
        <div class="medium-3 columns callout">
            <h4>Box 4</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
    <script>
    $(document).foundation();
    </script>
</body>
</html>

 

 

Hope this helps.

 

 

 

Cheers,

 

Snig

 

Bill Sholar over 3 years ago

Thanks for the message Snig -- what I am actually looking for is 4 columns side by side on medium or larger, and 2 columns side by side on small.

 

It works correctly if the contents of the first column cause it to be equal or shorter than the second column -- it is a float/clearing issue that I thought would be handled by the grid code.

Snig over 3 years ago

OK thanks for clarifying.  Sounds like what you need is a block grid such as the following (more information on this is in the grid documentation about half-way down the page at: http://foundation.zurb.com/sites/docs/grid.html):

 

<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css">
</head>
<body>
    <div class="row small-up-2 medium-up-4">
        <div class="column callout">
            <h4>Box 1</h4>
            <p>Line 1</p>
            <p>Line 2</p>
            <p>Line 3</p>
        </div>
        <div class="column callout">
            <h4>Box 2</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
	
        <div class="column callout">
            <h4>Box 3</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
        <div class="column callout">
            <h4>Box 4</h4>
            <p>Line 1</p>
            <p>Line 2</p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js"></script>
    <script>
    $(document).foundation();
    </script>
</body>
</html>