当前显示
当我输入:grid-template-columns: repeat(4,1fr);(这是显示的内容)
Grid不会像我想象的那样变成4列2行。
任何帮助都会很感激。由于
对编码相当陌生，所以如果我错过了一些明显的东西，我很抱歉。
HTML代码
!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" href="CSS/style.css">
<title>Frontend Mentor | [Challenge Name Here]</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution { font-size: 11px; text-align: center; }
.attribution a { color: hsl(228, 45%, 44%); }
</style>
</head>
<body>
<div class="main-grid">
<div class="container upper-left-container">
<img
src="images/image-daniel.jpg"
alt=""
class"user-photo">
<div class="user-info">
<p class="username">Daniel Clifford</p>
<p class="verification">Verified Graduate</p>
</div>
<h1 class="testimony">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.</h1>
<p class="test-paragraph"> 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="container upper-right-container">
<img
src="images/image-jonathan.jpg"
alt=""/
class="user-photo">
<div class="user-info">
<p class="username">Jonathan Walters</p>
<p class="verification">
Verified Graduate
</p>
</div>
<h1 class="testimony">
The team was very supportive and kept me motivated
</h1>
<p class="test-paragraph">
“ 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 class="container bottom-left-container">
<img
class="bl-img"
src="images/image-jeanette.jpg"
alt="">
<div class="user-info">
<p class"username">Jeanette Harmon</p>
<p class="verification">Verified Graduate</p>
</div>
<h1>An overall wonderful and rewarding experience</h1>
<p>“ 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="container bottom-right-container">
<img
class="br-img"
src="images/image-patrick.jpg"
alt="">
<div class="user-info">
<p class="username">Patrick Abrams</p>
<p class="verification">Verified Graduate</p>
</div>
<h1>Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and
learning from their experiences was easy.</h1>
<p>“ 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="container right-container">
<img
class="r-img"
src="images/image-kira.jpg"
alt="">
<div=class="user-info">
<p class="username">Kira Whittle</p>
<p class="verification">Verified Graduate</p>
</div>
<h1>Such a life-changing experience. Highly recommended! </h1>
<p>“ 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>
</div>
<footer class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</footer>
</body>
</html>
*{
font-family: Barlow Semi Condensed, sans-serif;
font-size: 13px;
padding: 0;
margin;
box-sizing: border-box;
}
body{
font-size: 13 px;
display: flex;
justify-content: center;
align-items:
min-height: 100vh;
background-color: hsl(210, 46%, 95%);
}
.main-grid{
display: grid;
max-width: 1150px;
grid-template-columns: repeat(4, 1fr);
首先你的代码是完全混乱的，你错过了一些=和额外的/在你的<img>标签。CSS代码没有问题(除了最后一个}缺失)，html代码有错误。
例如:
& lt; img src ="图像/image-daniel.jpg"alt =";"class" user-photo"在
缺少=附近的类属性，它将是class="user-photo"
和
& lt; img src ="图像/image-jonathan.jpg"alt ="/类="user-photo"在
这里在alt属性附近有一个额外的/
请参考此代码并比较更改:
* {
font-family: Barlow Semi Condensed, sans-serif;
font-size: 13px;
padding: 0;
margin: 5px;
box-sizing: border-box;
text-align: justify;
}
body {
font-size: 13 px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: hsl(210, 46%, 95%);
}
.main-grid {
display: grid;
max-width: 1150px;
grid-template-columns: repeat(4, 1fr);
column-gap: 15px;
row-gap: 15px;
}
.user-info {
margin-top: 20px;
margin-bottom: 20px;
}
.user-info p {
text-align: center;
}
.user-photo {
width: 80px;
height: 80px;
display: block;
margin: auto;
}<div class="main-grid">
<div class="container upper-left-container">
<img src="https://www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png" alt="" class="user-photo"/>
<div class="user-info">
<p class="username">Daniel Clifford</p>
<p class="verification">Verified Graduate</p>
</div>
<h1 class="testimony">
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.
</h1>
<p class="test-paragraph">
“ 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="container upper-left-container">
<img src="https://www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png" alt="" class="user-photo"/>
<div class="user-info">
<p class="username">Jonathan Walters</p>
<p class="verification">Verified Graduate</p>
</div>
<h1 class="testimony">
The team was very supportive and kept me motivated
</h1>
<p class="test-paragraph">
“ 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="container upper-left-container">
<img src="https://www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png" alt="" class="user-photo"/>
<div class="user-info">
<p class="username">Jeanette Harmon</p>
<p class="verification">Verified Graduate</p>
</div>
<h1 class="testimony">
An overall wonderful and rewarding experience
</h1>
<p class="test-paragraph">
“ 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="container upper-left-container">
<img src="https://www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png" alt="" class="user-photo"/>
<div class="user-info">
<p class="username">Patrick Abrams</p>
<p class="verification">Verified Graduate</p>
</div>
<h1 class="testimony">
Awesome teaching support from TAs who did the bootcamp themselves. Getting guidance from them and
learning from their experiences was easy.
</h1>
<p class="test-paragraph">
“ 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="container upper-left-container">
<img src="https://www.winhelponline.com/blog/wp-content/uploads/2017/12/user.png" alt="" class="user-photo"/>
<div class="user-info">
<p class="username">Kira Whittle</p>
<p class="verification">Verified Graduate</p>
</div>
<h1 class="testimony">
Such a life-changing experience. Highly recommended!
</h1>
<p class="test-paragraph">
“ 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>
</div>你已经用upper-right-container类在div内嵌套了4个div。所以当你使用grid-template-columns: repeat(4, 1fr);时，你所做的是4列，但在第二列中，你有所有的div嵌套在upper-right-container中。
我已经为你想在这个链接https://codepen.io/enasa/pen/jOMXWpO?editors=1100中创建的4列中的每一列添加了背景，我还删除了你段落中的一些内容，只是为了使一切简单
为了让它更清晰，如果你改变4 × 2在grid-template-columns: repeat(4, 1fr);在我发送的链接，你会看到两列从预览中删除。
如果将4替换为3，您将看到其中一列被删除。
我希望这是清楚的，如果不让我知道:)
也，我是新的编码以及我刚刚学会网格2天前;)。