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>
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 want using flexbox to contain everything within the second div of the grid. In this case the picture overflows and I don't know why. I would like it to be resized by height and maintain aspect ratio.
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper>div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
min-height: 40px;
background: green;
}
img {
flex: 1;
max-height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
You cannot set min-height for the button in terms you must use div.
Unless it will cause strange overflow problem when you resize the picture. Take I try to resize the window, see if this the effect you want.
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper div{
width:100%;
height:100%;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
height:30%;
background: green;
}
img {
flex : 1;
max-height: 100%;
}
.custom-img{
display:block;
max-height:70%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<div class="custom-img">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
As you have set your button min-height: 40px when CSS applies the img max-height:100% it is actually getting the parent size, not decreasing the button 40px.
You can set max-height: calc(100% - 40px);, which will apply the parent 100% height minus 40px of the button.
body {
height: 100%;
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
background-color: #A9A9A9;
}
.wrapper>div:nth-child(even) {
background-color: #D3D3D3;
}
.pic2 {
display: flex;
flex-direction: column;
}
button {
flex: 1;
min-height: 40px;
background: green;
}
img {
flex: 1;
max-height: calc(100% - 40px);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div2</div>
<div class="pic2">
<button>Div2</button>
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
I'm trying to insert a picture within a div within a grid layout and I want the height of the picture to always match exactly the height of the div. However I can't get the image to respect the boundaries of it's parent div. Most of the times it overlaps the grid and if I use overflow:hidden it just crops the image. I want it to maintain the aspect ratio.
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}
.wrapper {
background-color: #A9A9A9;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.img_div {
position:relative;
display: inline-block;
height: 100%;
width: 100%
}
.img_div > img {
position: absolute;
width: auto;
height: auto;
margin: auto;
min-height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div1</div>
<div class="pic2">Div2
<div class="img_div">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
The extra child .img_div is probably not needed, but to keep same structure, I updated your css to make it display: inline and changed the .img_div > img styles, removing display: absolute; and changed min-height: 100%; to max-height: 100%; adding max-width: 100%; as well.
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}
.wrapper {
background-color: #A9A9A9;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.img_div {
position:relative;
display: inline;
height: 100%;
width: 100%
}
.img_div > img {
width: auto;
height: auto;
margin: auto;
max-height: 100%;
max-width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div1</div>
<div class="pic2">Div2
<div class="img_div">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
You could also leave .img_div as display: inline-block if you'd prefer, but would need to remove its width: 100%;
Also, you may need to adjust vertical alignment depending on your use case.
I think I found the solution based on this article here.
https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height
Basically setting every div to display:table and then putting every container inside that div as a table-row. That will fill the rest of the height of the gris
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template: repeat(2, 50vh) / repeat(3, 1fr);
}
.wrapper {
background-color: #A9A9A9;
}
.wrapper > div {
text-align: center;
display: table;
height: 100%;
}
.wrapper > div:nth-child(even) {
background-color: #D3D3D3;
}
.img_div {
display: table-row;
height: 100%;
width: 100%;
}
.img_div > img {
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="wrapper">
<div class="pic1">Div1</div>
<div class="pic2">Div2
<div class="img_div">
<img src="https://i.imgur.com/VHtXwib.jpg">
</div>
</div>
<div class="pic3">Div3</div>
<div class="pic4">Div4</div>
<div class="pic5">Div5</div>
<div class="pic6">Div6</div>
</div>
</body>
</html>
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>