Grid layout and text centering

Report · Apr 04, 2021

Hello
I have 2 questions..... more to come : )

I started with this code and modified it and I am using the W3 editor there from the first example shown. My Dreamweaver trial ended and I did not want to rent till I knew more about the grid layout.
https://www.w3schools.com/css/css_grid.asp

1) Why is the footer not even with the 'right 2' like the 'Main' and 'Right' above? - see code.

2) How to center text for say the heading then have the paragraph text below it start on
the left side?

<!DOCTYPE html>
<html>
<head>
<style>

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header header'
    'menu main main main right1 right1 right1'
    'menu footer footer footer footer right2 right2';
  grid-gap: 10px;
  grid-template-rows: 90px 1fr 80px;
  grid-template-columns: 20% 40% 15%;
  height: 50vh;
  
 max-width: 940px;
 min-width: 300px;
 color: #fff;
 padding: 20px;
 border-radius: 15px;
box-shadow: 1px 2px 9px 1px rgba(0, 0, 0, 0.5);
}

.header { grid-area: header; 
padding: 20px;
background-color: #66CDAA;

}
.menu { grid-area: menu; 
padding: 20px;
background-color: #F5DEB3;

}
.main { grid-area: main; 
padding: 20px;
background-color: #FFF8DC;
}

.right1 { grid-area: right1;
padding: 20px;
background-color: #F5DEB3;
 }

.footer { grid-area: footer; 
padding: 20px;
background-color: #66CDAA;
}

.right2 { grid-area: right2; 
padding: 20px;
background-color: #66CDAA;
}


h1 {
margin: 0px;
padding: 0px;
font-size: 180%;
color: black;
font-family: 'Georgia', 'sans-serif';
}

h2 { color: black;
font-size: 150%;
margin: 0px;
padding: 0px;
color: black
font-family:  'Georgia', 'Open Sans';
display: inline;
}

p { color: blue;
font-size: 100%;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', 'sans-serif';
}

</style>
</head>
<body>

<h1>Grid Layout 3 col</h1>

<p>This grid layout contains six columns and three rows:</p>
<br><br>

<div class="grid-container">
  <div class="header"><h2>Header<h/2></div>
  <div class="menu"><h2>Menu</h2></div>
  
  <div class="main"><h2>Main</h2>
  <p>Grid layout six columns and three rows</p> 
  </div>  
  
  <div class="right1"><h2>Right</h2></div>
  <div class="footer"><h2>Footer</h2></div>
  <div class="right2"><h2>right 2</h2></div>
  
</div>

</body>
</html>

Report · Apr 04, 2021

There are seven column in your example

  grid-template-areas:
    'header header header header header header header'
    'menu main main main right1 right1 right1'
    'menu footer footer footer footer right2 right2';

The `Right` container uses 3 columns while `right2` uses two columns.

For text align horizontally, use `text-align: center;` Make sure that you do not change the 'h2' to display inline

h2 {

color: black;

font-size: 150%;

margin: 0px;

padding: 0px;

color: black font-family: 'Georgia', 'Open Sans';

~~display: inline;~~

text-align: center;

}

Wappler, the only real Dreamweaver alternative.

Report · Apr 04, 2021

Thanks.

I made the adjustments you suggested and it works out : )
I notice that the columns and rows overlap the grid container when I resize the window.
Question: How to keep them inside the grid-container?

Also the grid layout contains 7 columns and three rows yet how are they counted as with div layouts it would be 3 columns and 3 rows. This grid terminology is confusing to me : )

Yet at other sites the layouts for 3 columns and 3 rows are as follows from this site:

https://www.quackit.com/html/tutorial/html_layouts.cfm

display: grid;
grid-template-areas:
"header header header"
"nav article ads"
"footer footer footer";

<!DOCTYPE html>
<html>
<head>
<style>

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header header'
    'menu main main main right1 right1 right1'
    'footer footer footer footer right2 right2 right2';
  grid-gap: 10px;
  grid-template-rows: 90px 1fr 80px;
  grid-template-columns: 20% 40% 15%;
  height: 50vh;
  
 max-width: 940px;
 min-width: 400px;
 margin-left: auto;
margin-right: auto;
 color: #fff;
 padding: 20px;
 border-radius: 15px;
box-shadow: 1px 2px 9px 1px rgba(0, 0, 0, 0.5);
}

