flex box equal columns with gutter

by Richard Hunter

HTML

<div class='container'>
    <div class='grid'>
        <div class='grid_item'>
            <div class='foo'>it's the end of the world as we know it</div>
        </div>
         <div class='grid_item'>
            <div class='foo'>it's the end of the world as we know it</div>
        </div>      
    </div>
</div>
<p>Am trying to achieve two equal columns with a gutter between them. Is this the simplest way of doing this using flexbox?</p>

CSS

.container {
    background : pink;
    height : 200px;
    margin : 50px;
}
.grid {
    display : flex;
    background : lightblue;
    margin-left : -20px;
}
.grid_item {
    flex-grow : 1;
    padding-left : 20px;
}
.foo {
    background : yellow;
    padding : 10px;
}