0
我一直在使用CSS网格战斗3个多小时，需要您的帮助。 我想建立一个简单的响应式网格，基于附加的图像为2卡和3卡布局。如何根据此图像在CSS网格中完成响应式布局
目前，我有移动工作，但在将桌面大小调整为平板电脑时，卡片重叠。任何帮助是极大的赞赏！
body {
font-family: arial;
}
.btn_blue_large {
display: block;
text-decoration: none;
text-align: center;
outline: 0;
margin: 0 auto;
border: solid 1px #1C96FB;
font-size: 18px;
font-weight: bold;
width: 200px;
height: 50px;
line-height: 2rem;
color: #1C96FB;
background-color: #FFFFFF;
border-radius: 100px;
transition: background 0.2s;
box-shadow: 0 2px 2px 0 #D7DADE;
-webkit-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.btn_blue_large:hover {
color: #FFFFFF;
background-color: #1C96FB;
transform: translateY(-5px);
box-shadow: 0 5px 6px 0 rgba(25, 74, 179, 0.15);
-webkit-transition: all 0.5s ease 0s, transform 400ms;
transition: all 0.5s ease 0s, transform 400ms;
}
.btn_blue_large:hover:active {
font-weight: bold;
-webkit-transition: all 0s linear 0.4s, transform 40ms;
transition: all 0s linear 0.4s, transform 40ms;
transform: translateY(-3px);
transition: box-shadow 0s linear 0s;
box-shadow: 0 0 0 0 rgba(25, 74, 179, 0.5);
}
.background {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.75;
background-color: #AAA9AA;
}
.modal_box {
background-color: #FFFFFF;
width: 100%;
margin: 0 auto;
max-width: 1200px;
height: auto;
grid-column-gap: 2em;
border-radius: 4px;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
grid-row-gap: 3em;
grid-template-areas: "title" "box_discover" "box_connect";
}
.title {
text-align: center;
grid-area: title;
font-size: 25px;
font-weight: bold;
color: #450073;
margin: 50px auto 0px auto;
}
.box_discover {
margin: 0 auto;
text-align: center;
grid-area: box_discover;
border: 1px solid #D7DADE;
background-color: #F6F8FC;
border-radius: 4px;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.1);
width: 354px;
height: 450px;
}
.box_connect {
margin: 20px auto;
text-align: center;
grid-area: box_connect;
border: 1px solid #D7DADE;
background-color: #FFFFFF;
border-radius: 4px;
box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.1);
width: 354px;
height: 450px;
}
.box_image {
margin: 60px auto 27px auto;
background-color: white;
width: 104px;
height: 104px;
}
.description {
margin: 15 auto 30px auto;
}
.bottom_text_top {
font-size: 13px;
margin: 40px auto 4px auto;
}
.logo.turfmob {
margin: 0 auto;
}
.bottom_text_bottom {
font-size: 13px;
margin: 0px auto 0 auto;
}
@media (min-width: 550px) {
.modal_box {
margin: 150px auto;
padding: 5px;
position: relative;
height: 800px;
display: grid;
grid-template-columns: 1fr 60px 1fr;
grid-template-rows: 1fr;
grid-gap: 30px;
}
.title {
position: absolute;
width: 100%;
margin: 50px auto;
}
.box_discover {
position: absolute;
left: 30px;
grid-column: 1;
grid-row: 1;
margin: 50px 0 0 0;
}
.box_connect {
position: absolute;
right: 30px;
grid-column: 3;
grid-row: 1;
margin: 50px 0 0 0;
}
.closeX {
width: 25px;
height: 25px;
top: 25px;
right: 10px;
}
}<div class="background">
<div class="modal_box">
<p class="title">Title Here</p>
<div class="boxes">
<div class="box_discover">
<img src="discover" class="box_image" alt="discover" />
<p class="description">Find something new</p>
<button class="btn_blue_large">Discover</button>
<p class="bottom_text_top">Powered by</p>
<Link to="http://www.link.com"><img src="logo" class="logo" alt="logo" /></Link>
<p class="bottom_text_bottom">a brother company</p>
</div>
<div class="box_connect">
<img src="connect" class="box_image" alt="connect" />
<p class="description">Connect an existing product</p>
<button class="btn_blue_large">Connect</button>
</div>
</div>
</div>
</div>
发布您尝试过的代码。如果我们能够重现问题，我们可以更有效地帮助您。 –
发布代码。提前致谢。 –