html - 为什么即使我的类标签正确，CSS 网格也不起作用？

Question

我希望我的 h2 出现在图像的右侧，但是当我使用网格时它不起作用。如果您发现我的代码有问题，请告诉我。谢谢！

body {
        display: grid;
        grid-template-areas: "header nav" "berry menu" "footer footer";
        grid-template-columns: 30% 70%;
        grid-template-rows: 200px 600px 100px;
    }
    
    .berry{
        grid-area: berry;
    }
    
    .menu{
        grid-area: menu;
    }

<nav>
            <a>Shopping Basket</a>
    </nav>
        <header>
                <h1>Sally's Cheesecakes</h1>
        </header>

        <main>
            <div class="berry">
                <img src="images/berry_cheesecake.jpg" alt="berry_cheesecake" width="300" height="300">
            </div>
            <div class="menu"> 
                <h2>Made with fresh blueberries and farm cheese from New Zealand. <em>No added sugar</em> cake perfect for anyone </h2>
            </div>
        </main>

标签： htmlcss

Answer 1

在您的 CSS 中，您正在设置body元素的样式而不是<main>. 最简单的错误有时可能最难发现:)

改变

body {
 ...
}

到

main {
 ...
}