I need two pictures to overlap in a CSS grid layout without cheating and it has to be done with CSS grid. Means it should stay in the layout cells. Here is what I'm working on:
"The middle" should be centred in the picture and both centred on the page, respectively the "banner"-cell
The following CSS layout should stay the same desirably:
.container {
display: grid;
grid-template-columns: 15% 70% 15%;
grid-template-rows: 20% 20% 20% 20% 20%;
grid-gap: 2px;
grid-template-areas:
'banner banner banner'
'sidebar content fb'
'sidebar content fb'
'sidebar content fb'
'src src src';
}
.banner {
grid-area: banner;
}
I already tried these methods:
justify-items: center;
justify-content: center;
align-content: center;
align-self: center;
text-align: center;
The method with absolute positions worked out fine, but it disregards the grid completely so the actual grid is under the picture. It would be possible to apply a padding to the "banner" cell to push down the content but this is the kind of cheating I want to avoid.
I need those 2 pictures to stay overlapping in this "banner" cell, but I am running out of options and there are not a lot of answers out there due to the fact that the CSS grid is pretty new.
The HTML:
<body class="body">
<div class="container">
<div class="banner">
<img id="skyline" src="Pictures/SkylinePH.jpg">
<img id="logo" src="Pictures/Logo2.png">
</div>
</div>
I am very grateful for any help! Thank you in advance :)
Text over Image. With CSS Grid Layout.
HTML
<div id="container">
<img src="some-image.jpg">
<p>SOME TEXT OVER IMAGE</p>
</div>
CSS
#container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
#container img{
grid-column: 1;
grid-row: 1 / span 3;
width: 100%;
height: 100%;
overflow: hidden;
}
#container p{
grid-column: 1;
grid-row: 2;
align-self: center;
justify-self: center;
z-index: 1;
}
Image over Image. With CSS Grid Layout.
HTML
<div id="container">
<img id="img-1" src="image-1.jpg">
<img id="img-2" src="image-2.jpg">
</div>
CSS
#container{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
}
#container #img-1{
grid-column: 1;
grid-row: 1 / span 3;
width: 100%;
height: 100%;
overflow: hidden;
}
#container #img-2{
grid-column: 1;
grid-row: 2;
align-self: center;
justify-self: center;
z-index: 1;
}
The method with absolute positions worked out fine, but it disregards the grid completely so the actual grid is under the picture.
You don't need to position: absolute both images - you could have the banner image, which is larger and going to be behind the logo, occupy the space it normally would in the CSS grid cell. Then you could absolute position and center the logo on top of it. Would that work?
EDIT: Some CSS to try for accomplishing this:
.banner {
position: relative; /* so we can position the logo based on this container */
text-align: center; /* so the skyline image is horizontally centered */
}
#logo {
position: absolute; /* these 4 lines will center the logo */
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
With css grid there is no need for absolute or relative positioning any more. Don't forget in css grid you can stack grids on top of each other by giving them same grid-row and grid-column values and then use z-index. Pretty powerful :) hope this helped
Related
When i use the responsive tool of Chrome(<699pw) it create a huge gap between the footer and the div base but i want the footer a the bottom of the page. I don't know if it is the grid of the parent . I want to extend the base and make it closed to the footer so even if we extend the responsive tool. So it'has to follow the footer
header {
display: grid;
grid-template: auto;
grid-template-columns: 1fr 5fr 6fr 4fr;
align-items: center;
font-size: 30px;
position: relative;
top: 50%;
}
.parent {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 2 / 1 / 3 / 2; }
.div4 { grid-area: 2 / 2 / 3 / 3; }
.div5 { grid-area: 3 / 1 / 4 / 3; }
#bases{
display: grid;
grid-template: auto;
grid-template-columns: 2fr 4fr;
}
html,body{
margin: 0;
padding: 0;
}
/* Responsive */
#media (max-width: 699px){
#Titre {
display: none;
}
header {
background-color: #aa1010;
font-family: 'LexendTera';
color: white;
display: grid;
grid-template: auto;
grid-template-columns: 1fr 5fr 6fr 4fr;
align-items: center;
font-size: 10px;
position: relative;
top: 50%;
}
aside{
display: none;
}
#bases{
display: grid;
grid-template-columns: 1fr;
}
.parent{
display: grid;
align-items: center;
}
/* Mettre footer en bas de page */
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
}
<!DOCTYPE html>
<html lang="fr">
<body>
<header>
<img src="img/logo.png" alt="logo" id="logo">
<h1 id="Titre">O'kebab</h1>
Composition
Connexion
</header>
<div id="bases">
<main>
<h1>"La maison du sandwich"</h1>
<div class="parent">
<div class="div1"><h1>Promotion</h1><p>Kebab Végetarien -50%</p> </div>
<div class="div2"><img src="img/vege.png" alt="vege"></div>
<div class="div3"><h1>Kebab du mois</h1><br><p> Kebab spicy</p></div>
<div class="div4"><img src="img/spicy.webp" alt="spicy"></div>
<div class="div5"><button>Commandez</button></div>
</div>
</main>
</div>
<footer>
<h2 id="contact">Contact</h2>
<h2 id="mention">Mentions légales</h2>
<img src="img/facebook.png" alt="facebook" id="face">
<img src="img/instagram.png" alt="instagram" id="insta">
<img src="img/iutly.png" alt="twitter" id="ly1">
<h3 id="tkt">© 2022 O'kebab</h3>
</footer>
</body>
</html>
I tried to use position:relative for the body but nothing change
The grid is fine,
In the screen size less than 699px width:
You made the header smaller by reducing its font size. And since a div is a block element by default, it would be positioned in a new line after the last element. So your "bases" div would be on top and attached beneath the header.
You forced the footer to be positioned fixed and go to the bottom of the page.
So naturally, there would be a gap between your "bases" and your "footer".
Now since the element positioned fixed is removed from the normal document flow, and no space is created for it on the page, you can't position the "bases" div relative to the "footer".
But, for fixing the gap between your divs there are many ways...
For example, you can add a height to your "bases" div and make it fill the gap.
If you want it to be responsive, instead of an absolute height you can give it a relative height, like using "%" or "vh":
#bases {
/* Relative to % of the height of the viewport */
height: 80vh;
}
And you can adjust the position of contents by "display flex" and "align-items" or maybe using padding and margins.
You can also make it "position absolute" as well and position it somewhere in the middle of the page. as I said there are many ways to fill that gap.
And a quick tip for using media queries, If you want to change an attribute of an element, you don't need to write all of its attributes again.
for example, if you have this code and you want to change its font size:
.header {
display: grid;
grid-template: auto;
grid-template-columns: 1fr 5fr 6fr 4fr;
align-items: center;
font-size: 30px;
position: relative;
top: 50%;
}
You can just change the font size, and there is no need to duplicate all of that code:
#media (max-width: 699px) {
.header {
font-size: 10px;
}
}
I think it's best if I try to explain this with a screenshot. So, I am trying to achieve this: https://freeimage.host/i/H9flW3N
My problem is when I do it with grid, the first picture is too short/height not enough to fit the whole grid cell so the gap between the upper left and lower left picture is too big.
This is what I have:
https://freeimage.host/i/H9f0KMv
Is there a way to achieve the layout from the upper picture with grid where the grid rows adjust according to a picture height? It needs to be responsive of course :/
Also how should I go about positioning the third picture, because it shouldn't be aligned with the first two. Can this be achieved with margins or?
Thank you in advance, this has been driving me insane for a few days now and I can't get it to work. I tried with flexbox, now I'm trying with grid but no result yet
Here's my code:
.fourth {
display: flex;
flex-direction: column;
align-items: center;
}
.collage2 {
display: grid;
width: 85%;
grid-auto-columns: repeat (2, 1fr);
}
.collage2 > img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
.collage2 img:nth-child(3) {
grid-row: 1/2;
grid-column: 2;
}
<section class="fourth">
<div class="collage2">
<img src="/images/photo-3.jpg" alt="Man drawing on whiteboard">
<img src="/images/photo-4.jpg" alt="Ableton address on a brick wall">
<img src="/images/photo-5.jpg" alt="Man and woman working at a music studio">
</div>
Did a little play on Codepen, and I think this can give you a basic idea to start with: https://codepen.io/brandonzhang/pen/PoaJyQw?editors=1100
<div class="grid">
<img src='https://images.unsplash.com/photo-1666880147941-b145c43cfe6b?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg2ODQxMDk&ixlib=rb-4.0.3&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1667489022797-ab608913feeb?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg2ODQxMDk&ixlib=rb-4.0.3&q=80' alt=''>
<img src='https://images.unsplash.com/photo-1593875460489-aa913d8a0fe2?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2Njg2ODQxNjk&ixlib=rb-4.0.3&q=80' alt=''>
</div>
img {
width: 100%;
object-fit: cover;
}
.grid {
--gap: 8%;
display: grid;
align-items: center;
justify-items: center;
grid-template-columns: 2fr 3fr;
gap: var(--gap);
padding: var(--gap);
position: relative;
}
img:nth-of-type(2) {
grid-column: 1 / 2;
grid-row: 2 / 3;
}
img:nth-of-type(3) {
grid-column: 2 / 3;
grid-row: 1 / 3;
height: 80%;
}
.grid::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: calc(2 / 5 * 100% + var(--gap) * 2);
bottom: 0;
background: lightseagreen;
z-index: -1;
}
I'm building my first real webpage and I'm trying to figure out how to stack the elements on the home screen correctly. I've read and tried similar posts but they don't seem to do what I need. Currently my homepage looks like this (ignore the list at the bottom of the page and subscribe/ login buttons. They are just part of the default theme):
This was achieved using the following code:
HTML:
<div class="desc-pic-parent">
<div class="homepage-description">
<div class="homepage-description-header">
Hi! I'm Lewis Cooper
</div>
<div class="homepage-description-text">
This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
</div>
</div>
<div class="square-pretend-img"></div>
</div>
CSS:
#media (min-width: 1001px) {
.disc-pic-parent {
grid-column: 1 / span 3;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description{
text-align: left;
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description-header{
font-size: 3rem;
margin-top: 0;
}
.square-pretend-img{
position: relative;
height: 20rem;
width: 20rem;
background-color: #555;
grid-column: 2 / span 2;
}
}
My goal is to try and get it to look something like this sketch:
The idea of using a grid for the main layout is fine and will keep your text at a constant width even if it is too long, but you also have put a grid in your left hand box which isn't the layout your desired image shows. You have also given the img defined dimensions and yet defined column spans for the grid.
This snippet just takes it that you want the img to have the given dimensions so removes the extra grid information.
#media (min-width: 1001px) {
.desc-pic-parent {
display: grid;
grid-gap: 4vmin;
grid-template-columns: 1fr 1fr;
min-height: 280px;
border-top: 0;
}
.homepage-description {
text-align: left;
min-height: 280px;
border-top: 0;
}
.homepage-description-header {
font-size: 3rem;
margin-top: 0;
}
.square-pretend-img {
position: relative;
height: 20rem;
width: 20rem;
background-color: #555;
}
}
<div class="desc-pic-parent">
<div class="homepage-description">
<div class="homepage-description-header">
Hi! I'm Lewis Cooper
</div>
<div class="homepage-description-text">
This is a description of me. I will put quite a bit of text here so that I can get a rough idea of what it's going to look like in the final edit of the webpage
</div>
</div>
<div class="square-pretend-img"></div>
</div>
NOTE: you probably want to take some of the styling out of the media query and have it there for all viewport dimensions.
This can be simply achieved using flexbox.
Just wrap those two div's inside another div and give display: flex to that div.
what my image gallery is like at the moment
As you see I have 2 images in the grid system taking up 50% of the width. the problem I have is I want to have a third image below taking up 100% of the width below these two but still in the grid so it downsizes along with the other two images so how can I do this?
the HTML code I have is:
<div class="images">
<img
src="protest_2.jpg"
alt="a protest for black lives matter with their faces blurred"
/>
<img src="protest_1.jpg" alt="a climate strike with their faces blurred" />
</div>
the css code I have is:
.images img {
object-fit: cover;
height: 300px;
width: 100%;
border-radius: 3px;
box-shadow: 0 2px 20px rgba(0, 0, 0, .25);
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.images {
/* CHANGE TO GRID */
display: grid;
grid-template-columns: repeat(2, 1fr);
justify-content: space-between;
grid-gap: 20px;
width: 940px;
max-width: 100%;
margin: auto;
}
#media (max-width: 1000px) {
.images {
grid-template-columns: 1fr;
}
}
set grid-row: of the first two images to 2 and set it to 3 for the last image. Elements in the same row will align.
You're looking for the image to span 2 columns, so use nth-child to select the third image and use grid-column-end:
.images img:nth-child(3) {
grid-column-end: span 2;
}
Or if you don't want to use nth-child, you can add a class to it and select it that way instead.
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.