I'm wondering how css grids can make use of max-widths. In the old way, you'd use a container with wrapper class that'd set the margins.
With CSS grids, depending on how you create them, you no longer need to use containers and sometimes you have no where to add one.
I want the header to be full width, but I want the nav within it to have a max width of 80% of the screen's resolution and margin auto it, this code is similar to the way one would have done it with a wrapping container. The question is, how do I do the same with aside and main as they are not inside of a parent to set a max width with?
body {
display: grid;
grid-template-areas:
"header header"
"aside main";
grid-template-columns: 275px 1fr;
grid-template-rows: 1fr 1fr;
}
header {
grid-area: header;
border: solid 1px black;
}
header > nav {
max-width: 80%;
margin: auto;
border: solid 1px blue;
}
aside {
grid-area: aside;
}
main {
grid-area: main;
}
HTML
<html>
<body>
<header>
<nav>nav</nav>
</header>
<aside>aside</aside>
<main>main</main>
</body>
</html>
If I have to wrap them inside of a container, how will that affect the grid? If I set the max width on the html or body tag then how would I get a header that stretches the full width of the browser?
https://jsfiddle.net/6zd3o088/6/
Think of this as a FOUR column grid of
grid-template-columns: 10% 275px 1fr 10%;
Then assign your elements per the revised grid-areas
grid-template-areas:
"header header header header"
". aside main .";
body {
display: grid;
grid-template-areas: "header header header header" ". aside main .";
grid-template-columns: 10% 275px 1fr 10%;
grid-template-rows: 1fr 1fr;
margin: 0;
padding: 0;
background: lightgrey;
}
header {
grid-area: header;
background:rebeccapurple;
}
header>nav {
max-width: 80%;
margin: auto;
background: lightblue;
}
aside {
grid-area: aside;
background: lightgreen;
}
main {
grid-area: main;
background: pink;
}
<header>
<nav>nav</nav>
</header>
<aside>aside</aside>
<main>main</main>
To use a max-width with the nav respecting the value we have to take the nav out of the header so it becomes a grid-item. Then we can align it on the grid over the header.
Using minmax for inner columns we can achieve the desired result
body {
display: grid;
grid-template-columns: 1fr minmax(auto, 100px) minmax(auto, 300px) 1fr;
grid-template-rows: 1fr 1fr;
margin: 0;
padding: 0;
background: lightgrey;
}
header {
grid-column: 1/-1;
grid-row: 1;
background: rebeccapurple;
}
nav {
grid-column: 2 / 4;
grid-row: 1;
background: lightblue;
}
aside {
grid-column: 2;
background: lightgreen;
}
main {
grid-column: 3;
background: pink;
}
<header></header>
<nav>nav</nav>
<aside>aside</aside>
<main>main</main>
Demo'd here using smaller column width for reference only. Amend the max figures as desired.
Codepen
Related
I've got little styling issues with a simple grid layout, containing a sidebar (aside) and some main content.
<body>
<header>Header</header>
<nav>Navigation Links</nav>
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</body>
On some pages there is no aside included in my html:
<body>
<header>Header</header>
<nav>Navigation Links</nav>
<main>Some main content</main>
<footer>Footer</footer>
</body>
Here is my code
body {
height: 100%;
display: grid;
/* mobile layout */
grid-template: auto auto auto 1fr auto / 1fr;
grid-template-areas:
"header"
"nav"
"aside"
"main"
"footer";
}
header {
background-color: blue;
grid-area: header;
}
nav {
background-color: aquamarine;
grid-area: nav;
}
aside {
background-color: green;
grid-area: aside;
}
main {
background-color: yellow;
grid-area: main;
}
footer {
background-color: orange;
grid-area: footer;
}
/* desktop layout */
#media (min-width: 768px) {
body {
grid-template: auto auto 1fr auto / minmax(300px, 25%) 1fr;
grid-template-areas:
"header header"
"nav nav"
"aside main"
"footer footer";
}
}
<body>
<header>Header</header>
<nav>Navigation Links</nav>
<!-- if aside is deleted main should strech whole space-->
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</body>
If the sidebar is displayed, it should have a minimum width of 300px. If sidebar is not displayed main content should take the whole width. However its not possible, its still taking only 75% of the width (25% are max for aside).
Some solutions i thought about:
If no aside is displayed, I could adjust grid-template to use only one grid column:
grid-template: auto auto auto 1fr auto / 1fr;
However, I do not know how accomplish this with CSS. :has selector is still working draft.
Set width for first grid column to 0.
grid-template: auto auto 1fr auto / 0 1fr;
However, how can I override this setting if aside is displayed?
Thanks for your help!
Define the width inside the aside element and keep auto in the template. Since you are dealing with a full width/height grid, you can consider the use of 25vw instead of 25%.
You have to aslo consider the mobile layout and correctly place both main and footer
body {
height: 100vh;
margin: 0;
display: grid;
grid-template: auto auto auto 1fr auto / 1fr;
}
header { background-color: blue;}
nav { background-color: aquamarine;}
aside { background-color: green;}
main { background-color: yellow;grid-row:4}
footer { background-color: orange;grid-row:5}
/* desktop layout */
#media (min-width: 768px) {
body {
grid-template: auto auto 1fr auto / auto 1fr;
grid-template-areas: "header header" "nav nav" "aside main" "footer footer";
}
aside {
width: min(300px, 25vw);
}
header { grid-area: header;}
nav { grid-area: nav; }
aside { grid-area: aside;}
main { grid-area: main;}
footer {grid-area: footer;}
}
<body>
<header>Header</header>
<nav>Navigation Links</nav>
<!-- if aside is deleted main should strech whole space-->
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</body>
Use fit-content() and specify a min-width for aside:
body {
margin: 0;
min-height: 100vh;
}
.grid {
height: 100vh;
display: grid;
/* mobile layout */
grid-template-columns: 1fr;
grid-template-rows: repeat(3, auto) 1fr auto;
grid-template-areas:
"header"
"nav"
"aside"
"main"
"footer";
}
header {
background-color: blue;
grid-area: header;
}
nav {
background-color: aquamarine;
grid-area: nav;
}
aside {
background-color: green;
grid-area: aside;
min-width: 300px;
}
main {
background-color: yellow;
grid-area: main;
}
footer {
background-color: orange;
grid-area: footer;
}
/* desktop layout */
#media (min-width: 768px) {
.grid {
grid-template-columns: fit-content(300px) 1fr;
grid-template-rows: repeat(2, auto) 1fr auto;
grid-template-areas:
"header header"
"nav nav"
"aside main"
"footer footer";
}
}
<div class="grid">
<header>Header</header>
<nav>Navigation Links</nav>
<!-- if aside is deleted main should strech whole space-->
<aside>Sidebar</aside>
<main>Some main content</main>
<footer>Footer</footer>
</div>
<div class="grid">
<header>Header</header>
<nav>Navigation Links</nav>
<main>Some main content</main>
<footer>Footer</footer>
</div>
In the attached snippet, the "header" section of the grid has text that is aligned to the left. How can I go about adding additional text that is aligned to the far right section of the grid? Also, I am wondering how to go about centering the text vertically, as it currently is above the middle. I have tried adding another div and using justify-content and align-items, but nothing I have tried so far has worked. Would appreciate any help. Thank you.
body {
display: grid;
grid-template-areas: "header header header" "nav article ads" "nav footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header,
footer,
article,
nav,
div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas: "header" "article" "ads" "nav" "footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
<header id="pageHeader">Header</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
You can create left and right <div> elements inside your header, then give the header the following styles:
#pageHeader {
display: flex;
align-items: center; /*center children*/
justify-content: space-between; /*separate children*/
}
See the example snippet below:
body {
display: grid;
grid-template-areas: "header header header" "nav article ads" "nav footer footer";
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header,
footer,
article,
nav,
div {
padding: 1.2em;
background: gold;
}
#pageHeader {
grid-area: header;
display: flex;
align-items: center;
justify-content: space-between;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas: "header" "article" "ads" "nav" "footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
<!doctype html>
<title>CSS Grid Template 1</title>
<link rel="stylesheet" href="style.css">
<body>
<header id="pageHeader">
<div class="left">Header left</div>
<div class="right">Header right</div>
</header>
<article id="mainArticle">Article</article>
<nav id="mainNav">Nav</nav>
<div id="siteAds">Ads</div>
<footer id="pageFooter">Footer</footer>
</body>
Make the header element a flex container and then use
justify-content: space-between;
to align "Header" text on the left side and the additional text on the right side.
To vertically center the contents of the header, use
align-items: center;
You need to change the HTML structure of of header element as shown below:
<header id="pageHeader">
<span>Header</span>
<span>I will be on right side</span>
</header>
and the CSS to get the desired layout:
header {
display: flex;
justify-content: space-between;
align-items: center;
}
Output:
The red sidebar in this page needs to be 100% of the container height:
body {
display: grid;
min-height: 85vh;
grid-template-columns: auto 10fr 4fr;
grid-template-rows: minmax(1rem, max-content) 1fr minmax(1rem, max-content);
grid-template-areas: "header header aside" "main main aside" "footer footer footer";
}
header {
grid-area: header;
background: pink;
}
footer {
grid-area: footer;
background: blue;
}
main {
grid-area: main;
background: green;
}
aside {
grid-area: aside;
background: red;
height: 100px;
overflow-y: scroll;
}
<header> header </header>
<main>main</main>
<aside>
aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>
</aside>
<footer> footer </footer>
Can this be achieved without adding another inner element with 100% height absolute position ?
note that I added 100px height to it just to point out that it needs to be scrollable. But I want the height to be 100% of container...
Use min-height: 100%;height:0; to avoid the height of the aside affecting the layout then force it to be 100% height at the same time (height of its track defined by the other content)
body {
display: grid;
min-height: 85vh;
grid-template-columns: auto 10fr 4fr;
grid-template-rows:
minmax(1rem, max-content) 1fr minmax(1rem, max-content);
grid-template-areas:
"header header aside"
"main main aside"
"footer footer footer";
}
header {
grid-area: header;
background: pink;
}
footer {
grid-area: footer;
background: blue;
}
main {
grid-area: main;
background: green;
}
aside {
grid-area: aside;
background: red;
min-height: 100%;
height:0;
overflow-y: scroll;
}
<header> header </header>
<main>main</main>
<aside>
aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>
</aside>
<footer> footer </footer>
You can add the exact height that uses on the grid container and then add overflow-y: scroll
body {
display: grid;
min-height: 75vh;
grid-template-columns: auto 10fr 4fr;
grid-template-rows: minmax(1rem, max-content) 1fr minmax(1rem, max-content);
grid-template-areas: "header header aside" "main main aside" "footer footer footer";
}
header {
grid-area: header;
background: pink;
}
footer {
grid-area: footer;
background: blue;
}
main {
grid-area: main;
background: green;
}
aside {
height: 100%;
grid-area: aside;
background: red;
max-height: 75vh;
overflow-y: scroll;
z-index: 1;
}
<header> header </header>
<main>main</main>
<aside>
aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>aside<br>
</aside>
<footer> footer </footer>
Consider the following 3-column grid layout with max-width constraint on container:
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 56px minmax(56px, auto) 56px;
max-width: 300px;
margin: auto;
}
header {
background-color: grey;
grid-column: 1 / span 3;
grid-row: 1 / 2;
}
main {
background-color: #2E64FE;
grid-column: 1 / span 2;
grid-row: 2 / 3;
}
aside {
background-color: #FF0040;
grid-column: 3 / span 1;
grid-row: 2 / 3;
}
footer {
background-color: grey;
grid-column: 1 / span 3;
grid-row: 3 / 4;
}
header, main, aside, footer {
line-height: 56px;
text-align: center;
vertical-align: middle;
}
<html>
<body>
<div class='container'>
<header>Header</header>
<main>Main</main>
<aside>Sidebar</aside>
<footer>Footer </footer>
</div>
</body>
</html>
Ideally, I would like to bleed background of header and footer outside the container when viewport width is above max-width, but keep grid and its structure within max-width as in example (including inner content of header and footer).
I have considered these approaches:
Forget max-width container, use full width container with minmax'es and position full-span divs with background-color underneath header and footer(https://codepen.io/anon/pen/OaryXj). I don't like this approach because it adds extra elements purely for styling and because it adds two extra columns (I can live with this one probably, using named columns)
Use same approach as above, but instead of adding extra divs, use full-span header and footer with "padding: 0 calc((100% - 900px)/2);" (https://codepen.io/anon/pen/BGvoxx). I don't like this approach either, because I don't understand why it works at all when 100% < 900px (why negative padding is not added) and it adds two extra columns to the grid as well.
Any other ideas? Some calc() magic with negative margins and padding on header / footer?
if it's only about background and coloration you can use pseudo element to have the overflow effect:
body {
overflow-x:hidden;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 56px minmax(56px, auto) 56px;
max-width: 300px;
margin: auto;
}
header {
background-color: grey;
grid-column: 1 / span 3;
grid-row: 1 / 2;
position:relative;
}
header:before,
footer:before{
content:"";
z-index:-1;
position:absolute;
top:0;
bottom:0;
left:-100vw;
right:-100vw;
background:inherit;
}
main {
background-color: #2E64FE;
grid-column: 1 / span 2;
grid-row: 2 / 3;
}
aside {
background-color: #FF0040;
grid-column: 3 / span 1;
grid-row: 2 / 3;
}
footer {
background-color: grey;
grid-column: 1 / span 3;
grid-row: 3 / 4;
position:relative;
}
header, main, aside, footer {
line-height: 56px;
text-align: center;
vertical-align: middle;
}
<html>
<body>
<div class='container'>
<header>Header</header>
<main>Main</main>
<aside>Sidebar</aside>
<footer>Footer </footer>
</div>
</body>
</html>
the accepted answer is amazing, but you can solve your problem by changing your markup a little bit. by changing the order of your divs and splitting the concerns of your container class with that of the grid you get the same result:
body {
margin: 0;
overflow-x:hidden;
}
.container {
max-width: 300px;
margin: auto;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(56px, auto);
}
header, footer {
background-color: grey;
height: 56px;
}
main {
background-color: #2E64FE;
grid-column: 1 / span 2;
}
aside {
background-color: #FF0040;
grid-column: 3 / span 1;
}
header, main, aside, footer {
line-height: 56px;
text-align: center;
vertical-align: middle;
}
<html>
<body>
<header>
<div class="container">Header</div>
</header>
<div class="container grid">
<main>Main</main>
<aside>Sidebar</aside>
</div>
<footer>
<div class="container">Footer</div>
</footer>
</body>
</html>
the use-case where I see the accepted answer really shine is when you have multiple columns and you don't want to break the grid but extend the background color of one of the columns to the edges of the browser...
body {
overflow-x:hidden;
margin: 0;
}
.container {
max-width: 300px;
margin: auto;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: minmax(56px, auto);
}
header, footer {
background-color: grey;
height: 56px;
}
aside {
background-color: #FF0040;
grid-column: 1 / span 1;
}
main {
background-color: #2E64FE;
grid-column: 2 / span 2;
}
.extend-right {
position: relative;
}
.extend-right:after {
content: '';
position: absolute;
height: 100%;
left: 100%;
right: -100vw;
background-color: inherit;
}
header, main, aside, footer {
line-height: 56px;
text-align: center;
vertical-align: middle;
}
<html>
<body>
<header>
<div class="container">Header</div>
</header>
<div class="container grid">
<aside>Sidebar</aside>
<main class="extend-right">Main</main>
</div>
<footer>
<div class="container">Footer</div>
</footer>
</body>
</html>
I have been having some trouble getting CSS Grid to work properly with my React App. When I use grid-template-columns: 1fr 3fr 1fr;, one of the 1fr columns is much smaller than the other (so the space on the right is much smaller than the space created on the left in comparison to the middle column). Is there any particular reason why this would be? Here is the rest of my CSS:
#main-body {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-auto-rows: 100px;
background-color: white;
}
#main-header {
color: white;
background-color: darkcyan;
grid-column-start: 2;
grid-row-start: 1;
text-align: center;
display: inline;
}
#quote-render-block {
text-align: center;
background-color: orange;
grid-column: 2;
grid-row-start: 2;
}
There may be another child react component apart from the main-body or some styling for the parent component that is creating the issue. You can view a codepen of your code here: https://codepen.io/sakettawde/pen/yxvoxM
HTML:
<div class="main-body">
<div class="main-header">
</div>
<div class="quote-render-block">
</div>
</div>
CSS:
.main-body {
display: grid;
grid-template-columns: 1fr 3fr 1fr;
grid-auto-rows: 100px;
background-color: white;
}
.main-header {
color: white;
background-color: darkcyan;
grid-column-start: 2;
grid-row-start: 1;
text-align: center;
display: inline;
}
.quote-render-block {
text-align: center;
background-color: orange;
grid-column: 2;
grid-row-start: 2;
}
It is possible that a parent element has a "padding-right" CSS attribute that is shifting the contents of the screen.