我实际上是为团队成员制作的卡片,卡片运作良好,但布局存在问题。 我尝试同时使用CSS Flexbox和CSS3 Grid,但我的浏览器同时支持它们。 而且在移动设备上效果很好!
我尝试了flex: 2 0 100%;
还有display: grid;
grid-template-columns: repeat(470px, 1fr);
grid-auto-rows: auto;
grid-gap: 1em;
这个问题有解决方案吗?
.cards2 {
font-size: 11px;
width: 100%;
height: auto;
padding: 1em 0;
}
.cards2 a { text-decoration: none; }
.cards2 .container {
display: grid;
grid-template-columns: repeat(470px, 1fr);
grid-auto-rows: auto;
grid-gap: 1em;
}
.cards2 .container .card-wrapper {
margin: 25px;
}
.cards2 .container .card-wrapper .card {
width:/* 32rem*/ 470px;
margin: 34px 25px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #EBEEF8;
box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.2);
/* box-shadow: 20px 20px 60px #bec3c9,
-20px -20px 60px #ffffff; */
border-radius: 28px;
}
.cards2 .container .card-wrapper .card .card-bg {
width: 100%;
height: 26rem;
object-fit: cover;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
border-top-right-radius: 28px;
border-top-left-radius: 28px;
}
.cards2 .container .card-wrapper .card .card-logo {
width: 14rem;
height: 14rem;
object-fit: cover;
border-radius: 50%;
margin-top: -170px;
z-index: 999;
border: 12px solid #EBEEF8;
}
.cards2 .container .card-wrapper .card h1 {
font-size: 40px;
font-family: 'Poppins', sans-serif;
color: #333;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 15px;
}
.cards2 .container .card-wrapper .card .title {
color: #777;
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: 1.1rem;
text-align: center;
}
.cards2 .container .card-wrapper .card .desc {
font-family: 'Lato', sans-serif;
font-weight: 500;
word-spacing: 0.8px;
font-size: 1.3rem;
text-align: center;
font-style: italic;
margin: 20px 0;
padding: 8px;
}
.cards2 .container .card-wrapper .card .rb {
background: #666;
color: var(--light);
padding: 10px;
margin: 3px;
border-radius: 50%;
}
.cards2 .container .card-wrapper .card .rb i {
font-size: 16px;
}
.cards2 .container .card-wrapper .card .rb:hover {
background: #555;
}
.cards2 .container .card-wrapper .card .social-icons {
width: 100%;
list-style: none;
display: flex;
justify-content: space-evenly;
padding: 2rem 0;
margin-top: 1.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.cards2 .container .card-wrapper .card .social-icons h3 {
font-size: 2.3rem;
}
.cards2 .container .card-wrapper .card .social-icons i {
font-size: 2.8rem;
color: #0596C2;
}
.cards2 .container .card-wrapper .card .social-icons i:hover {
color: #50B4F2;
}
<div class="cards2">
<div class="container">
<div class="card-wrapper">
<div class="card">
<img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
<img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
<h1>Smaran Bose B</h1>
<p class="title">Author</p>
<p class="desc">
" Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
</p>
<!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
<ul class="social-icons">
<li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
</ul>
</div>
<div class="cards2">
<div class="container">
<div class="card-wrapper">
<div class="card">
<img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
<img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
<h1>Smaran Bose B</h1>
<p class="title">Author</p>
<p class="desc">
" Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
</p>
<!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
<ul class="social-icons">
<li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
</ul>
</div>
<div class="cards2">
<div class="container">
<div class="card-wrapper">
<div class="card">
<img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
<img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
<h1>Smaran Bose B</h1>
<p class="title">Author</p>
<p class="desc">
" Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
</p>
<!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
<ul class="social-icons">
<li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
</ul>
</div>
<div class="cards2">
<div class="container">
<div class="card-wrapper">
<div class="card">
<img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
<img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
<h1>Smaran Bose B</h1>
<p class="title">Author</p>
<p class="desc">
" Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
</p>
<!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
<ul class="social-icons">
<li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
答案 0 :(得分:2)
我认为这里的问题是网格设置不正确。一起使用grid和flexbox没有问题。我看到您已将容器设为网格,但随后将卡片放入单个容器中,而不是一个。这意味着每张卡都在自己的单独网格中,而不是所有卡都在一个网格中。
另一个问题是您尝试使用两个度量来设置网格:grid-template-columns: repeat(470px, 1fr);
。 470px是一个度量,但是1fr也是一个度量,它代表1个分数。相反,假设您希望每张卡在上一行之前都占用4%的可用空间,则代码应为grid-template-columns: repeat(4, 1fr);
。
我在此处更改了我的CodePen:https://codepen.io/St3ph3n92/pen/xxwraXE
如果您想了解有关网格的更多信息,我发现这个简短的速成课程非常有用:https://scrimba.com/course/gR8PTE
.cards2 {
font-size: 11px;
width: 100%;
height: auto;
padding: 1em 0;
}
.cards2 a {
text-decoration: none;
}
.container {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: auto;
grid-gap: 1em;
}
.cards2 .container .card {
width: /* 32rem*/
470px;
margin: 34px 25px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
background: #EBEEF8;
box-shadow: 0.5rem 0.5rem 3rem rgba(0, 0, 0, 0.2);
border-radius: 28px;
}
.cards2 .container .card .card-bg {
width: 100%;
height: 26rem;
object-fit: cover;
-webkit-clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 78%, 0% 100%);
border-top-right-radius: 28px;
border-top-left-radius: 28px;
}
.cards2 .container .card .card-logo {
width: 14rem;
height: 14rem;
object-fit: cover;
border-radius: 50%;
margin-top: -170px;
z-index: 999;
border: 12px solid #EBEEF8;
}
.cards2 .container .card h1 {
font-size: 40px;
font-family: 'Poppins', sans-serif;
color: #333;
text-transform: uppercase;
font-weight: 600;
letter-spacing: 1px;
margin: 25px 15px;
}
.cards2 .container .card .title {
color: #777;
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: 1.1rem;
text-align: center;
}
.cards2 .container .card .desc {
font-family: 'Lato', sans-serif;
font-weight: 500;
word-spacing: 0.8px;
font-size: 1.3rem;
text-align: center;
font-style: italic;
margin: 20px 0;
padding: 8px;
}
.cards2 .container .card .rb {
background: #666;
color: var(--light);
padding: 10px;
margin: 3px;
border-radius: 50%;
}
.cards2 .container .card .rb i {
font-size: 16px;
}
.cards2 .container .card .rb:hover {
background: #555;
}
.cards2 .container .card .social-icons {
width: 100%;
list-style: none;
display: flex;
justify-content: space-evenly;
padding: 2rem 0;
margin-top: 1.5rem;
border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.cards2 .container .card .social-icons h3 {
font-size: 2.3rem;
}
.container .card .social-icons i {
font-size: 2.8rem;
color: #0596C2;
}
.cards2 .container .card .social-icons i:hover {
color: #50B4F2;
}
<div class="cards2">
<div class="container">
<div class="card">
<img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
<img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
<h1>Smaran Bose B</h1>
<p class="title">Author</p>
<p class="desc">
" Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in
music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
</p>
<!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
<ul class="social-icons">
<li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
</ul>
</div>
<div class="card">
<img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
<img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
<h1>Smaran Bose B</h1>
<p class="title">Author</p>
<p class="desc">
" Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in
music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
</p>
<ul class="social-icons">
<li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
</ul>
</div>
<div class="card">
<img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
<img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
<h1>Smaran Bose B</h1>
<p class="title">Author</p>
<p class="desc">
" Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in
music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
</p>
<!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
<ul class="social-icons">
<li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
</ul>
</div>
<div class="card">
<img src="images/authorSmaranBg.jpg" alt="Smaran Background" class="card-bg">
<img src="images/authorSmaran.jpg" alt="Smaran Logo" class="card-logo">
<h1>Smaran Bose B</h1>
<p class="title">Author</p>
<p class="desc">
" Knowledge is everything to me. I love exploring. I don’t lose my control over patience. I like to keep a positive attitude. I am always ready to learn new skills and ready to face challenges. I don’t lose my cool so easily. I show my keen interest in
music. My ultimate goal is to become a professional guitarist and a singer. I am also good at sports. I am good at playing cricket and badminton. "
</p>
<!-- <a href="#" class="rb"><i class="im im-warning"></i></a> -->
<ul class="social-icons">
<li><a href="https://www.instagram.com/smaranbose/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://www.facebook.com/smaranbose.badugu.5"><i class="fab fa-facebook-square"></i></a></li>
</ul>
</div>
</div>
我希望这会有所帮助!