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>
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'm trying to model a CSS grid
I'd like it to be 2x2
xx yy
ww zz
While the screen is at least N width, I want each of the cells to take up 50% of the width, with a gap in between.
xxxx yyyy
wwww zzzz
When the screen hits a certain min width, I want the grid to stack
x
y
w
z
If I start with this grid
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(50%, 1fr));
grid-column-gap: 32px;
grid-row-gap: 32px;
}
.grid-item {
width: 100%;
height: 100%;
}
<div class="grid">
<div class="grid-item"/>
<div class="grid-item"/>
<div class="grid-item"/>
<div class="grid-item"/>
</div>
The grid is always vertically stacked, since there will never be enough room for 2 50% cells, with a static 32px column gap.
If I change it to
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(49%, 1fr));
grid-column-gap: 32px;
grid-row-gap: 32px;
}
Then the grid will be 2x2, up until some minimum screen width, where they'll stack vertically. This is the behavior I want, aside from the fact that the grid vertically stacking seems somewhat accidental, since it only happens due to the grid-column-gap. I'm not actually defining a minimum width for my grid cells, it's just whatever width results in my column-gap taking up more than 2% of the space.
What if I wanted to explicitly define the pixel limit for the grid collapsing? What if I wanted this behavior without having a column-gap?
Perhaps a nice approach to fix this problem could be using CSS' media queries and percentages. You can use a code like below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.grid{
width:100%;
}
#media only screen and (min-width: 600px) {
.grid-item {
display:inline-block;
width:46%;
padding: 1%;
}
}
#media only screen and (max-width: 599px) {
.grid-item {
width:100%;
display:block;
padding: 32px;
}
}
</style>
</head>
<body>
<div class="grid">
<div class="grid-item">one</div>
<div class="grid-item">two</div>
<div class="grid-item">three</div>
<div class="grid-item">four</div>
</div>
</body>
Another approach which is easier could be using Bootstrap's grids but as your question didn't have the Bootstrap tag, I didn't mention it.
This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
like the picture above. How can I make the most right side column to occupy the row below with the grid system using col-lg-6. The first and second column would be col-lg-6 and the column below would be col-lg-6 too. I am using float right for the very right side column to make something work. But can I make the column like this using display:relative;?
Using grid-areas there is a easy way. Try this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
.parentDiv{
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "firstdiv thirddiv" "seconddiv thirddiv";
grid-gap: 10px;
}
.firstdiv{
grid-area: firstdiv;
background: black;
width: 100%;
height: 100px;
}
.seconddiv{
grid-area: seconddiv;
background: green;
width: 100%;
height: 100px;
}
.thirddiv{
grid-area: thirddiv;
background: red;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="parentDiv">
<div class="firstdiv">
</div>
<div class="seconddiv">
</div>
<div class="thirddiv">
</div>
</div>
</body>
</html>
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">
i have a web page setup which uses css grid to display the main section centered at 80% width.
<html>
....
<body>
<main>
<section>
</section>
</main>
</body>
....
</html>
main {
display: grid;
justify-items: center;
}
section {
max-width: 80%;
min-height: 100%
}
now I would like to also be able to add a second section using a PHP if statement so that both sections are displayed right next to each other at 50% each. (while not altering the css via PHP)
If I just add another section it will be displayed on top or below the first one.
I've already tried using grid-auto-columns as well as setting grid-template-rows to 100% but both didn't work as expected.
Any Ideas on how to solve this?
I'm not completely sure what you are after, but this will give you side by side,
<html>
<body>
<main>
<section>
section1 stuff
</section>
<section>
section2 stuff
</section>
</main>
</body>
</html>
main{
display: grid;
grid-template-columns: 100px 200px 300px;
grid-auto-rows: minmax(100px, auto);
grid-gap:5px;
}
section{
max-width: 80%;
min-height: 100%;
border:1px solid black;
background:red;
}
https://codepen.io/anon/pen/ZovaVG
Ugly in a Pen, but it does what you asked.