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

#css #css3 #вёрстка #css_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




    

Ответы

Ответ 1

Чтобы колонки не "вылазили" за контейнер, надо корректно использовать свойство 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;


Ответ 2

Вместо процентов используйте fr:



* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat( 3, 3fr);
  border: 1px solid;
}

.grid__column {
  background-color: #ccc;
  padding: 10px;
  height: 200px;
}

  
Column text #1
  
Column text #2
  
Column text #3