Колонки вылазят за контейнер, display: grid

Экспериментирую с display: grid, хочу сделать 3 колонки с промежутком между ними по 20 пикселей. Задаю им процентную ширину 33.33% и в итоге проблема — колонки вылазят за контейнер. Как это исправить?
* { box-sizing: border-box; } body { margin: 0; } .grid { display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 33.33%); border: 1px solid; } .grid__column { background-color: #ccc; padding: 10px; height: 200px; }

Column text #1

Column text #2

Column text #3

Ответ

Чтобы колонки не "вылазили" за контейнер, надо корректно использовать свойство grid-template-columns и все возможности Grid Layout.
Строку
grid-template-columns: repeat(3, 33.33%);
Надо заменить на:
grid-template-columns: 1fr 1fr 1fr;
Пример - https://jsfiddle.net/ma5t66df/
P.S. Таким образом легко, к примеру, сделать среднюю колонку в 2 раза шире боковых:
grid-template-columns: 1fr 2fr 1fr;