Здравствуйте. Я новичок в веб-разработке. Совсем недавно начал изучать grid. Очень много времени потратил, чтобы сделать адаптивную вёрстку сайта, но так ничего и не выходит. Пытался делать всё как сказано в этой статье
css-live.ru/articles/vyorstka-realnyx-proektov-na-... Но, видимо, я не вижу каких-то очевиднейших ошибок. При разрешениях выше 600px сайт просто не влезает и появляется горизонтальная прокрутка, а при разрешениях меньше 600 шапка и остальные секции пропадают и остаётся лишь секция main и все видео выстраиваются в одну колонку. Заранее спасибо за помощь.
https://jsfiddle.net/JuraWell/65uf3ebp/<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>GRID</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="page" class="site">
<header id="masthead" class="site-header" role="banner">
</header>
<main id="main" class="site-main" role="main">
<iframe width="471" height="268" src="https://www.youtube.com/embed/wbSwFU6tY1c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<iframe width="471" height="268" src="https://www.youtube.com/embed/wbSwFU6tY1c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<iframe width="471" height="268" src="https://www.youtube.com/embed/wbSwFU6tY1c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<iframe width="471" height="268" src="https://www.youtube.com/embed/wbSwFU6tY1c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<iframe width="471" height="268" src="https://www.youtube.com/embed/wbSwFU6tY1c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<iframe width="471" height="268" src="https://www.youtube.com/embed/wbSwFU6tY1c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</main>
<div id="secondary" class="army" role="complementary"></div>
<div id="secondary" class="anketa" role="complementary"></div>
<div id="secondary" class="karta" role="complementary"></div>
<footer id="colophon" class="site-footer" role="contentinfo"></footer>
</div>
</body>
</html>
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body {
margin: 0;
}
.site {
min-height: 100vh;
}
.site-header {
background: url(http://byaki.net/uploads/posts/2012-03/1331574599_kartinka-tekst-01.jpg) top center / cover;
}
.site-main {
background: url(https://source.unsplash.com/random) top center / cover;
}
.army {
background: url(https://source.unsplash.com/collection/190727/1600x900) top center / cover;
}
.anketa {
background: url(https://source.unsplash.com/random) top center / cover;
}
.karta {
background: url(https://source.unsplash.com/daily) top center / cover;
}
.site-footer {
background: #1d55ac;
}
/*--------------------------------------------------------------
If no grid support, limit width to 50em and center align
--------------------------------------------------------------*/
@supports not (display: grid) {
.site {
max-width: 50em;
margin: 0 auto;
}
}
/*--------------------------------------------------------------
CSS Grid layout for wider screens, when browser supports grid:
--------------------------------------------------------------*/
@media screen and (min-width: 600px) {
@supports (display: grid) {
.site {
display: grid;
min-width: 1568px;
grid-template-columns: 1fr 500px 500px 1fr;
grid-template-rows: 990px 870px repeat(4, minmax(990px, auto)) 1fr;
}
.site-header,
.army,
.anketa,
.karta,
.site-footer {
grid-column: span 4;
}
.site-main {
grid-column: 2/4;
}
iframe {
border-radius: 20px;
padding: 10px;
color: white;
}
}
}
Простой
