In css grid, why does using grid template columns 1fr in viewport overflow to the next section?
I am currently learning css grid, a total noob. I am trying to create a project portfolio that shows 3 div per row when on a browser unless the screen has a width of 1000px or less it should be each one div per row, but when I set it grid-template-columns: 1fr in viewport, it overlaps the next section and the next section is hidden behind the divs. If anyone can help me out would be a great! Thanks in advance!
Below is the sample code:
html, body { margin: 0; padding: 0; max-width: 100%; height: 100%; } section { height: 100%; display: grid; justify-content: center; align-content: center; text-align: center; background-color: slateblue; border: 1px solid black; } .projects { grid-template-columns: auto auto auto; grid-auto-rows: minmax(200px, auto); justify-content: stretch; align-content: stretch; } .header { grid-column-start: 1; grid-column-end: 4; color: white; justify-items: center; align-items: center; text-align: center; } .projectPanels { position: relative; text-align: center; border: 1px solid green; } .img { opacity: 1; display: block; position: absolute; width: 100%; height: 100%; transition: .5s ease; backface-visibility: hidden; } .textBoxOutline { transition: .5s ease; opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); text-align: center; } .projectPanels:hover .img { opacity: 0.3; } .projectPanels:hover .textBoxOutline { opacity: 1; } .textBox { background-color: red; color: white; font-size: 16px; padding: 16px 32px; } .contact { background-color: gray; color: white; } @media screen and (max-width: 1000px) { .projects { grid-template-columns: 1fr; } .header { grid-column-end: 1; } .img { text-align: center; } }<section class="projects" id="projects"> <div class="header"> <h1>PROJECTS</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl suscipit adipiscing bibendum est. </p> </div> <div class="projectPanels"> <img src="placeHolder.jpg" alt="PlaceHolder" class="img"> <div class="textBoxOutline"> <div class="textBox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div class="projectPanels"> <img src="placeHolder.jpg" alt="PlaceHolder" class="img"> <div class="textBoxOutline"> <div class="textBox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div class="projectPanels"> <img src="placeHolder.jpg" alt="PlaceHolder" class="img"> <div class="textBoxOutline"> <div class="textBox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div class="projectPanels"> <img src="placeHolder.jpg" alt="PlaceHolder" class="img"> <div class="textBoxOutline"> <div class="textBox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div class="projectPanels"> <img src="placeHolder.jpg" alt="PlaceHolder" class="img"> <div class="textBoxOutline"> <div class="textBox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div class="projectPanels"> <img src="placeHolder.jpg" alt="PlaceHolder" class="img"> <div class="textBoxOutline"> <div class="textBox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div class="projectPanels"> <img src="placeHolder.jpg" alt="PlaceHolder" class="img"> <div class="textBoxOutline"> <div class="textBox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div class="projectPanels"> <img src="placeHolder.jpg" alt="PlaceHolder" class="img"> <div class="textBoxOutline"> <div class="textBox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> <div class="projectPanels"> <img src="placeHolder.jpg" alt="PlaceHolder" class="img"> <div class="textBoxOutline"> <div class="textBox"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> </div> </section> <section class="contact" id="contact"> <div> <h1>CONTACT</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Mi bibendum neque egestas congue quisque egestas diam in. Urna porttitor rhoncus dolor purus non. Sem integer vitae justo eget magna fermentum iaculis. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Pharetra massa massa ultricies mi. Sed faucibus turpis in eu. Porttitor eget dolor morbi non arcu. Faucibus in ornare quam viverra orci sagittis eu volutpat. Etiam tempor orci eu lobortis elementum nibh tellus molestie.</p> Email: <a href="mailto:[email protected]">[email protected]</a> </div> </section>
removing the height:100% on the .section style in the css in your fiddle seems to do the trick.
