Предварительный просмотр в реальном времени не похож на код генератора макетов CSS ⇐ Html

[Anonymous]

Я новичок в HTML и CSS и начал использовать генератор CSS-сеток для верстки своего сайта. Согласно сайту (https://layout.bradwoods.io/customize), моя сетка должна выглядеть так, поскольку я скопировал код прямо с сайта. Вместо этого живое отображение в HTML-редакторах, которые я использовал, выглядит сморщенным. Как это исправить?


1
2
3
4
5



.layout {
width: 100%;
gap: 1em;
display: grid;
grid:
"header header header" auto
"leftSide body rightSide" 1fr
"footer footer footer" auto
/ auto 1fr auto;
}

.header { grid-area: header; background-color:pink; }
.leftSide { grid-area: leftSide; background-color:pink; }
.body { grid-area: body; background-color:pink; }
.rightSide { grid-area: rightSide; background-color:pink; }
.footer { grid-area: footer; background-color:pink; }



Подробнее здесь: https://stackoverflow.com/questions/798 ... rator-code