Layout using Grid - Cols & rows spill over container problem

Forum|Forum|4 years ago
June 8, 2021
3 replies
391 views

Hello
Why do the columns and rows spill over 'container' before and when you resize the browser window?

Plus how to get the 'Sidebar' 'main' 'content1' thru 'content5' columns to drop down from each other when resized?

How to add the 'content4 and content5 under the grid-template-columns and

grid-template-columns rows?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Layout 4 col</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

body { 
background-color: #5F9EA0;
margin: 40px;
padding: 0px;
}

.container {
width: 85%;
display: grid;
height: 90vh;

grid-template-columns: .70fr .80fr .90fr 1.5fr;
/* sidebar, content1, content2, content3 */
grid-template-rows: 0.4fr 2.0fr 1.2fr 1fr;
/* height: nav, main, content, footer */

grid-template-areas: "nav nav nav nav "
"sidebar main main main"
"sidebar content1 content2 content3"
"footer footer footer footer";

grid-gap: 6px;
font-size: 12px;

@media only screen and (max-width: 400px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 1fr
grid-template-areas:
"nav"
"sidebar"
"main"
"content1"
"content2"
"content3"
"content4"
"content5"
"footer";
  }
}

background-color: #ffffff;

margin-right: auto;
margin-left: auto;
padding: 6px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
 box-shadow: 1px 6px 13px 4px rgba(0, 0, 0, 0.5);
/* h-offset v-offset blur spread */
}

nav {
grid-area: nav;
background-color: #6699FF;
border-top-left-radius: 15px;
border-top-right-radius: 15px;

}

main {
  background: #84ffff;
  grid-area: main;
 
}

#sidebar {
  background: #F4A460;
  grid-area: sidebar;

}

#content1 {
  background: #6fffd2;
  grid-area: content1;
  
}

#content2 {
  background: #64ffda;
  grid-area: content2;
  
}

#content3 {
  background: #73ffba;
  grid-area: content3;
}

#content4 {
  background: #0099ff;
  grid-area: content3;
}

#content5 {
  background: #8080ff;
  grid-area: content3;

}

footer {
grid-area: footer;
background-color: #00b9b9;
}

h1 { font-family: open sans;
color: black;
font-size: 250%;
margin: 0px;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;
}

h3 { font-family: open sans;
color: black;
font-size: 150%;
margin: 0px;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
}

p {  
font-family: 'trebuchet ms', 'Open Sans', sans-serif;
font-size: 110%;
line-height: 1.6em;
font-weight: normal;
color: black;
margin: 0px;
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;
}

</style>
</head>
<body>

<div class="container">
  <nav><h3>Navbar</h3></nav>

  <main><h1>Main Content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it </p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it </p>
</main>

  <div id="sidebar"><h3>Sidebar</h3></div>
  <div id="content1"><h3>Content1</h3></div>
  <div id="content2"><h3>Content2</h3></div>
  
<div id="content3"><h3>Content3</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>

<div id="content4"><h3>Content4</h3>
<p>The text escapes the divs instead wrapping around to the ntex line. </p></div>

<div id="content5"><h3>Content5</h3>
<p>The text escapes the divs instead wrapping around to the ntex line. Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p></div>
</div>

  <footer><h3>Footer</h3></footer>
</div>
</body>
</html>

This topic has been closed for replies.

Correct answer davidhelp

I corrected many things and now have a responsive 3 col layout.

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive 3 Col Grid Flex </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
body {
background-color: #5F9EA0;
padding: 0px;
margin-right: auto;
margin-left: auto;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
padding: 0px;
margin: 0px;
}


@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;

  }
}

header {
grid-column: span 3;
padding: 0px;
margin: 0px;
text-align: center;
background-color: #6699ff;
color: black;
}

main {
  flex: 1;
  padding: 20px;
background-color: #ffffd9;
}

nav {
  background-color: #ffa07a;
  padding: 20px;
text-align: center;
}
 
aside {
  padding: 20px;
  background-color: #ffa07a;
text-align: center;
}

footer {
  grid-column: span 3;
  padding: 0px;
  text-align: center;
  background-color: #66cdaa;
  color: black;
}

p {
font-family: 'Open Sans', sans-serif;
font-size: 105%;
line-height: 1.3em;
text-align: left;

h1 {
font-size: 200%;
font-weight: bold;
}

h2 {
font-size: 180%;
font-weight: bold;
margin: 0px;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;

}

h3 {
font-size: 150%;
font-weight: bold;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}

</style>
  </head>
  <body class="container">
   <header><h1>Header</h1></header>
   <nav><h3>Navigation</h3></nav>
   <main>
     <h2>Main Content</h2>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it </p>
     </main>
     <aside><h3>Sidebar</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</aside>
     <footer><h3>Footer</h3></footer>
  </body>
</html>

davidhelpAuthor

Inspiring

I did everything in NoteTab and view in the Firefox web browser. How would I know scss?

davidhelpAuthorCorrect answer

Inspiring

I corrected many things and now have a responsive 3 col layout.

<!DOCTYPE html>
<html>
  <head>
    <title>Responsive 3 Col Grid Flex </title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

<style>

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
 
body {
background-color: #5F9EA0;
padding: 0px;
margin-right: auto;
margin-left: auto;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
padding: 0px;
margin: 0px;
}


@media (min-width: 768px) {
  .container {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;

  }
}

header {
grid-column: span 3;
padding: 0px;
margin: 0px;
text-align: center;
background-color: #6699ff;
color: black;
}

main {
  flex: 1;
  padding: 20px;
background-color: #ffffd9;
}

nav {
  background-color: #ffa07a;
  padding: 20px;
text-align: center;
}
 
aside {
  padding: 20px;
  background-color: #ffa07a;
text-align: center;
}

footer {
  grid-column: span 3;
  padding: 0px;
  text-align: center;
  background-color: #66cdaa;
  color: black;
}

p {
font-family: 'Open Sans', sans-serif;
font-size: 105%;
line-height: 1.3em;
text-align: left;

h1 {
font-size: 200%;
font-weight: bold;
}

h2 {
font-size: 180%;
font-weight: bold;
margin: 0px;
padding-top: 7px;
padding-right: 15px;
padding-bottom: 0px;
padding-left: 15px;

}

h3 {
font-size: 150%;
font-weight: bold;
margin: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;

}

</style>
  </head>
  <body class="container">
   <header><h1>Header</h1></header>
   <nav><h3>Navigation</h3></nav>
   <main>
     <h2>Main Content</h2>
     <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it
</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it </p>
     </main>
     <aside><h3>Sidebar</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
</aside>
     <footer><h3>Footer</h3></footer>
  </body>
</html>