screenshot of css grid
I need a little help here, I need to make a slider, which is doing a comparison between 2 png images. I know how to make this for NON-transparrent pictures, but here I have 2 png cats width transparent bg.
Problem is that one cat should overlap another 1, but it looks impossible with 2 pngs.
I tried this code, but it doesn't work :(
kitties {
display: grid;
overflow: hidden;
max-width: 592px;
margin: 0 auto;
grid-template-columns: 50% 1fr;
}
.slider__fat-cat--range {
.outline(red);
grid-column: 1 / 2;
grid-row: 1 / 2;
overflow: hidden;
z-index: 2;
object-fit: fill;
}
.slider__skinny-cat--range {
.outline(rgb(0, 254, 59));
justify-content: end;
grid-column: 2 / 3;
grid-row: 1 / 2;
overflow: hidden;
z-index: 1;
}
I tried to use css grid and position: absolute, but pasts of the 2nd png is always visible behind 1st
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>
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.
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 want to use percentages in my css for my react app but it's causing such a headache. Width % work fantastic all the time but the height % is always an issue. It seems almost like I HAVE to specify a height in pixels for it to work work unless the element contains children.
Am I missing something fundamental here. Will a div not set itself to 100% of the remaining height without child elements. The below code doesn't work despite me setting the align-items property to stretch.
.search-container{
display: grid;
grid-template-columns: auto 900px 300px auto;
grid-template-rows: 30% auto auto;
grid-gap: 20px;
}
.promo-container {
background-color:blue;
grid-column-start: 2;
grid-column-end: 3;
align-items: stretch;
}
.form-container {
background-color:blue;
grid-column-start: 3;
grid-column-end: 4;
align-items: stretch;
}
.results-header {
background-color:rgb(255, 94, 0);
grid-column-start: 2;
grid-column-end: 4;
height: 90px;
}
.refine-search {
background-color:blue;
grid-column-start: 2;
grid-column-end: 3;
height: 100%;
}
.results-container{
background-color:rgb(0, 255, 42);
grid-column-start: 2;
grid-column-end: 3;
}
<div className="search-container">
<div className="promo-container">
</div>
<div className="form-container">
</div>
<div className="results-header">
</div>
<div className="refine-search">
</div>
<div className="results-container">
</div>
</div>
You need to set the height of your parent elements.
html, body, div {
height: 100%;
width: 100%;
}
The problem with height is that you need to have some childrens in order to work. So if you want to see the blank space where is supposed to be the childrens ( the rest of the elements) you indeed have to set pixels, rem, fr, etc. Otherwise The grid won't allow the blank space to be there if there's nothing in there. For example if I want to see my remaining space I can say:
`.someClass {
display: grid;
/* I'm setting the rows to be 3 row with a given space of 1 fr
each row will be placed with given space unit */
grid-templates-rows: repeat(3, 1fr);
grid-template-columns: repeat(5, 1fr);
}`
Otherwise if you want to create the grid depending automatically on the availaible space you can set everything to auto like so:
.someotherClass {
display: grid;
/* grid template areas is the combination of the template rows and columns */
grid-templates-areas: auto;
}
Of course with the auto I can still order my items on the rows and columns that I want but the space will be adjusted accordingly with each element
To give you some idea how the grid works check out this page: https://cssgridgarden.com/
Hope helps :)
* {
/* CSS Reset! */
margin: 0;
/* They cascade, so for them to be accessible in
the sidebar div, you have to make them available for all */
--SideBarButtonSide: 36px;
--SideBarOffsetX: 16px;
--SideBarOffsetY: 17px;
}
#SideBar {
position: fixed;
top: calc(2*var(--SideBarOffsetY) + var(--SideBarButtonSide));
}
#SideBar #SideBarGrid {
display: grid;
--SideBarTextHeight: 45px;
grid-template-columns: 1fr 250px 1fr;
grid-template-rows: 40px 200px 20px var(--SideBarTextHeight) 20px 200px;
}
#SideBarGrid #BrandLogo {
grid-column: 2 / 3;
grid-row: 2 / 3;
margin: auto;
}
#SideBarGrid #SideBarText {
grid-column: 2 / 3;
grid-row: 4 / 5;
text-align: center;
line-height: var(--SideBarTextHeight);
font-size: 35px;
}
#SideBarGrid #SideBarLinks {
/* 1 / 2 and 3 / 4 work just fine! but try 2 / 3! */
grid-column: 2 / 3;
grid-row: 6 / 7;
}
https://codepen.io/Whiteclaws/live/vpbRXL
https://imgur.com/a/fAHVd
This problem is a bit hard to put into words, so please just have a look at the codepen for yourself...
The small codepen and imgur gallery describes the issues pretty well.... You can switch to position: relative and it'll work just fine! but that would defy the point of a sidebar...
Note: One more thing, it breaks at three elements, if i only put in two (brand logo and sidebar text, it works fine!!)
Note2: It breaks even without the links, for that matter, just having the SideBarLinks div inside breaks it!
Try to change grid-template-columns: 1fr 250px 1fr; to grid-template-columns: 1fr 1fr 250px;. That is what you want?