我正在学习HTML和CSS,问题是,我得到了一个设计来完成。我必须使用CSS网格的整体布局。但问题是,这些网格项目的高度是完全采取整个容器的高度在media-query样式。我已经定义了结构的布局应该是什么样子与grid-template-area属性。我不'我不知道如何调整网格项的高度来匹配设计。事实上,我不确定媒体查询样式中main容器宽度的单位。下面是我想实现的CSS设计。我如何在媒体查询样式中实现这一点?
x1c 0d1x的数据
这是我的代码。
/*--------------------------------------------------------------------------------------------------------------------------------
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;
}
}
个字符
1条答案
按热度按时间gk7wooem1#
这是您的代码片段在整个页面中查看的屏幕截图。它似乎与设计非常匹配。您需要编辑您的问题,以更清楚地解释您的代码生成的页面与您的期望或设计不匹配的方式。
的数据