I am currently working on a grid layout with something like that:
But the content is overflowing so my whole grid would always resize. But I want the sidebar and header to be fixed so that only the content is scrollable. This works if I give the content a fixed height, but I am not quite sure how I give it the remaining height after the header (the header doesn't have a fixed height because of word-breaks on mobile).
So I need something like the header being "fit-conent" and the content "take-remaining-screen-space".
Thanks in advance.
You can make the body overflow hidden, and content overflow-y auto (or scroll). With given size for left and top
body {
margin: 0;
padding: 0;
overflow: hidden;
}
#grid {
display: grid;
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
gap: 10px;
width: 100vw;
height: 100vh;
}
#div1 {
grid-area: 1 / 1 / 2 / 4;
background-color: rgba(114, 248, 30, 0.5);
}
#div2 {
grid-area: 2 / 1 / 4 / 2;
background-color: rgba(154, 237, 192, 0.5);
}
#div3 {
grid-area: 2 / 2 / 4 / 4;
background-color: rgba(91, 183, 194, 0.5);
overflow-y: auto;
}
<div id="grid">
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</div>
Related
Recently I have started learning CSS Grid. I am currently working on a landing-page section that consists of 6 rows and 9 columns. I have two elements that should fill out this section.
What have I tried to fix the issue:
I googled the issue and read about functionality such as "3 / span 2" to choose a starting position.
I tried the grid-column-start method, starting from Auto, 0 and 1.
My HTML
<div class="landing-page">
<div class="container">
<div class="landing-page-item image">Image</div>
<div class="landing-page-item text">Text Here</div>
</div>
</div>
My SCSS
.landing-page {
height: 100vh;
width: 100vw;
background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);
box-shadow: 0 12px 21px #7889b6;
.container {
padding-top: 100px;
display: grid;
height: 100%;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: repeat(9, 1fr);
grid-column-start: 1;
}
}
.landing-page-item {
display: flex;
justify-content: center;
align-items: center;
&.image {
grid-row: span 4;
grid-column: span 2;
background-color: green;
}
&.text {
grid-row: span 4;
grid-column: span 6;
background-color: red;
}
}
What I expected to happen:
Image start at the most top-left grid and fills out 2 columns and 4 rows.
Text starts right next to the Image and fills out 6 columns and 4 rows.
What actually happens:
The image fills out two columns to display the error in a clearer way. What have I done wrong?
I looked at what outside sources could interfere with it. It turns out that clearfix.less:14 added a css attribute: content: " "; This is seemingly done to provide a Clearfix. I renamed my container to main-content and the issue was solved.
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 2 years ago.
I am pretty new to Web development and I am trying to learn CSS grids. While learning the CSS grid I tried to make one simple layout. It has one header section, one menu section, one sidebar section, and one footer section.
I used auto while defining grid template rows for the 2nd row, and gave conatiner height as 100%, so that 2nd row will stretch fully in the remaining space left by row 1 and 2.
But it didn't work that way, i am trying to figure out why 2nd row is not stretching vertically in the remaning space left.
Here is the conatiner css in which i defined the 2nd row as auto and conatiner height as 100%.
.container {
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px auto 40px;
}
fiddle link:
https://jsfiddle.net/791vtd4z/
That is because you did not give body a fixed height, yet you have .container a relative height: therefore, when the child .container simply stretches to its content height and not any further, since there's nothing absolute to compare against by using 100% (ask yourself: "100% of what?").
A solution will be to set .container { min-height: 100vh; } to fix that, which tells the element to at least be as tall as the viewport, and allow it to grow should the content inside menu or sidebar grow beyond what the viewport can contain.
* {
margin: 0;
top: 0;
bottom: 0;
font-family: sans-serif;
font-size: 1.2em;
}
title {
display: none;
}
.container {
min-height: 100vh;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px auto 40px;
}
.Header {
background-color: beige;
grid-column: 1/-1;
}
.Menu {
background-color: red;
}
.Sidebar {
background-color: burlywood;
grid-column: 2/-1;
}
.Footer {
background-color: aquamarine;
grid-column: 1/-1;
}
<div class="container">
<div class="Header">Header</div>
<div class="Menu">Menu</div>
<div class="Sidebar">Sidebar</div>
<div class="Footer">Footer</div>
</div>
To build on Terry's answer, you can achieve your desired result by giving body a height of 100vh, you could change the height of .container to 100vh, or you could give html and body a height of 100% (and keep the 100% height of .container).
This is because 100vh gives an element the full height of the viewport regardless of the height of its parents, while setting an element's full height using a percentage (i.e. 100%) means the element takes the full height of its parent, whatever that is. So an element with a height of 100% could still be zero, if its parent has no height.
To put this another way, when setting an element's height to 100% all of its parents need to be 100% as well for that element to take up the full viewport.
html, body{
height: 100%;
}
* {
margin: 0;
top: 0;
bottom: 0;
font-family: sans-serif;
font-size: 1.2em;
}
title {
display: none;
}
.container {
height: 100%;
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 40px auto 40px;
}
.Header {
background-color: beige;
grid-column: 1/-1;
}
.Menu {
background-color: red;
}
.Sidebar {
background-color: burlywood;
grid-column: 2/-1;
}
.Footer {
background-color: aquamarine;
grid-column: 1/-1;
}
<div class="container">
<div class="Header">Header</div>
<div class="Menu">Menu</div>
<div class="Sidebar">Sidebar</div>
<div class="Footer">Footer</div>
</div>
So I have this basic setup - a canvas area and an animator in a parent grid.
The parent grid is also inside another grid with one 1fr row.
I can resize the animator by dragging a resizer up and down.
canvas {
background-color: blue;
}
#grid1 {
grid-template-rows: 1fr;
}
#grid2 {
background-color: black;
display: grid;
grid-template-rows: 1fr auto;
overflow: hidden;
}
#canvas-area {
grid-row: 1;
background-color: red;
}
#animator {
grid-row: 2;
height: 200px;
}
<div id="grid1">
<div id="grid2">
<div id="canvas-area">
<canvas/>
</div>
<div id="animator"></div>
</div>
</div>
I want the canvas to be bigger than its parent and hide its overflow, but that seems to also expand the parent element.
I've already tried overflow: hidden, but that doesn't work
As a side question: I also noticed that there is a space of 4px under the canvas, why is that?
I want the canvas to be bigger than its parent and hide its overflow, but that seems to also expand the parent element.
Normally you'd add a height to the grid container so that the the 1fr in the grid-template-rows: 1fr auto is meaningful; otherwise the grid item auto-adjusts to the dimensions of its contents.
Add overflow: hidden to the grid item #canvas-area along with a fixed height to the container (say 400px as your previous jsFiddle had) - see demo below:
document.querySelector('button').onclick = () => {
document.querySelector('canvas').height = 300;
}
canvas {
background-color: blue;
}
#grid {
background-color: black;
display: grid;
grid-template-rows: 1fr auto;
width: 400px;
height: 400px; /* added a fixed height */
}
#canvas-area {
grid-row: 1;
background-color: red;
overflow: hidden; /* added */
}
#animator {
grid-row: 2;
height: 200px;
}
<div id="grid">
<div id="canvas-area">
<canvas/>
</div>
<div id="animator"></div>
</div>
<button>Change Canvas Height</button>
Note that adding min-height: 0 also does not grow the container:
document.querySelector('button').onclick = () => {
document.querySelector('canvas').height = 300;
}
canvas {
background-color: blue;
}
#grid {
background-color: black;
display: grid;
grid-template-rows: 1fr auto;
width: 400px;
height: 400px;
}
#canvas-area {
grid-row: 1;
background-color: red;
min-height: 0; /* added */
}
#animator {
grid-row: 2;
height: 200px;
}
<div id="grid">
<div id="canvas-area">
<canvas/>
</div>
<div id="animator"></div>
</div>
<button>Change Canvas Height</button>
Why so?
By default grid items have min-width: auto and min-height: auto (just like flex items). You can see some examples of of this behaviour below:
css-grid creates an imaginary column
How to make images stay within the rows of a css grid container?
and from the specs:
To provide a more reasonable default minimum size for grid items, this
specification defines that the auto value of min-width/min-height also
applies an automatic minimum size in the specified axis to grid items
whose overflow is visible and which span at least one track whose min
track sizing function is auto.
W3C
Space below canvas element?
I also noticed that there is a space of 4px under the canvas, why is that?
That is the whitespace, a characteristic of inline elements - you can remove that by making it a block element (add display: block) or adjusting vertical-align property (add vertical-align: top):
document.querySelector('button').onclick = () => {
document.querySelector('canvas').height = 300;
}
canvas {
background-color: blue;
display: block; /* added */
}
#grid {
background-color: black;
display: grid;
grid-template-rows: 1fr auto;
width: 400px;
height: 400px;
}
#canvas-area {
grid-row: 1;
background-color: red;
min-height: 0; /* added */
overflow: auto; /* added */
}
#animator {
grid-row: 2;
height: 200px;
}
<div id="grid">
<div id="canvas-area">
<canvas/>
</div>
<div id="animator"></div>
</div>
<button>Change Canvas Height</button>
In the below snippet, I can not understand how .cell1(orange) height has been computed. Why it is so high? Why it is higher than right column content? How left cells height depends on right column and it's contains height?
header {
display: grid;
grid-template-columns: 70% 30%;
grid-template-rows: 62px auto;
background: beige;
}
.cell1 {
grid-column: 1/2;
grid-row: 1/2;
background: salmon;
}
.cell2 {
grid-column: 1/2;
grid-row: 2/3;
background: MediumSpringGreen;
}
.cell3 {
grid-row: 1/3;
grid-column: 2/3;
background: PeachPuff;
}
.cell3-1 {
background: MediumPurple;
height: 5px;
}
.cell3-2 {
background: LightSkyBlue;
height: 10px;
}
.cell3-3 {
background: Navy;
height: 30px;
}
<header>
<div class="cell1">1</div>
<div class="cell2">2</div>
<div class="cell3">
<div class="cell3-1"></div>
<div class="cell3-2"></div>
<div class="cell3-3"></div>
</div>
</header>
Let's start with your title.
How css grid computes row auto height?
auto just means it adapts to the height of the content within it. If the content in an auto row, is 100px tall, the row will be 100px tall.
I can not understand how .cell1(orange) height has been computed. Why it is so high?
Because you have told the first row to be 62px tall here:
grid-template-rows: 62px auto;
Why it is higher than right column content?
It isn't...but I can see that you might think that.
How left cells height depends on right column and it's contains height?
The right content in the context of the grid is only the .cell-3 div but you have told div to span 2 rows. So it assumes the combined height of .cell- and .cell-2.
The content inside cell-3 does not inherit any of the grid properties and so flows as normal.
One of the main selling points of the CSS grid is that it eliminates container DIVs.
But I found a very common layout in which this doesn't appear to be true.
This page is supposed to have 4 areas: header, side, main and footer. But notice that side and main have a different background, so how is this possible to achieve with CSS grid without creating a container element for side and main, and turning the grid into header, side+main, footer?
You need to think of this in terms of a 4-column grid...then assign your divs to the appropriate rows & columns.
The background can be managed by a pseudo-element on the body although I prefer a page containing div. Same effect.
Codepen Demo
Nore info: Breaking Out With CSS Grid Layout
.page {
display: grid;
min-height: 100vh;
grid-template-columns: 1fr 100px 300px 1fr;
grid-template-rows: min-content 1fr min-content;
grid-gap: .5em;
}
.page::before {
content: "";
grid-column: 1 / 5;
grid-row: 2 / 3;
z-index: -2;
background: pink;
}
header {
background: red;
padding: 1em 0
}
footer {
background: blue;
padding: 1em 0;
}
aside {
background: green;
}
main {
background: rebeccapurple;
}
header,
footer {
grid-column: 2 / 4;
}
aside {
grid-column: 2 / 3;
grid-row: 2;
}
main {
grid-column: 3 / 4;
grid-row: 2;
}
<div class="page">
<header>HEADER-CONTENT</header>
<aside></aside>
<main></main>
<footer>FOOTER CONTENT</footer>
</div>
In this case I substituted different widths for demo purposes...
grid-template-columns: 1fr 100px 300px 1fr;
for say
grid-template-columns: 1fr 300px 640px 1fr;
Where the total of 300px + 640px equates to your 940px "container" width. These can be adjusted as you prefer.