我不明白如何使用CSS网格来获得这个设计

问题描述 投票：0回答：1

我正在学习 HTML 和 CSS，问题是我需要完成一个设计。我必须使用 CSS 网格来进行整体布局。但问题是这些网格项的高度完全占据了 media-query 样式中整个容器的高度。我已经使用 grid-template-area 属性定义了布局的结构。我不知道如何调整网格项目的高度以匹配设计。事实上，我不确定媒体查询样式中 main 容器宽度的单位。这是我想要实现的 CSS 设计。如何在媒体查询样式中实现此目的？

另外，这是我的代码。 

/*--------------------------------------------------------------------------------------------------------------------------------
BASE STYLES
-----------------------------------------------------------------------------------------------------------------------------------*/

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    font-size: 13px;
    font-weight: 500;
    background-color: hsl(210, 46%, 95%);
}

img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid hsl(0, 0%, 81%) ;
}

.profile {
    display: flex;
    flex-direction: row;
    gap: 10px;
    font-size: 0.9rem;
}

dl {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

main > div {
    padding-left: 2.3em; 
    padding-right: 4em;
    border-radius: 0.7em; 
}




p.second {
    font-size: 1.04rem;
}

/*----------------------------------------------------------------------------------------------------------------------------------
END OF BASE STYLES
----------------------------------------------------------------------------------------------------------------------------------*/


main {
    width: 60%;
    max-width: 900px;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: 1.6em;
    margin: 0 auto;      
}

div.first {
    background-color: hsl(263, 55%, 52%);
    background-image: url('images/bg-pattern-quotation.svg');
    background-repeat: no-repeat;
    background-position: left 100% bottom 100%;
}

.daniel dl, .jonathan dl{
    color: hsl(0, 0%, 81%);
}

.daniel dd, .jonathan dd{
    opacity: 0.5;
}
p.first {
    font-weight: 600;
    font-size: 1.4rem;
}

.daniel.first, .jonathan.first {
    color: hsl(0, 0%, 100%);
}

.profile {
    margin-top: 2em;
}
.profile ~ .first {
    margin: 1em 0 1.2em;
}

.daniel.second, .jonathan.second {
    color: hsl(0, 0%, 100%);
    opacity: 0.7;
    line-height: 1.5;
    margin-bottom: 1.4em;
}

.profile ~ .second {
    opacity: 0.7;
    line-height: 1.5;
    margin-bottom: 2.2em;
}

div.second {
    background-color: hsl(217, 19%, 35%);
}

div.third, div.fifth {
    background-color: hsl(0, 0%, 100%);
}
.jeanette dl, .kira dl {
    color: hsl(217, 19%, 35%);
}
.jeanette dd, .kira dd {
    opacity: 0.5;
}

.jeanette.first, .kira.first {
    color: hsl(217, 19%, 35%);
}

.jeanette.second, .kira.second {
    color: hsl(217, 19%, 35%);
    opacity: 0.7;
    line-height: 1.5;
    margin-bottom: 1.4em;
}

div.fourth {
    background-color: hsl(219, 29%, 14%);
}

.patrick dl {
    color: hsl(0, 0%, 100%);
}

.patrick dd {
    opacity: 0.5;
}

.patrick.first {
    color: hsl(0, 0%, 100%);
}

.patrick.second {
    color: hsl(0, 0%, 100%);
    opacity: 0.7;
    line-height: 1.5;
    margin-bottom: 1.4em;
}


/*--------------------------------------------------------
Media Query Styles
----------------------------------------------------------*/

@media(min-width: 955px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    main {
        grid-template-areas: 
            "first first second fifth"
            "third fourth fourth fifth";
        gap: 1.6em;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        max-width: 70%;
    }

    div.first {
        grid-area: first;
    }

    div.second {
        grid-area: second;
    }

    div.third {
        grid-area: third;
    }

    div.fourth {
        grid-area: fourth;
    }
    div.fifth {
        grid-area: fifth;
    }
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->

  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>Frontend Mentor | Testimonial Grid </title>


</head>
<body>
  <main class="container">
  <div class="first">

  <div class="daniel profile">
  <img src="images/image-daniel.jpg" alt="daniel image">

  <dl>
  <dt>Daniel Clifford</dt>
  <dd>Verified Graduate</dd>
  </dl>

  </div>

  <p class="daniel first">I received a job offer mid-course, and the subjects I learned were current, if not more so, 
  in the company I joined. I honestly feel I got every penny’s worth.</p>

  <p class="daniel second">“I was an EMT for many years before I joined the bootcamp. I’ve been looking to make a 
  transition and have heard some people who had an amazing experience here. I signed up 
  for the free intro course and found it incredibly fun! I enrolled shortly thereafter. 
  The next 12 weeks was the best - and most grueling - time of my life. Since completing 
  the course, I’ve successfully switched careers, working as a Software Engineer at a VR startup. ”</p>
  </div>

  <div class="second">

  <div class="jonathan profile">
  <img src="images/image-jonathan.jpg" alt="jonathan image">

  <dl>
  <dt>Jonathan Walters</dt>
  <dd>Verified Graduate</dd>
  </dl>

  </div>

  <p class="jonathan first">The team was very supportive and kept me motivated</p>

  <p class="jonathan second">“ I started as a total newbie with virtually no coding skills. I now work as a mobile engineer 
  for a big company. This was one of the best investments I’ve made in myself. ”</p>
  </div>

  <div class="third">

  <div class="jeanette profile">
  <img src="images/image-jeanette.jpg" alt="jeanette image">

  <dl>
  <dt>Jeanette Harmon</dt>
  <dd>Verified Graduate</dd>
  </dl>
  </div>

  <p class="jeanette first">An overall wonderful and rewarding experience</p>

  <p class="jeanette second"> Thank you for the wonderful experience! I now have a job I really enjoy, and make a good living 
  while doing something I love.”</p>
  </div>

  <div class="fourth">
  <div class="patrick profile">
  <img src="images/image-patrick.jpg" alt="patrick image">

  <dl>
  <dt>Patrick Abrams</dt>
  <dd>Verified Graduate</dd>
  </dl>
  </div>

  <p class="patrick first">Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and 
  learning from their experiences was easy</p>

  <p class="patrick second">“ The staff seem genuinely concerned about my progress which I find really refreshing. The program 
  gave me the confidence necessary to be able to go out in the world and present myself as a capable 
  junior developer. The standard is above the rest. You will get the personal attention you need from 
  an incredible community of smart and amazing people. ”</p>
  </div>

  <div class="fifth">
  <div class="kira profile">
  <img src="images/image-kira.jpg" alt="kira image">
  
  <dl>
  <dt>Kira Whittle</dt>
  <dd>Verified Graduate</dd>
  </dl>
  </div>

  <p class="kira first">Such a life-changing experience. Highly recommended!</p>

  <p class="kira second">“ Before joining the bootcamp, I’ve never written a line of code. I needed some structure from 
  professionals who can help me learn programming step by step. I was encouraged to enroll by a former 
  student of theirs who can only say wonderful things about the program. The entire curriculum and staff 
  did not disappoint. They were very hands-on and I never had to wait long for assistance. The agile team 
  project, in particular, was outstanding. It took my learning to the next level in a way that no tutorial 
  could ever have. In fact, I’ve often referred to it during interviews as an example of my developent 
  experience. It certainly helped me land a job as a full-stack developer after receiving multiple offers. 
  100% recommend! ”</p>
  </div>

  </main>
</body>
</html>

html css media-queries css-grid
1个回答
-3
投票

我的直觉是你不应该尝试重新发明轮子。使用现有的模板/CSS 系统，例如 Bootstrap。 https://getbootstrap.com/ 您可以使用 bootstrap 做您想做的事情，而无需发明轮子。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.