Here using the CSS grid system want to overlay an image like a logo with a margin on right on top of 2 divs.
I can guess there should be more than one approach, I'm eager to know what method do you suggest, and please provide a live example.
div1 and div2 should fill the entire width with a little margin.
The image will have some transparency and also will have a margin over the right side, e.g 80px.
The code that I tried is like below, at this point not doing its job:
.c1Wrap{
display: grid;
/* grid-template-rows: 1fr 1fr 1fr 1fr; */
grid-template-rows: 100px 100px;
}
.c1HeaderTop{
grid-row: 1;
background: #db4ea5;
}
.c1HeaderBottom{
grid-row: 2;
background: #831d5c;
}
.c1Logo {
z-index: 101;
grid-row: 1/2;
opacity: 0.6;
grid-row: 1/2;
width: 200px;
height: 200px;
right: 80px;
background-color: #222;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="c1Wrap">
<div class="c1HeaderTop"></div>
<div class="c1HeaderBottom"></div>
<div class="c1Logo"></div>
</div>
</body>
</html>
The desired look is attached, thanks for any help.
I am not sure you can do that only with CSS-grid. It can be easily done by using absolute positioning:
.c1Wrap{
display: grid;
/* grid-template-rows: 1fr 1fr 1fr 1fr; */
grid-template-rows: 100px 100px;
position: relative;
}
.c1HeaderTop{
grid-row: 1;
background: #db4ea5;
}
.c1HeaderBottom{
grid-row: 2;
background: #831d5c;
}
.c1Logo {
z-index: 101;
position: absolute;
top: 10px;
right: 10px;
opacity: 0.6;
width: 180px;
height: 180px;
background-color: #222;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="c1Wrap">
<div class="c1HeaderTop"></div>
<div class="c1HeaderBottom"></div>
<div class="c1Logo"></div>
</div>
</body>
</html>
The answer is by overlapping cells, also we need to define the columns.
It will give us the exact result.
.c1Wrap{
display: grid;
grid-template-rows: 100px 100px;
grid-template-columns: 1fr 1fr 200px;
}
.c1HeaderTop{
grid-row: 1;
grid-column: 1/4;
background: #db4ea5;
}
.c1HeaderBottom{
grid-row: 2;
background: #831d5c;
grid-column: 1/4;
}
.c1Logo {
z-index: 101;
grid-row: 1/3;
grid-column: 3;
opacity: 0.6;
background-color: rgb(134, 133, 133);
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="c1Wrap">
<div class="c1HeaderTop"></div>
<div class="c1HeaderBottom"></div>
<div class="c1Logo">
</div>
</div>
</body>
</html>
Related
I've recently started learning CSS Flexbox. Even though I'm being able to follow the curriculum, I'm having issues with some codes.
In the code below, I'm trying to use these two properties I learnt recently, flex-shrink and flex-grow, inside of a flex-container, the first two of the four div boxes are visible but the other two are not visible in the screen layout. Can someone please explain me that why I'm having such issues and what should I do?
Thank you.
Here's my code-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style>
#box-container {
display: flex;
height: 300px;
}
#box-1 {
background-color: dodgerblue;
height: 50px;
flex-grow: 1;
}
#box-2 {
background-color: orangered;
height: 50px;
flex-grow: 2;
}
#box-3 {
background-color: dodgerblue;
height: 50px;
flex-shrink: 2;
}
#box-4 {
background-color: orangered;
height: 50px;
flex-shrink: 1;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
</div>
</body>
</html>
None of the boxes has any content. The first two boxes can expand because of flex-grow and the next two shrink by default even if you don't specify flex-shrink. This is why only the first two boxes are visible.
If you want to let them take equal widths with no content you can use flex: 1 1 auto;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<style>
#box-container {
display: flex;
height: 300px;
}
#box-container > * {
flex: 1 1 auto;
height: 50px;
}
#box-1 {
background-color: dodgerblue;
}
#box-2 {
background-color: orangered;
}
#box-3 {
background-color: dodgerblue;
}
#box-4 {
background-color: orangered;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
<div id="box-3"></div>
<div id="box-4"></div>
</div>
</body>
</html>
I have a issue with css grid , i build a container with two div in it with css grid and i want to adjust container to page center. I use this code :
html{
width: 100vw;
height : 100vh;
}
body{
height : 100%;
}
.container-fluid{
width:100%;
height : 100%;
display:grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border:1px solid red;
}
.logo-container{
background-color: khaki;
}
.form-container{
height :540px;
background-color: lightblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/media-query.css">
<title>Login & Register User With Profile</title>
</head>
<body>
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
<link rel="stylesheet" href="assets/css/all.css">
</body>
</html>
as you see when grid container height bigger then page height a issue occurs (please see code result).
when use height for body tag , grid height overflowing and when delete height from body tag every thing is ok but in this situ container can't adjust container in center of page.
what is problem?
Simplify your code like below:
body {
margin: 0; /* remove default margin */
}
.container-fluid {
min-height: 100vh; /* at least screen height */
display: grid;
grid-template-columns: 300px;
grid-template-rows: 200px auto;
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box; /* to consider the border inside the height */
}
.logo-container {
background-color: khaki;
}
.form-container {
height: 540px;
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
Or like below:
body {
margin: 0;
}
.container-fluid {
height: 100vh; /* full height */
display: grid;
grid-template-columns: 300px;
/* first row at 200px max-height and second row at 540px max-height */
grid-template-rows: minmax(auto,200px) minmax(auto,540px);
justify-content: center;
align-content: center;
border: 1px solid red;
box-sizing:border-box;
}
.logo-container {
background-color: khaki;
}
.form-container {
background-color: lightblue;
}
<div class="container-fluid">
<div class="logo-container">
<h1>Logo</h1>
</div>
<div class="form-container">
<h1>Form</h1>
</div>
</div>
I'm trying to fit an image inside of the grid area that I've specified but everything I've tried isn't giving me the result I want.
I want the image to fill the space without cropping the image. Is that possible?
Result of Code below: https://imgur.com/FhYWUDZ
Original Image I would like to fit: https://imgur.com/c3jpM7D
body{
width: 100vw;
height: 100vh;
color: black;
margin: 0;
padding: 0;
font-family: poppins, sans-serif;
}
.container{
display: grid;
grid-template-columns:repeat(5, 1fr);
grid-template-rows: 0.5fr 3fr 1fr;
height: 100vh;
}
.image{
background-image: url(./assets/header_img.jpg);
width: 100%;
height: 100%;
grid-area: 1/1/3/-1;
object-fit: fill;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link your CSS stylesheet -->
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="nav">nav</div>
<div class="image">image</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
You could add background-size: 100% 100%; and it will fill it comletely without cropping it. Though it will stretch the image to fit the grid.
See here:
body{
width: 100vw;
height: 100vh;
color: black;
margin: 0;
padding: 0;
font-family: poppins, sans-serif;
}
.container{
display: grid;
grid-template-columns:repeat(5, 1fr);
grid-template-rows: 0.5fr 3fr 1fr;
height: 100vh;
}
.image{
background-image: url(https://i.imgur.com/c3jpM7D.jpeg);
background-size: 100% 100%;
width: 100%;
height: 100%;
grid-area: 1/1/3/-1;
object-fit: fill;
background-repeat: no-repeat;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Link your CSS stylesheet -->
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght#300;500&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="nav">nav</div>
<div class="image">image</div>
<div class="content">content</div>
<div class="footer">footer</div>
</div>
I am testing so css (css-grid) and here is the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
html, body {
height: 100%;
}
.container {
display: grid;
height:100%;
grid-template-rows: 1fr 1fr 1fr;
grid-template-columns: 1fr;
grid-template-areas:
"h h";
}
.header {
height: 300px;
grid-area: h;
background-color: red;
}
.box {
display: grid;
background-color: green;
height: 50px;
width: 50px;
align-self: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="box">Box1</div>
</div>
</div>
</body>
</html>
If you look at class name 'box' above, you can see that it's got display: grid and align-self: center.
When I run this I'm getting this error in the console:
"align-self has no effect on this element since it’s not a grid or flex item.
Try adding display:grid, display:flex, display:inline-grid, or display:inline-flex."
As you can see display: grid is there...Why is this happening?
It looks to the parent container. So your box is a child of "header".
If you place display:grid in the header css class, you will see that it works
.header {
height: 300px;
display:grid;
grid-area: h;
background-color: red;
}
In your CSS below:
.box{
display: grid;
background-color: green;
height: 50px;
width: 50px;
align-self: center;
}
Your .box selector's div becomes your grid-container which means
align-self cannot be used on this, align-self is used on grid-items to align along vertical direction. The property that we use to
control alignment of all the grid-items from grid-container is align-items.
when i try to display blocks in grid then there is space at the end of grid item on right side and there is no space at the start of the grid i.e at the left side . You can see screenshot and code. i cannot figure it out what is the problem. I hope you can figure it out.
<html lang="en">
<head>
<meta charset="utf-8">
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.gird-section{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 40px;
background-color: yellow;
}
.grid-item{
background-color: red;
width: 500px;
height: 100px;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div class="gird-section">
<div class="grid-item"></div>
<div class="grid-item"></div>
</div>
</body>
</html>
You can use Css Grid Layout
I have edited your code so you can have yellow space left and right. I added width in the first section in order for the parent to have more with then the child . For more editing I suggest to watch the link above.
<head>
<meta charset="utf-8" />
<title>Projects</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#grid {
display: grid;
height: 100px;
grid-template-columns: repeat(5, 1fr);
}
#item1 {
background-color: yellow;
grid-column: 1/2;
}
#item2 {
background-color: red;
grid-column: 2/4;
}
#item3 {
background-color: yellow;
grid-column: 4/5;
}
</style>
</head>
<body>
<h1>Grid</h1>
<div id="grid">
<div id="item1"></div>
<div id="item2"></div>
<div id="item3"></div>
</div>
</body>
</html>