pure-css/pure

adding border changes grid structure

toobr opened this issue · 1 comments

toobr commented

Describe the bug
I am using the classes class="pure-u-1 pure-u-md-1-4. I would expect to have 1 column on small screens and 4 columns when the screen width is anything larger.
If I add a border to the pure-u-1 class, I get 3 columns instead of 4 on larger screens.

To Reproduce
I created a fiddle here (should be valid for 7 days from today). If it has expired, just copy the html at the bottom.

(Un)comment the style line that sets the border and watch the difference in grid structure.

Expected behavior
I would expect the grid structure to remain the same regardless of whether the cells have a border or not.

Desktop (please complete the following information):
OS - Ubuntu 22.04 LTS
Browser - Chrome, but it doesnt matter.

Additional context

  • Pure Version: latest from CDN

I would also love to hear an explanation of why this happens.

**Code sample to test - **

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv=Content-Type"" content="text/html;charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/base-min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/grids-min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@2.1.0/build/grids-responsive-min.css">

    <style>
        .pure-u-1 {
            border: solid blue;
            /* (un)comment the line above and watch the difference in grid structure */
        }
    </style>
</head>

<body >
        <div class="pure-g">
            <div class="pure-u-1 pure-u-md-1-4 ">
                    bar
            </div>
            <div class="pure-u-1 pure-u-md-1-4 ">
                    bar
            </div>
            <div class="pure-u-1 pure-u-md-1-4 ">
                    bar
            </div>
            <div class="pure-u-1 pure-u-md-1-4 ">
                    bar
            </div>
        </div>
</body>
</html>
magikstm commented

It's because a border adds pixels to your divs.

You could use outline instead in your CSS:
outline: solid blue;

  • ❤️1