I am trying to understand the basics of the CSS grid system. I have an image I want to place in the upper left corner. When I place it in the top left corner, for some reason it adds extra space at the top and the left. As well, when I adjust the gap in the CSS, nothing changes, unless I change it to something extremely large (like 300px).
Here is the code I have so far. I tried adjusting the gap, removing the gap, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="gridgallerycss.css">
</head>
<body>
<div class="gallery">
<figure class="gallery__item gallery__item--1">
<img src="Emma_Allerd_Images/emmapic1.jpg" class="gallery__img" alt="Image 1">
</figure>
</div>
</body>
</html>
CSS
.gallery{
display: grid;;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 5vw);
gap: 15px;
}
.gallery__img{
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery__item--1{
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 1;
grid-row-end: 6;
}
You just need to change the original margin set by the tag figure in your html. For example, add in your css:
figure{
margin: 0px;
}
You can also remove the gap:15 px, it is not necessary.
Related
This question already has answers here:
How can I vertically center a div element for all browsers using CSS?
(48 answers)
Flexbox: center horizontally and vertically
(14 answers)
Centering in CSS Grid
(9 answers)
Closed 2 months ago.
Seen a few tutorials and doc now. Where its claimed,
all you need to do is the following to both horizontally and vertically align a div.
.grid {
display: grid;
place-items: center;
}
But is not true from what I see. It aligns horizontally but not vertically.
For it to align it vertically, you need to add height.
.grid {
display: grid;
place-items: center;
height: 500px;
}
But this is not being dynamic for it to always stay center for any height.
height: 100% doesn't work.
Am I doing something wrong, or the docs / tutorials are incorrect?
Trying this on Edge browser if it matters.
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
* {
padding: 0;
margin: 0;
}
.grid {
display: grid;
place-items: center;
}
</style>
<body>
<article class="grid">
<div>
😀
</div>
</article>
</body>
</html>
Doc and tutorial references:
https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
https://www.youtube.com/shorts/njdJeu95p6s
https://youtu.be/qm0IfG1GyZU?t=128
The problem is that you haven't set height to the parent element.
You can use height: 100%;, but then you also need to set height to the parent element (i.e., <body> in your case).
See the snippet below.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.grid {
display: grid;
place-items: center;
height: 100%;
border: 5px solid red;
}
</style>
<body>
<article class="grid">
<div>
😀
</div>
</article>
</body>
</html>
You may like to look up the way that width is treated in a block element.
e.g. in MDN
Note: A block-level element always starts on a new line and takes up
the full width available (stretches out to the left and right as far
as it can).
which is why your emoji centers horizontally.
The height is just the height of the content which is the emoji.
If you are trying to center the emoji in the middle of the viewport then give the element the height of the viewport. If you are trying to center it in its parent (which currently is the body element) then give it the height of the parent (height: 100%).
This snippet assumes you want it centered in the viewport:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
* {
padding: 0;
margin: 0;
}
.grid {
display: grid;
height: 100vh;
place-items: center;
}
</style>
<body>
<article class="grid">
<div>
😀
</div>
</article>
</body>
</html>
Usually if you set margin: auto; for that element it gets centered in the parent element. But it should not be overwritten by other positioning attributes, so I suggest you try doing this solution to see if it works
You can not vertically in a section as the section by default does not have any extra height in it.
In the below code, you can see that if we apply height to the .height class then the section gets height.
you can use 100vh or 100% or some height in pixels
* {
padding: 0;
margin: 0;
}
body {
height: 100vh;
}
.grid {
display: grid;
background: #21977c69;
place-items: center;
}
.grid>div {
background: #fa977c69
}
.height {
height: 100%;
}
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<article class="grid">
<div>
😀
</div>
</article>
<article class="grid height">
<div>
this is a grid with a height
</div>
</article>
</body>
</html>
I want to grow the div with the text of "Five" to cover the area below "Two and Three" in this grid. However, I'm not sure what to do beyond making the div having the property of "Flex:1". If you run the snippet below, you can see that "Five" is below only "Two".
body{
width: 100%;
}
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
width: 80%;
margin: auto;
}
.Five{
flex: 1;
background-color: blue;
}
<!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">
<title>Document</title>
<link rel = "stylesheet" href="styles.css">
</head>
<body>
<div class="wrapper">
<div class="One">One</div>
<div class="Two">Two</div>
<div class="Three">Three</div>
<div class="Four">Four</div>
<div class="Five">Five</div>
</div>
</body>
</html>
Add grid-column: 2 / 4 to .Five which will make that element span the 2nd and 3rd columns.
I want to make a layout(like facebook) with following features:
Fixed/sticky header and No footer
3 div, where div1:div2:div3 = 1:2:1
3 scroll-bar to control each div...
Scroll-1 and scroll-3 will be inside of div-1 and div-3 to control respective content, scroll-bar-2 will be in most right of the main body which will control content of div-2
Full fixed page , no extra scroll-bar , check adding lorem1000 in each div
Please help me to make this layout... Thanking you in advance
html code that i have written
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<title>test</title>
</head>
<body>
<nav>
<h1>This is nav</h1>
</nav>
<div class="row">
<div class="col-3">lorem1000</div>
<div class="col-5">lorem1000</div>
<div class="col-3">lorem1000</div>
</div>
</body>
</html>
Please help me to make this layout... Thanking you in advance
I see your photo about your idea, and I review your html
use css grid
using css grid you write the code only in parent element :)
in this example .row that have 3 childs inside it
so now I use your name classes you write before (.col-3, .col-5)
and dividing the width into equal parts (fr), I put that the sidebars that kill 3 fractions of the screen, while the mainDiv kills 5 fractions ... so mainDiv is bigger than the SideBars.
it responsive, you can change the values of fr as you like (remember that the first value must be the same as the final one, and the middle value must be bigger than the sidebars)
display: grid;
grid-template-columns: 3fr 5fr 3fr;
body {
height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
gap: 0.5rem;
}
.row {
gap: 0.5rem;
display: grid;
grid-template-columns: 3fr 5fr 3fr;
}
nav,
.row>div {
border-radius: 0.3em;
border: 1px solid rgb(0, 51, 255);
}
.col-3 {
overflow: scroll;
}
<!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">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<h1>This is nav</h1>
</nav>
<div class="row">
<div class="col-3">sideBar</div>
<div class="col-5">mainContent</div>
<div class="col-3">sideBar</div>
</div>
</body>
</html>
So, I'm in the process of learning CSS Grid and I'm running into a couple of issues here. I've been messing around in the inspection panel and removing some CSS every now and then and I can't come to a solution.
First, the background-image needs to be a bit lower, but the container doesn't -- so I basically need a higher view of the photo that's shown, so it's not showing the center of the photo only if that makes sense.
Second, any time I remove position: absolute; from .bg-img the causes the second screenshot to occur, shrinking my grid...I need the grid to preserve its division of the entire page into grid-template-columns: 1fr 4fr 1fr; and not adjust to the top left corner of the page as it does.
Any ideas here/concepts I'm missing? Learning web-dev is awesome so far, but fixing issues when you don't know what's wrong is rough! haha.
Screenshot of Page:
Removing the css for position: absolute on .bg-img{} causes the below view:
Screenshot of Page post-removal:
Code:
body,
html {
background-color: black;
}
/* bg image styline */
.bg-img {
position: absolute;
background-image: url(/Practice_Site-main/imgs/nature.jpg);
background-repeat: no-repeat;
background-position: center;
outline: solid white;
border-radius: 60px;
width: 100%;
height: 50%;
filter: brightness(0.7);
}
/* top of site heading and navbar */
#mainGrid {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: repeat(5, 5fr);
}
#topContainer {
display: grid;
grid-template-columns: 1fr 4fr 1fr;
position: relative;
grid-column: 2;
grid-row: 2;
gap: 10px;
background-color: #09cc43;
border-radius: 40px;
outline: solid black;
opacity: 0.85;
filter: brightness(1) !important;
justify-content: center;
}
#siteHeader {
grid-column: 2;
justify-self: center;
text-align: center;
}
nav {
grid-column: 2;
grid-row: 2;
justify-items: center;
}
#primary-navigation {
grid-column: 2;
list-style-type: none;
justify-items: center;
}
ul {
grid-column: 2;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
<!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" />
<title>TESTER</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="mainGrid">
<div class="bg-img">
<div id="topContainer">
<h1 id="siteHeader">Testing Header</h1>
<nav>
<ul id="primary-navigation" class="primary-navigation">
<li class="active">
<span aria-hidden="true"></span>Home
</li>
<li>
<a href="photos.html">
<span aria-hidden="true"></span>Photos</a>
</li>
<li>
<span aria-hidden="true"></span>About
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="homeFolio"></div>
</body>
</html>
Because position: absolute; the width and height of the bg-img element is determined by the parent element with position: relative; set, if the parent element does not set position: relative, the width and height of the bg-img will be determined according to the body element, This is what you delete position: absolute cause a width and height error
I'm trying to create a responsive layout where header and footer take around 5% of screen and are fixed. The mid section scrolls depending on number of elements in it. Even though I only mention fr and % values, the element sizes stay static irrespective of screen size changes. In firefox responsive mode (galaxy s9), I see vertical and horizontal scroll bars outside of the container class. Could someone point out what I might be doing wrong ?
<html>
<head>
<meta charset="UTF-8">
<style>
.main{
display:grid;
grid-template-rows: 2fr 20fr 2fr;
gap: 2px;
}
.header{
background-color: lightblue
}
.container{
display: grid;
overflow: auto;
grid-auto-flow: row;
grid-auto-rows: 25%;
gap: 2px;
}
.tapbar{
background-color: pink
}
.content{
background-color:yellowgreen;
}
</style>
</head>
<body>
<div class='main'>
<div class='header'>header here</div>
<div class='container'>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
</div>
<div class='tapbar'>tap bar here</div>
</div>
</body>
Edit: Besides the selected answer, other mistake I was doing was not having html cover the entire area. Adding this to the style fixed it
html,body,.main{
height: 100%;
width: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
you just have to add the following meta tags in the head tag of your html page
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">