How to make responsive layout with CSS Grid?

J

JuraWell2018-02-08 20:03:47

css

JuraWell, 2018-02-08 20:03:47

Hello. I am new to web development. I recently started learning about grid. I spent a lot of time to make an adaptive layout of the site, but nothing came of it. I tried to do everything as stated in this article css-live.ru/articles/vyorstka-realnyx-proektov-na-... But, apparently, I don't see any obvious mistakes. At resolutions above 600px, the site simply does not fit and horizontal scrolling appears, and at resolutions less than 600, the header and other sections disappear and only the main section remains and all videos line up in one column. Thank you in advance.
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;  
            
        }  
    }
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

M

monochromer, 2018-02-08
@monochromer

@media screen and (min-width: 600px) {
  .site {
     min-width: 1568px;
     grid-template-columns: 1fr 500px 500px 1fr;
  }
}

With a window size of 600px , the block size .sitewill already be at least 1568px plus there are 2 columns 500px wide each. Hence the horizontal scrolling.