Как вставлять блоки и изображения в CSS Grid, не портя вёрстки?

Question

[Станислав Ботев]

Недавно задавал вопрос по поводу создания сайта. Дело то было отложено, а интерес изучать и познавать никуда не делся, поэтому начал создавать собственный сайт с нуля.
Сперва мучался с расположением блоков. Padding, margin etc. Затем наткнулся на описание флексбоксов. Прочитал про "модный" Grid, расположил блоки. Начал оформлять сайт картинками, добавлять блоки в другие. Каждый элемент портит аккуратный вид сайта. Видимо, что-то надо переписать или вообще с нуля делать?
Хотел в sidebar положить эту картинку, задал max-width по размеру блока в px, после этого ширина страницы увеличилась в размерах.
Ссылка на код
P.S. Border для всех блоков задал для наглядности по сути для самого же себя

Comments

[Ranwise]

вы включили грид нужно в настройках хрома и фф?

[Ankhena]

Ranwise: Последний хром понимает grid

Answer 1

[Ankhena]

Для img max-width: 100%
https://jsfiddle.net/den6e937/

.sidebar img { max-width: 378px;} - откуда вообще взялись 378 точек?

Задавая максимальный размер блока в px, нужно помнить про границы и отступы либо использовать box-sizing: border-box

p.s. grid еще очень рано использовать, только ради изучения и тренировки.

Comments

[Станислав Ботев]

Дивам тоже max-width: 100% задавать?
Моя логика такая: пока я научусь сносно верстать, Grid станет популярнее. К тому времени, уже буду в курсе того, как и что при помощи его делать. Плюс мне безумно нравится его лаконичность и простота.

[Ankhena]

Станислав Ботев: у div'а в природном состоянии ширина 100%, так что сам по себе он никуда не вылезет. А дальнейшая судьба зависит от написанных вами свойств.

Из вопроса понятно только про картинку. Что не так с дивами - нет.