[css-grid] implicit grid lines when using fixed "gutter" tracks

Hi all, a quick question regarding implicit grid lines. Taking the
following example, I am placing 'e' into a row that doesn't exist in my
rows definition. So an implicit track is created to hold it. However my
grid is using a track for a fixed gutter between row and column tracks,
what I really want is a way to create that additional gutter track plus the
row track.

I think this is a common scenario with current grid systems that designers
are using, is there a current way to get round this? It comes back to an
earlier discussion about having something like column-gap, was that idea
shelved?

<!doctype html>
<html>
  <head>
    <title>Testing creation of tracks on the implicit grid</title>
    <meta charset="utf-8">
    <style>
    body {
        margin: 40px;
    }
    .wrapper {
        display: grid;
        grid-template-columns: 100px 10px 100px 10px 100px;
        grid-template-rows: auto 10px auto;
        background-color: #fff;
        color: #444;
    }

    .box {
        background-color: #444;
        color: #fff;
        border-radius: 5px;
        padding: 20px;
        font-size: 150%;

    }

    .a {
        grid-column: 1 / 4;
        grid-row: 1 / 2;
    }
    .b {
        grid-column: 5 / 6;
        grid-row: 1 / 4;
    }
    .c {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .d {
        grid-column: 3 / 4;
        grid-row: 3 / 4;
    }

    .e {
        grid-column: 1 / 4;
        grid-row: 4 / 5;
    }



   </style>
</head>

 <body>

     <div class="wrapper">
        <div class="box a">A</div>
        <div class="box b">B</div>
        <div class="box c">C</div>
        <div class="box d">D</div>
        <div class="box e">E</div>
    </div>
</body>
</html>

-- 

Rachel Andrew

http://rachelandrew.co.uk
http://twitter.com/rachelandrew

Received on Sunday, 31 August 2014 15:14:26 UTC