Question

我正在学习CSSGrid，我要求在响应式视图中将小部件对准中心，但是我做不到。

这是我的代码：

grid-template-areas: "header   header  header"
                     "contenido contenido sidebar"
                     "widget-1 widget-2 sidebar"
                     "footer footer footer";

.contenedor .sidebar {
    /* grid-column: 3/4; */
    background: #faa43d;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    /* grid-row: span 2; */

    min-height: 100px;
    grid-area: sidebar;

}

.contenedor .widget-1,
.contenedor .widget-2 {
    background: #55a8fd;
    color: white;
    height: 100px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contenedor .widget-1 {
    grid-area: widget-1;
}

.contenedor .widget-2 {
    grid-area: widget-2;
}

我在响应式视图中使用媒体查询，在该视图中我表示“ contenido”类占用3列，并且边栏也是如此，但问题是小部件使用2列，因此它不占用网格的3列。我可以通过在小部件区域的媒体查询中使用一个点来解决这个问题。

但是我不知道如何居中，因为该点占据了第三个空间，所以不允许我居中

@media screen and (max-width: 768px){
    .contenedor {
        grid-template-areas: 
        "header   header  header"
        "contenido contenido contenido"
        "sidebar sidebar sidebar"
        "widget-1  widget-2 ."
        "footer footer footer";
    }
}

媒体查询进入时的外观图片。谢谢。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="styles.css">
    <title>Layout CSS-GRID</title>
</head>
<body>
    <div class="contenedor">
        <header class="header">
            <h2>HEADER</h2>
        </header>
        <main class="contenido">
            <h1>Contenido</h1>
            <p>
                Lorem ipsum dolor sit, amet consectetur
                adipisicing elit. 
                Dolores, ullam. 
                Repellat eaque unde quam aliquid porro,
                consequatur non dolorum corporis nulla,
                consequuntur accusantium, 
                blanditiis accusamus aut exercitationem 
                placeat eligendi quis!
                Lorem ipsum dolor sit, amet consectetur
                adipisicing elit. 
                Dolores, ullam. 
                Repellat eaque unde quam aliquid porro,
                consequatur non dolorum corporis nulla,
                consequuntur accusantium, 
                blanditiis accusamus aut exercitationem 
                placeat eligendi quis!
                Lorem ipsum dolor sit, amet consectetur
                adipisicing elit. 
                Dolores, ullam. 
                Repellat eaque unde quam aliquid porro,
                consequatur non dolorum corporis nulla,
                consequuntur accusantium, 
                blanditiis accusamus aut exercitationem 
                placeat eligendi quis!
                <br><br>
                Lorem ipsum dolor sit, amet consectetur
                adipisicing elit. 
                Dolores, ullam. 
                Repellat eaque unde quam aliquid porro,
                consequatur non dolorum corporis nulla,
                consequuntur accusantium, 
                blanditiis accusamus aut exercitationem 
                placeat eligendi quis!
                Lorem ipsum dolor sit, amet consectetur
                adipisicing elit. 
                Dolores, ullam. 
                Repellat eaque unde quam aliquid porro,
                consequatur non dolorum corporis nulla,
                consequuntur accusantium, 
                blanditiis accusamus aut exercitationem 
                placeat eligendi quis!
                Lorem ipsum dolor sit, amet consectetur
                adipisicing elit. 
                Dolores, ullam. 
                Repellat eaque unde quam aliquid porro,
                consequatur non dolorum corporis nulla,
                consequuntur accusantium, 
                blanditiis accusamus aut exercitationem 
                placeat eligendi quis!
                <br><br>
                Lorem ipsum dolor sit, amet consectetur
                adipisicing elit. 
                Dolores, ullam. 
                Repellat eaque unde quam aliquid porro,
                consequatur non dolorum corporis nulla,
                consequuntur accusantium, 
                blanditiis accusamus aut exercitationem 
                placeat eligendi quis!
                Lorem ipsum dolor sit, amet consectetur
                adipisicing elit. 
                Dolores, ullam. 
                Repellat eaque unde quam aliquid porro,
                consequatur non dolorum corporis nulla,
                consequuntur accusantium, 
                blanditiis accusamus aut exercitationem 
                placeat eligendi quis!
                Lorem ipsum dolor sit, amet consectetur
                adipisicing elit. 
                Dolores, ullam. 
                Repellat eaque unde quam aliquid porro,
                consequatur non dolorum corporis nulla,
                consequuntur accusantium, 
                blanditiis accusamus aut exercitationem 
                placeat eligendi quis!
            </p>
        </main>
        <aside class="sidebar">
            <h3>Sidebar</h3>
        </aside>
        <div class="widget-1">
            <h3>Widget 1</h3>
        </div>
        <div class="widget-2">
                <h3>Widget 2</h3>
        </div>
        <footer class="footer">
            <h3>FOOTER</h3>
        </footer>
    </div>
</body>
</html>

使用CSS网格使响应项居中

0 个答案: