Inspiring

Question

Grid layout and text centering

Forum|Forum|4 years ago
April 5, 2021
2 replies
1405 views

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>

This topic has been closed for replies.

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Nancy OShea

Community Expert

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

BenPleysier

Community Expert

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 is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

davidhelpAuthor

Inspiring

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>

Nancy OShea

Community Expert

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded