Question

我正在用 html/css 制作一个网站，只是为了测试我学到的东西。但是我创建了一个中央网格，每个项目中总是有一个空白区域。我已经尝试删除一些代码，但是当我删除两个网格菜单和左侧时，它只会删除这些空格，如果我只删除一个保留问题。

body, p, ul, h1, h2, img, blockquote{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

body{
    font-family: 'Vollkorn', serif;
    background-color: rgba(248, 248, 255);
}

img{
    max-width: 100%;
    width: 100%;
    border-radius: 0.5rem;
}

.container{
    display: grid;
    grid-template-columns: minmax(150px, 1fr) 3fr 300px;
    grid-template-rows: 100px 1fr 100px;
    grid-template-areas: 
    "header header header"
    "left-side center right-side"
    "footer footer footer";
    width: 100vw;
    height: 100vh;
}

/* MENU GRID */

.menu, .footer{
    color: #fff;
    background: linear-gradient(to right, rgba(145, 44, 238), rgba(155, 48, 255, 0.8));
    padding-right: 2rem;
    padding-left: 2rem;
    align-items: center;
}

.menu{
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
}

.menu .logo{
    max-width: 200px;
}

.menu a{
    color: #fff;
    text-decoration: none;
}

.menu .ul-nav{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 1.2rem;
}

.menu li{
    background-color: rgba(145, 44, 238, 0.5);
    margin: 1rem;
    padding: 0.5rem;
    border-radius: 5px;
    list-style: none;
}

.menu li:hover{
    background-color: rgba(104, 34, 139);
}

/* LEFT SIDE GRID */

.left-side{
    grid-area: left-side;
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 2rem;
    grid-gap: 2rem;
}

.left-side a{
    width: 50%;
    padding: 1.2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0.3rem 0.3rem 0.6rem rgba(131, 139, 131, 0.3);
}

/* CENTER GRID */

.center{
    grid-area: center;
    background-color: #fff;
    padding: 2rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

/* TITULO */

.center h1{
    font-size: 3.8rem;
    line-height: 1;
    color: rgba(155, 48, 255, 0.8);
}

.center h2{
    font-style: italic;
    font-size: 0.8rem;
    color: rgba(155, 48, 255, 0.7);
}

/* CARDS */

.top-card{
    display: flex;
    align-items: flex-start;
}

.top-card div{
    background: linear-gradient(to bottom right, rgba(145, 44, 238), rgba(155, 48, 255, 0.8));
    box-shadow: 0.2rem 0.2rem 0.9rem rgba(131, 139, 131, 0.3);
    border-radius: 0.3rem;
    text-align: center;
    width: 80px;
}

.top-card > div:nth-child(1){
    margin-right: 2rem;
}

.top-card .numero{
    font-size: 3.2rem;
    color: rgba(255, 255, 255, 0.2);
    font-weight: 300;
}

.top-card .medida{
    border-radius: 0 0rem 0.2rem 0.2rem;
    background-color: #fff;
    color: rgba(155, 48, 255, 0.7);
}

/* TEXTO */

.center p{
    color: rgba(54, 54, 54);
    font-size: 1.2rem;
    line-height: 1.6;
}

.center .texto-1{
    grid-column: 1 / -1;
}

/* IMAGENS */

.center .texto-2{
    font-size: 1rem;
    color: rgba(155, 48, 255, 0.7);
    width: 70%;
}

.center .img-1{
    grid-row: span 2;
}

/* RIGHT GRID */

.right-side{
    grid-area: right-side;
}

.footer{
    grid-area: footer;
    display: grid;
    justify-items: center;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Vollkorn:wght@400;500;600&display=swap" rel="stylesheet">
    <title>WildBeast</title>
</head>
<body>
    <div class="container">
        <header class="menu">
            <a href="" class="logo"><img src="/wolf/images/wildbeast.svg" alt="wildbeast"></a>
            <nav class="menu-nav">
                <ul class="ul-nav">
                    <li><a href="" class="menu-links">sobre</a></li>
                    <li><a href="" class="menu-links">animais</a></li>
                    <li><a href="" class="menu-links">contato</a></li>
                </ul>
            </nav>
        </header>

        <div class="left-side">
            <a href=""><img src="images/cervo.svg" alt="Cervo"></a>
            <a href=""><img src="images/leao.svg" alt="Leao"></a>
            <a href=""><img src="images/gato.svg" alt="Gato"></a>
            <a href=""><img src="images/vaca.svg" alt="Vaca"></a>
            <a href=""><img src="images/ovelha.svg" alt="Ovelha"></a>
            <a href=""><img src="images/abelha.svg" alt="Abelha"></a>    
        </div>

        <div class="center">  
            <div class="top-titulo">
                <h1>Lobo Cinza</h1>
                <h2>da família canis lupus</h2>
            </div>
            <div class="top-card">
                <div>
                    <p class="numero">72</p>
                    <p class="medida">kg</p>
                </div>
                <div>
                    <p class="numero">13</p>
                    <p class="medida">age</p>
                </div>
            </div>
            <p class="texto-1">É um sobrevivente da Era do Gelo, originário do Pleistoceno Superior, cerca de 300 mil anos atrás.[2] O sequenciamento de DNA e estudos genéticos reafirmam que o lobo cinzento é ancestral do cão doméstico</p>
            <img src="/wolf/images/wolf1.jpg" class="img-1 alt="Lobo uivando">
            <p class="texto-2">É um sobrevivente da Era do Gelo, originário do Pleistoceno Superior, cerca de 300 mil anos atrás.[2] O sequenciamento de DNA e estudos.</p>
            <img src="/wolf/images/wolf2.jpg" alt="Dois lobos">
        </div>

        <div class="right-side">
            
        </div>

        <footer class="footer">Ronerio &copy; 2021. Todos os direitos reservados. </footer>
    </div>
</body>
</html>

如何从网格布局中删除高度空间？

0 个答案: