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">
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 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.
I got a problem with my grid. Doing it for the first time, so sorry for that beginner question.
What I want to achieve is shown in this image (black borders):
Unfortunately, I already got stuck on my first line of code:
body {
display: grid;
grid-template-columns: 10% auto 10% 10% 10%;
grid-template-rows: 60px auto; /*Isn't it recognizing my second row?*/
}
.temp {
background-color: black;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max S. Rodenkirchen - Sinn Sehen - FH AC 2022 - bei Eva Vitting</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class = "menu">
</div>
<div class = "temp">
</div>
<div class = "draw">
</div>
<div class = "label">
</div>
<div class = "slider">
</div>
<div class = "check">
</div>
</body>
</html>
The temp class should be on the left-hand side in the second row.
Another question I have is probably a bit more advanced.
The square area is going to be a P5 canvas that is always squared and should always stay in full grid row height.
I was wondering if I need to code something like this instead:
grid-template-columns: auto 60% auto auto auto;
But I am pretty sure I am missing something here.
Hope for some help :) This is going to be for a university project.
Max
It seems easier to take the top menu out of the grid as its dimensions don't seem to be directly related to the rest of the elements.
By contrast the big square looks as though it is 8 times the width of the narrower columns.
The big square can be made to take the same height as its width by giving it aspect-ratio: 1 / 1;
So we can define a one row grid with 4 columns at 1fr and the square at 8fr.
To make it easy for it to be centered this snippet puts it inside containers which have flex.
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
}
.menu {
width: 100%;
height: 60px;
}
.outer {
display: flex;
justify-content: center;
margin-top: 1vw;
}
.container {
width: 95%;
display: grid;
grid-template-columns: 1fr 8fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
gap: 1vw;
}
.menu,
.container div {
border: 1px solid black;
box-sizing: border-box;
}
.temp {
grid-row: 1 / 2;
}
.draw {
grid-column: 2 / 3;
aspect-ratio: 1 / 1;
}
.label {
grid-column: 3 / 4;
}
.slider {
grid-column: 4 / 5;
}
.check {
grid-column: 5 / 6;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Max S. Rodenkirchen - Sinn Sehen - FH AC 2022 - bei Eva Vitting</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="menu">
</div>
<div class="outer">
<div class="container">
<div class="temp">
</div>
<div class="draw">
</div>
<div class="label">
</div>
<div class="slider">
</div>
<div class="check">
</div>
</div>
</div>
</body>
</html>
Your second row is there and the .temp div is place in that row. It's just that because the .temp div has no content and the second row has a height of auto that row and the .temp div inside it have zero height and so are not visible. You can see what is going on more easily by adding outlines and minimum height:
body {
display: grid;
grid-template-columns: 10% auto 10% 10% 10%;
grid-template-rows: 60px auto;
}
div {
outline: 1px solid red;
min-height: 20px;
}
.temp {
background-color: black;
grid-column: 1 / 2;
grid-row: 2 / 3;
}
<div class="menu">
</div>
<div class="temp">
</div>
<div class="draw">
</div>
<div class="label">
</div>
<div class="slider">
</div>
<div class="check">
</div>
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>
This question already has answers here:
Percentage Height HTML 5/CSS
(7 answers)
Closed 1 year ago.
Please excuse the naïve html newbie question:
I am making an html layout and I want to start with no placeholder text. Just empty elements dividing the screen into three sections, into which I'll insert content later.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ui {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100%;
}
.layout-block {
background-color: #4472C4;
margin: 3px;
}
</style>
</head>
<body>
<div id="ui">
<div id="section-1" class="layout-block"></div>
<div id="section-2" class="layout-block"></div>
<div id="section-3" class="layout-block"></div>
</div>
</body>
</html>
What I expect is something like this:
What I get is this:
I understand that is because the elements' heights are collapsing to zero, due to the absence of any content. But what do I do to fix this?
I would like the grid container (with the id ui) to expand to 100% of the screen height, and I'd like my empty divs to expand in height to fill it.
Many thanks for any help!
#ui is expanding to fill 100% of the available height. But since there is no content and nothing with padding or margin, both <html> and <body> are collapsing to zero height. Add:
html,body{ height: 100%; }
Simply replace height: 100% with height: 100vh in your #ui styles. It will give your grid container the height of 100% of the viewport.
Obs: I added a gap between the grid elements just to make their limits visible.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#ui {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
height: 100vh;
gap: 1rem;
}
.layout-block {
background-color: #4472C4;
border: 3px;
}
</style>
</head>
<body>
<div id="ui">
<div id="section-1" class="layout-block"></div>
<div id="section-2" class="layout-block"></div>
<div id="section-3" class="layout-block"></div>
</div>
</body>
</html>