• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Grid layout and text centering

Contributor ,
Apr 04, 2021 Apr 04, 2021

Copy link to clipboard

Copied

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>

 

 

Views

631

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 04, 2021 Apr 04, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 04, 2021 Apr 04, 2021

Copy link to clipboard

Copied

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>

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 04, 2021 Apr 04, 2021

Copy link to clipboard

Copied

 

 

grid overflow.jpg

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

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

BenPleysier_0-1617606172967.png

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

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);
}

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

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. 

 

image.png

 

<!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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 06, 2021 Apr 06, 2021

Copy link to clipboard

Copied

    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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 05, 2021 Apr 05, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 06, 2021 Apr 06, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 10, 2021 Apr 10, 2021

Copy link to clipboard

Copied

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>

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 10, 2021 Apr 10, 2021

Copy link to clipboard

Copied

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
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 10, 2021 Apr 10, 2021

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Apr 11, 2021 Apr 11, 2021

Copy link to clipboard

Copied

LATEST
quote

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%;
}
}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines