Вот код. Думаю, это глупая ошибка, но я не вижу ее -grr. Я много раз пробовал.
Области шаблона сетки медиа-запроса в моем коде:
". title title ."
". img-1-title img-2-title ."
". img-1 img-2 ."
". img-3-title img-4-title ."
". img-3 img-4 ."
но он показывает этот шаблон в моем браузере
"img-1 title title img-2"
"img-3 img-1-title img-2-title img-4"
". img-3-title img-4-title ."
html
<section>
<div class="grid">
<div class="title">Here is a couple of side projects</div>
<div class="img-1-title">A chat app build with socket.io and node.js</div>
<div class="arrow-1"><i class="fas fa-arrow-down"></i></div>
<div class="img-1"></div>
<div class="img-2-title">A responsive mock template of a company build with html css and flexboxgrid</div>
<div class="arrow-2"><i class="fas fa-arrow-down"></i></div>
<div class="img-2"></div>
<div class="img-3-title">Wikipedia search bar connected to the wikipedia API</div>
<div class="arrow-3"><i class="fas fa-arrow-down"></i></div>
<div class="img-3"></div>
<div class="img-4-title">Vanilla js calculator</div>
<div class="arrow-4"><i class="fas fa-arrow-down"></i></div>
<div class="img-4"></div>
</div>
</section>
Причина, по которой я повторно объявляю свою область сетки, заключается в том, что в моей консоли отображается желтая ошибка, если я этого не сделаю. Это работает, но мне не нравится ошибка, так что да.
css
.grid {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"title"
"img-1-title"
"arrow-1"
"img-1"
"img-2-title"
"arrow-2"
"img-2"
"img-3-title"
"arrow-3"
"img-3"
"img-4-title"
"arrow-4"
"img-4";
background: rgb(27, 27, 27);
}
.title {
grid-area: title;
padding: 20px 0;
font-family: Verdana, Tahoma, sans-serif;
display: flex;
justify-content: center;
align-items: center;
font-weight: 900;
color: white;
}
.img-1 {
grid-area: img-1;
background: url("../postimg/chat_app.png") center/cover;
height: 300px;
}
.img-2 {
grid-area: img-2;
background: url("../postimg/Web_template.png") center/cover;
height: 300px;
}
.img-3 {
grid-area: img-3;
background: url("../postimg/Wiki_viewer.png") center/cover;
height: 300px;
}
.img-4 {
grid-area: img-4;
background: url("../postimg/js_calculator.png") center/cover;
height: 300px;
}
.img-1-title {
grid-area: img-1-title;
}
.img-2-title {
grid-area: img-2-title;
}
.img-3-title {
grid-area: img-3-title;
}
.img-4-title {
grid-area: img-4-title;
}
.img-1-title, .img-2-title, .img-3-title, .img-4-title {
display: flex;
height: 80px;
padding: 8px;
justify-content: center;
align-items: center;
font-weight: 200;
font-family: Verdana, Tahoma, sans-serif;
font-style: italic;
color: white;
border-top: 3px solid rgb(15, 177, 15);
}
.arrow-1 {
grid-area: arrow-1;
}
.arrow-2 {
grid-area: arrow-2;
}
.arrow-3 {
grid-area: arrow-3;
}
.arrow-4 {
grid-area: arrow-4;
}
.arrow-1, .arrow-2, .arrow-3, .arrow-4 {
display: flex;
padding: 15px;
height: 25px;
justify-content: center;
font-size: 20px;
}
.fas {
color: white;
}
@media only screen and (min-width: 1000px) {
.grid {
grid-template-columns: 200px 1fr 1fr 200px;
grid-template-areas:
". title title ."
". img-1-title img-2-title ."
". img-1 img-2 ."
". img-3-title img-4-title ."
". img-3 img-4 .";
background: rgb(27, 27, 27);
}
.title {
grid-area: title;
}
.img-1 {
grid-area: img-1;
}
.img-2 {
grid-area: img-2;
}
.img-3 {
grid-area: img-3;
}
.img-4 {
grid-area: img-4;
}
.img-1-title {
grid-area: img-1-title;
}
.img-2-title {
grid-area: img-2-title;
}
.img-3-title {
grid-area: img-3-title;
}
.img-4-title {
grid-area: img-4-title;
}
div.arrow-1, div.arrow-2, div.arrow-3, div.arrow-4 {
display: none;
}
}