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.
Related
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>
I need to have a grid be centered while taking up the whole area.
the code I have currently:
//CSS
* {
box-sizing: border-box;
}
.grid-container {
display: grid;
background-color: rgba(0,0,0,0);
grid-template-columns: repeat(10,auto);
grid-template-rows: repeat(10,10%);
align-items: center;
justify-content: center;
width: 100%
height: 100%
}
.scramble {
background-color: #ffffff;
font-size: 30;
text-align: center;
grid-column: 1 / span 10;
}
.timer {
background-color: #ff0000;
font-size: 30;
text-align: center;
grid-column: 2 / span 7;
grid-row: 3 / span 4;
}
.times {
background-color: #00ff00;
font-size: 30;
text-align: center;
grid-column: 9 / span 2;
grid-row: 2 / span 9
}
<!--HTML-->
<div class="grid-container">
<div class="scramble">...</div>
<div class="timer" id="time">1</div>
<div class="times">1</div>
</div>
As I said, I need it to be centered both vertically and horizontally while taking up the full box.
Edit: also if it wasn't apparent I'm making a Rubik's Cube scramble generator and timer.
I am not an expert on grid layout, but since no one is answering, I'll give it a try. The only way to make it cover 100% height seems to be to put <div class="grid-container"> inside a div and then give .grid-container position: absolute.
Also, you forgot semicolons at the end of width: 100% and height: 100% for .grid-container.
To make it the entire width you need to turn off justify-content too. Also what do you mean by centering? If you make it a 10 by 10 grid, then the center is between the middle 2 cells, and not inside any grid cell. And if something takes up an entire area, then it is centered by default?
My 2 cents.
I am trying to create this effect through code:
Right now I am duplicating the text on top,'masking' it, and setting it to white, but It's becoming pretty complex and hard to control/position consistently. I'm wondering if there's a simple way to do this with a single text element and css (mix-blend-mode, filter, etc...)
I saw this on css-tricks, but it's not exactly what I want. I need the text over the image to be completely white, and the text outside to be a different color. https://css-tricks.com/methods-contrasting-text-backgrounds/
My codepen: https://codepen.io/aalokt89/pen/eamrJM
HTML:
<div class="container">
<div class="image-block">
<div class="intro-heading">
<h1 class="intro-heading">Professional Makeup Artist & Hair Stylist</h1>
</div>
</div>
</div>
CSS:
.container {
display: grid;
grid-template-columns: repeat(4, 100px) 400px;
grid-template-rows: repeat(4, 100px)
}
.image-block {
grid-column: 1 / 5;
grid-row: 1 / 5;
background: url('https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80')100%/ cover;
}
.intro-heading {
background: inherit;
height: inherit;
width: 600px;
-webkit-background-clip: text;
background-clip: text;
filter: invert(1) grayscale(1) contrast(9);
color: transparent;
/* grid-column: 2 / 6;
grid-row: 1 / 5; */
display: flex;
align-items: center;
}
For this particular case and since the width of the image is fixed, you can consider a simple gradient coloration for the text:
.container {
display: grid;
grid-template-columns: repeat(4, 100px) 400px;
grid-template-rows: repeat(4, 100px)
}
.image-block {
grid-column: 1 / 5;
grid-row: 1 / 5;
background: url('https://images.unsplash.com/photo-1542103749-8ef59b94f47e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80')100%/ cover;
}
.intro-heading {
background: linear-gradient(to right,#fff 400px,#000 0);
width: 600px;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
display: flex;
align-items: center;
}
<div class="container">
<div class="image-block">
<div class="intro-heading">
<h1 class="intro-heading">Professional Makeup Artist & Hair Stylist</h1>
</div>
</div>
</div>
Similar questions:
Change text color to white on any non-white background
Text blended over background color
Change text color black to white on overlap of bg
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.
I'm trying to make a grid column span every row, including implicit rows.
I came across this question asking how to span all grid rows. The second answer has a correction stating a better solution. This seems like it would work, but my own example, and the comments on the second answer, indicate that it doesn't work.
The W3 spec gives this a very close example as well.
Is there something wrong with my code, or is this possibly a bug in Firefox, Chrome, and Safari?
I also have this example in a CodePen here.
* {
box-sizing: border-box;
}
.container {
border: 1px solid #666;
max-width: 1000px;
padding: 10px;
display: grid;
grid-template-columns: 150px 1fr 300px;
/* grid-template-rows: repeat(auto) [rows-end]; Doesn't seem to help */
/* grid-template-rows: [rows-start] repeat(auto) [rows-end]; Doesn't seem to help */
grid-template-rows: repeat(auto);
grid-gap: 10px;
margin: 10px auto;
grid-auto-flow: row dense;
/* justify-items: stretch; */
/* align-items: stretch; */
}
.container>* {
grid-column: 2 / 3;
padding: 10px;
outline: 1px solid #666;
}
.pop {
grid-column: 1 / 2;
/* grid-column: 1 / -1; If I switch to this, this div will span the full width of the grid, which is exactly what I'm trying to do with rows*/
}
.tertiary {
grid-column: 1 / 2;
}
.secondary {
grid-column: 3 / 3;
grid-row: 1 / -1;
/* Doesn't work */
/* grid-row: rows-start / rows-end; Doesn't work */
/* grid-row: 1 / rows-end; Also doesn't work */
/* grid-row: 1 / span 7; This works, but I need to span an unknown number of rows*/
/* grid-row: 1 / span 99; This is gross and creates 99 rows */
}
<div class="container">
<div class="secondary">Secondary - why doesn't this span all the way to the bottom of the grid?</div>
<div class="tertiary">Tertiary</div>
<div class="tertiary">Tertiary</div>
<div class="tertiary">Tertiary</div>
<div>Primary</div>
<div>Primary</div>
<div>Primary</div>
<div class="pop">Span tertiary and primary</div>
<div>Primary</div>
<div class="tertiary">Tertiary</div>
<div>Primary</div>
<div>Primary</div>
</div>
There are two obstacles in your way.
First, this line of CSS code in your .container rule:
grid-template-rows: repeat(auto);
This code is invalid. The argument in the repeat() notation must begin with a positive integer, which specifies the number of repetitions. You don't have that, so the code doesn't work. More details in the spec.
Second, even if the code above was correct, let's say:
grid-auto-rows: auto; (which happens to be the default setting anyway)
Your column would still not span all rows.
This is because, as you may have seen in the other answer you cited, a track definition can be set to cover all perpendicular tracks only in the explicit grid.
So this would work:
grid-template-rows: repeat(6, auto);
revised demo
The rest of the problem is covered in detail in the other answer you cited.