HTML/CSS Grid Issues

HTML/CSS
1

HTML

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<div class="container">

</div>
**CSS** .container {

display: grid;

grid-template: repeat(3, 100px) / repeat(2, 100px);

}

I have no idea why, but no matter what I try, my dev tools will not recognize my grid. I have checked my settings and my chrome is up to date, but it will not let me use grids. Can anyone help me?

2

It’s hard to tell from your snippet, but it looks like you have your container div in the head, but it needs to be in the body. It’s also hard to tell how the page is loading your CSS.

If you just want to use the Chrome dev tools to try things like this out, you can right-click an element and Edit as HTML to change the HTML to whatever you need, and in the Styles element.style section you can enter whatever CSS you want to apply to that element.

devtools
devtools821×474 30.4 KB