CSS 网格登陆页面

Question

我正在设计一个登陆页面。 在我的顶部容器中，我有一个图像、标题文本和一个倒数计时器。

我正在努力使其响应。 下面是我想要的结果的图片。 以及到目前为止我想出的代码片段。

索引.html

<div class="top-container">

    <div class="header">
        <img src="images/fortytrans.png" style="height:600px; width:300px;">
    </div>



    <div class="timer">

        <section class="landing">
            <div class="landing-inner">
                <div class="countdown"></div>
            </div>
        </section>

        <script src="clock.js"></script>

    </div>

    <div class="image">
        <img src="images/mainguy.png" style="height:600px; width:300px;">

    </div>


  </div>

主文件

    .top-container{
        grid-area: content;
        width: 100%;
        height: 100vh;
        display: grid;
        grid-template-areas: 
        "header"
        "timer"
        "image"
           ;
      grid-template-columns: 1fr;
      grid-template-rows: 130px 800px 250px;
      }

  .header{
     grid-area: header;
 }

   .timer{
    grid-area: timer;
 }

 .image{
    grid-area: image;
}

Answer 1

你把事情复杂化了。 对于简单的一列线性视图，您不需要网格。 拿出手机查看。

然后只需为更广泛的布局添加一个带有媒体查询的网格。

 header, section, div { padding: 1em; margin: 1em; background: #aaa; } @media only screen and (min-width: 600px) { body { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "image header" "image timer"; } div { grid-area: image; } header { grid-area: header; } section { grid-area: timer; } }

 <header> Header </header> <section> Timer </section> <div> Image </div>