.header { grid-area: header; 
padding: 20px;
background-color: #66CDAA;

}
.menu { grid-area: menu; 
padding: 20px;
background-color: #F5DEB3;

}
.main { grid-area: main; 
padding: 20px;
background-color: #FFF8DC;
}

.right1 { grid-area: right1;
padding: 20px;
background-color: #F5DEB3;
 }

.footer { grid-area: footer; 
padding: 20px;
background-color: #66CDAA;
}

.right2 { grid-area: right2; 
padding: 20px;
background-color: #66CDAA;
}


h1 {
margin: 0px;
padding: 0px;
font-size: 180%;
color: black;
font-family: 'Georgia', 'sans-serif';
text-align: center;
}

h2 { color: black;
font-size: 150%;
margin: 0px;
padding: 0px;
color: black
font-family:  'Georgia', 'Open Sans';
display: inline;
}

p { color: blue;
font-size: 100%;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', 'sans-serif';
}

p.red { color: red;
font-size: 100%;
text-align: center;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', 'sans-serif';
}

</style>
</head>
<body>

<h1>Grid Layout 3 col</h1>
<p class="red">
This grid layout contains 7 columns and three rows:</p>
<br><br>

<div class="grid-container">
  <div class="header"><h2>Header<h/2></div>
  <div class="menu"><h2>Menu</h2></div>
  
  <div class="main"><h2>Main</h2>
  <p>Grid layout 7 columns and three rows
  <br>grid-template-areas:<br>
    'header header header header header header header'<br>
    'menu main main main right1 right1 right1'<br>
    'menu footer footer footer right2 right2 right2';
  </p> 
  </div>  
  
  <div class="right1"><h2>Right</h2></div>
  <div class="footer"><h2>Footer</h2></div>
  <div class="right2"><h2>right 2</h2></div>
  
</div>

</body>
</html>

Report · Apr 04, 2021

Report · Apr 05, 2021

Remove the constraints that have been applied to the container

  height: 50vh;
  
 max-width: 940px;
 min-width: 400px;

Changing the grid template area to

            grid-template-areas:
                'header header header'
                'menu main right1'
                'footer footer footer';

and leaving the rest as is, results in

The reason why it does not extend to the width of the grid container is because the widthe of the columns do not add up to 100%.

Wappler, the only real Dreamweaver alternative.

Report · Apr 05, 2021

Dont waste time creating too many columns in a grid layout unless the layout is advanced and you have a very good understanding of grid. Most times a 3 column grid will be sufficient for the main structure then if you need to split an area like the footer into 4 columns use a nested grid in the footer.

Not sure why you are restricting the max-width to 940px - that's very narrow?

Try using the grid css below and adjust the percentage widths for the left and right columns to suit. You don't have to declare a specific percentage width for the centre column, just use 1fr unit, this will consume the available space left.

.grid-container {
display: grid;
grid-template-areas:
'header header header '
'menu main right1'
'footer footer right2';
grid-gap: 10px;
grid-template-rows: auto 1fr auto;
grid-template-columns: 20% 1fr 15%;
height: 100vh;

max-width: 1200px;
margin-left: auto;
margin-right: auto;
color: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 1px 2px 9px 1px rgba(0, 0, 0, 0.5);
}

Report · Apr 05, 2021

Max-width of 940px looks like a postage stamp on average laptop and desktop devices. And it's ridiculously tiny on 4K and 5K displays. For best results, use % widths.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grids - vertical &amp; horizontal centering</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>
body, html {
margin: 0;
height: 100%;
display: grid;
color: white;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}

main {
padding: 2%;
max-width: 940px;
text-align: center;
margin: auto;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<main>
<h2>940px</h2>
<h3>Welcome to CSS Grids!</h3>
<p>I'm vertically &amp; horizontally centered but I'm NOT responsive on large viewports.</p>
</main>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 06, 2021

An it's ridiculously tiny on 4K and 5K displays. For best results, use % widths

At this moment I dont see many developers/tutorials even addressing issues on a 4k/5k display, that's not to say they dont exist, it just means I think most developers are burying their heads in the sand - much as they have done with 'srcset', which has never really taken off in a big way.

Report · Apr 05, 2021

In defense of the OP, he has taken the example code from

https://www.w3schools.com/css/css_grid.asp

It is not their own code

Wappler, the only real Dreamweaver alternative.

Report · Apr 05, 2021

I understand. I just thought they should know what the code implications are if they plan to use it in production.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 05, 2021

perhaps tha instead of % vw will be more efficient , don't you think ?

https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units

Report · Apr 06, 2021

I think a beginner coming from pixel values needs to wrap their head around % widths first. It's easier to grasp. Later, as they gain more experience, they can venture into other values like viewports, fractions, ems, rems, etc...

We must crawl before we run.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 10, 2021

Thanks for all the help. I have most of next week off and will have more questions : )

