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.
Related
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>
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 1 year ago.
I have a little problem. I'm trying to program such a layout with HTML and CSS:
Here's the picture of what i want
I looked at this question:
Flexbox 3 divs, two columns, one with two rows . The only problem is that you can't give the divs a margin without them destroying the layout.
If the left image is higher, then the two right images should use the remaining space. (There are only a few boxes that I tried to place correctly first. I wanted to do the styling privately, so do not wonder.)
Here is my code what I have tried so far (Press full page. In this little window you can only see the mobile version):
* {
margin: 0;
padding: 0;
}
#showroom {
height: 500px;
width: 100%;
background: red; /* To see showroom Background */
padding: 1em;
display: flex;
}
#boxOne {
height: 100%;
width: 50%;
background: grey;
margin: 10px;
float: left;
}
#showroom #boxTwo {
width: 50%;
height: 50%;
background: grey;
margin: 10px;
}
#showroom #boxThree {
width: 50%;
height: 50%;
background: grey;
margin: 10px;
}
#media only screen and (max-width: 750px) {
#showroom {
display: flex;
align-items: center;
flex-direction: column;
}
#showroom #boxOne, #showroom #boxTwo, #showroom #boxThree {
height: 33.3%;
width: 100%;
}
}
<div id="showroom">
<div id="boxOne"></div>
<div id="boxTwo"></div>
<div id="boxThree"></div>
</div>
Update
To make the #boxOne wider, we should look at the grid parent, which we are saying is 3 columns wide, with each column representing 120px.
Now let's look at #boxOne for a second, and catch/fix an error I introduced.
#boxOne {
grid-column: 1; /* Oops—this is wrong */
grid-row: 1 / 3;
}
We declared the grid to be 3 columns, yet #boxOne is only spanning a single column. The other boxes are also spanning a single column. Here's what our grid looks like now.
You can see that we're not even using that third column. Let's adjust #boxOne to span twice as wide as the other boxes. One really important detail is to count from the first vertical line. Think of the column like this:
Now it should be clear what we need to do.
#boxOne {
grid-column: 1 / 3;
…
}
The other boxes we'll place at the span place where #boxOne left off.
#boxTwo {
grid-column: 3;
…
}
#boxThree {
grid-column: 3;
…
}
Now things are looking the way we want.
I would approach this using CSS Grid. In your example, the images would implicitly take up the necessary space, and you wouldn't need to use px values in the line declaring grid-template-columns. In your case, you could replace 120px with 1fr which is a fractional unit utilized by CSS Grid.
Another advantage of using CSS Grid is that you can avoid a lot of additional width and height settings, as well as using margins for the gaps between items.
#showroom {
display: grid;
grid-template-columns: repeat(3, 120px);
gap: 1rem;
}
#boxOne {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
#boxTwo {
grid-column: 3;
grid-row: 1 / 2;
}
#boxThree {
grid-column: 3;
grid-row: 2 / 3;
}
#showroom > * {
background-color: #444;
padding: 20px;
border-radius: 5px;
}
<div id="showroom">
<div id="boxOne"></div>
<div id="boxTwo"></div>
<div id="boxThree"></div>
</div>
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>
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.