ARTICLE AD BOX
I'm very new to HTML and CSS, and started using a CSS grid generator to layout my site. According to the site (https://layout.bradwoods.io/customize) my grid should look like this since I copied the code directly from the website. Instead, the live display from the html editors I've used look all scrunched up. How do I fix this?
<!DOCTYPE html> <section class="layout"> <div class="header">1</div> <div class="leftSide">2</div> <div class="body">3</div> <div class="rightSide">4</div> <div class="footer">5</div> </section> <style> .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; } </style>