Like how to have the columns cascade down when viewed in a cell phone with Header (Title) first and Menu second and the Main content next then the Right colunm then the Footer. My next project will be to add a menu with clickable rectangle buttons.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Grid Layout 3 col</title>

<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<style>

body { 
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
    }

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header'
    'menu main right1'
    'footer footer right2';
  grid-gap: 10px;
  grid-template-rows: 10% 1fr 10%;
  grid-template-columns: 20% 1fr 20%;

max-width: 60%;
min-width: 40%;
 margin-left: auto;
margin-right: auto;
margin-top: 10px;
 color: #fff;
background-color: #ffffff;
 padding: 2%;
 border-radius: 15px;
box-shadow: 1px 2px 9px 1px rgba(0, 0, 0, 0.5);

overflow-wrap: break-word;   
/* this will break a long word so it wraps to the next line */
}

.header { grid-area: header; 
background-color: #66CDAA;
padding: 15px;
}
.menu { grid-area: menu; 
padding: 15px;
background-color: #FFA07A;

}
.main { grid-area: main; 
padding: 15px;
background-color: #FFF8DC;

}

.right1 { grid-area: right1;
padding: 15px;
background-color: #FFA07A;

 }

.footer { grid-area: footer; 
padding-top: 15px;
padding-right: 15px;
padding-bottom: 30px;
padding-left: 15px;
background-color: #66CDAA;
height: auto;
}

.right2 { grid-area: right2; 
padding: 15px;
background-color: #66CDAA;

}


h1 {
margin: 0px;
padding: 0px;
 margin-left: 0px;
margin-right: 0px;
margin-top: 30px;
margin-right: 0px;
font-size: 180%;
color: black;
font-family: 'Georgia', 'sans-serif';
text-align: center;
}

h2 { color: black;
font-size: 150%;
margin: 0px;
padding: 0px;
color: black
font-family:  'Georgia', 'Open Sans';
display: inline;
}

p { color: blue;
font-size: 110%;
margin: 0px;
padding: 0px;
font-family: 'Open Sans', 'sans-serif';
}

p.red { color: red;
font-size: 100%;
font-weight: bold;
text-align: center;
margin: 0px;
padding: 0px
font-family: 'Open Sans', 'sans-serif';
}

</style>
</head>
<body>

<h1>Grid Layout 3 col</h1>
<p class="red">
This grid layout contains 3 columns and three rows:</p>
<br>

<div class="grid-container">
  <div class="header"><h2>Header<h/2></div>
  <div class="menu"><h2>Menu</h2></div>
  
  <div class="main"><h2>Main</h2>
  <p>Grid layout 3 columns and three rows
  <br>grid-template-areas:<br>
    'header header header'<br>
    'menu main right1'<br>
    'footer footer right2'; </br></br>
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> 
  </div>  
  
  <div class="right1"><h2>Right 1</h2></div>
  <div class="footer"><h2>Footer</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>
</div>
  <div class="right2"><h2>Right 2</h2>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
  
</div>

</body>
</html>

Report · Apr 10, 2021

CSS order

https://developer.mozilla.org/en-US/docs/Web/CSS/order

Flexbox order.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Apr 10, 2021

I would start designing for small screens first, i.e. single column. Then I would use media queries to change the design rules (layout) for larger screen sizes.

Wappler, the only real Dreamweaver alternative.

Report · Apr 11, 2021

Like how to have the columns cascade down when viewed in a cell phone with Header (Title) first and Menu second and the Main content next then the Right colunm then the Footer.

Use Media Queries to re-arrange the grid areas for smaller screen devices. Example below, insert after your main 'grid-container' css selector:

@media screen and (max-width: 768px) {
.grid-container {
grid-template-areas:
'header'
'menu'
'main'
'right1'
'footer'
'right2';
grid-template-rows: auto;
grid-template-columns: 1fr;
max-width: 90%;
}
}