Even though my grid container is set to (100vh, 100vw) the contents of the grid still overflows.
The weird thing is that when I open the page, it has the scroll bars and scroll, but when I resize the window and put it back into fullscreen again(meaning the size of the screen is the same), the scroll bars go away!
I don't really know whats causing this, so any help would be appreciated.
* {
padding: 0;
margin: 0;
}
.wrapper {
width: 100vw;
height: 100vh;
display: grid;
grid-template-columns: 1fr 4fr;
grid-template-rows: 1fr 7.5fr 7.5fr 2fr 1fr;
/* overflow: hidden; */
}
.navbar {
background: pink;
grid-row: 1/2;
grid-column: 1/3;
}
.webcam {
background: green;
grid-column: 1/2;
grid-row: 2/3;
}
.chat {
background: blue;
grid-column: 1/2;
grid-row: 3/4;
}
.two-buttons {
background: brown;
grid-column: 1/2;
grid-row: 4/6;
}
.screen {
background: black;
grid-column: 2/3;
grid-row: 2/4;
}
.bunch-of-buttons {
background: red;
grid-column: 2/3;
grid-row: 4/5;
}
.chat-send-button {
background: yellow;
grid-column: 2/3;
grid-row: 5/6;
}
<!DOCTYPE html>
<html>
<head>
<title>Focus</title>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
asdf
</div>
<div class="webcam">
asdf
</div>
<div class="chat">
asdf
</div>
<div class="two-buttons">
asdf
</div>
<div class="screen">
asdf
</div>
<div class="bunch-of-buttons">
asdf
</div>
<div class="chat-send-button">
asdf
</div>
</div>
</body>
</html>
Edit: My monitor is 1280*1024.
Related
Im learning how to use grid container and so far i created a grid with 2 images on top and 2 on the bottom and then 1 to the left side that stretches vertically. I have the grid how i want it, however i cannot get rid of the huge gap in between each image. I tried adjusting the grid gap and even got rid of it but it does not change nothing at all. How can i fix this problem?
Thanks
.PopDestination-Header{
text-align: center;
margin: 100px;
}
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
}
.grid-item-1 {
grid-column: 1/2;
grid-row: 1/3;
}
.grid-item-2 {
grid-column: 2/3;
grid-row: 1/2;
}
.grid-item-3 {
grid-column: 3/4;
grid-row: 1/2;
}
.grid-item-4 {
grid-column: 2/3;
grid-row: 3/4;
}
.grid-item-5 {
grid-column: 3/4;
grid-row: 3/4;
}
<section class="PopularDestination">
<div class="PopDestination-Header">
<h1>Popular Destination</h1>
</div>
<div class="grid-container">
<div class="grid-item-1"><img src ="Images/meric-dagli-CK_MX9mBGRo-unsplash.jpg" height="700" width="350"></div>
<div class="grid-item-2"><img src ="Images/doug-watanabe-9uiUGnGeeUo-unsplash.jpg" height="350" width="500"></div>
<div class="grid-item-3"><img src ="Images/ryan-stone-VnZMKbXrA0I-unsplash.jpg" height="350" width="500"></div>
<div class="grid-item-4"><img src ="Images/clay-elliot-3xJAVC07AYk-unsplash.jpg" height="350" width="500"></div>
<div class="grid-item-5"><img src ="Images/mike-dierken-KmA5OdUkAj8-unsplash.jpg" height="350" width="500"></div>
</div>
</section>
.grid-item-4 {
grid-column: 2/3;
/* grid-row: 3/4; */
grid-row: 2/3;
}
.grid-item-5 {
grid-column: 3/4;
/* grid-row: 3/4; */
grid-row: 2/3;
}
I edited your code like below. I hope it works for you. While running code snippet please make full screen for right view.
.PopDestination-Header{
text-align: center;
margin: 100px;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-template-rows: auto;
grid-column-gap: 30px;
grid-row-gap: 30px;
justify-content: center;
}
.grid-item-1 {
grid-column: 1/2;
grid-row: 1/4;
}
.grid-item-2 {
grid-column: 2/3;
grid-row: 1/2;
}
.grid-item-3 {
grid-column: 3/3;
grid-row: 1/2;
}
.grid-item-4 {
grid-column: 2/3;
grid-row: 2/2;
}
.grid-item-5 {
grid-column: 3/3;
grid-row: 2/2;
}
<section class="PopularDestination">
<div class="PopDestination-Header">
<h1>Popular Destination</h1>
</div>
<div class="grid-container">
<div class="grid-item-1"><img src ="https://picsum.photos/211" height="700" width="350"></div>
<div class="grid-item-2"><img src ="https://picsum.photos/222" height="350" width="500"></div>
<div class="grid-item-3"><img src ="https://picsum.photos/256" height="350" width="500"></div>
<div class="grid-item-4"><img src ="https://picsum.photos/247" height="350" width="500"></div>
<div class="grid-item-5"><img src ="https://picsum.photos/265" height="350" width="500"></div>
</div>
</section>
Gaps columns and rows looks like this in chrome browser:
Try this
.grid-container {
max-width: min-content;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
}
This might very well be the stupidest question but why is the border radius of items changing when you zoom the viewport by Ctrl + mousewheel or through browser zoom? (To test it, run the code snippet below and open it in full page, then zoom in and out) The border radius is set in pixels, so why is it changing? Also, I always have to use flex layout to center text vertically inside a container, is there a better way to vertically a text? Setting display: inline-block and vertical-align: middle is not working.
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: 12px;
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</div>
I think, you want only the text to be zoomed and the border radius to look the same. Therefor you could use a screen dependent value like vw or vh. For example:
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
Working example:
/* Normalize rules */
*,
*::before,
*::after {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
min-height: 100vh;
}
/* Root grid layout */
.root {
height: 100vh;
display: grid;
grid-template-columns: repeat(6, minmax(20px, 1fr));
grid-template-rows: repeat(6, minmax(20px, 1fr));
gap: 15px;
padding: 15px;
}
section.merchandise {
background-color: #aa0100;
grid-column: 1/3;
grid-row: 1;
}
header {
background-color: #000;
grid-column: 3/7;
grid-row: 1;
}
aside {
background-color: #00aa01;
grid-column: 1;
grid-row: 2/7;
}
section.products {
background-color: #0300aa;
grid-column: 2/6;
grid-row: 2/4;
}
footer {
grid-column: 2/7;
grid-row: 6;
background-color: #ffa502;
}
/* Features sub-grid */
.features {
grid-column: 6;
grid-row: 2/6;
display: grid;
gap: 15px;
grid-template-columns: minmax(20px, 1fr);
grid-template-rows: repeat(4, minmax(20px, 1fr));
}
.features>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.features>div:nth-child(2) {
grid-column: 1;
grid-row: 3;
}
/* Bonuses sub-grid */
.bonuses {
grid-column: 2/6;
grid-row: 4/6;
display: grid;
gap: 15px;
grid-template-columns: repeat(4, minmax(20px, 1fr));
grid-template-rows: repeat(2, minmax(20px, fr));
}
.bonuses>div:nth-child(1) {
grid-column: 1;
grid-row: 1;
}
.bonuses>div:nth-child(2) {
grid-column: 2;
grid-row: 2;
}
.bonuses>div:nth-child(3) {
grid-column: 3;
grid-row: 1;
}
.bonuses>div:nth-child(4) {
grid-column: 4;
grid-row: 2;
}
/* Visual styles */
h2,
h3 {
font-size: 1.2rem;
color: #fff;
}
div,
header,
footer,
aside,
section {
border-radius: calc(1vw + 1vh);
}
.feature-item {
background-color: #dd0101;
}
.bonus-item {
background-color: #ffc0cb;
}
.bonus-item>h3 {
color: #000;
}
.centered-text {
display: flex;
align-items: center;
justify-content: center;
}
.centered-text>h2,
.centered-text>h3 {
text-align: center;
}
<div class="root">
<section class="merchandise centered-text">
<h2>Featured Merchandising</h2>
</section>
<header class="centered-text">
<h2>Header</h2>
</header>
<aside class="centered-text">
<h2>Sidebar</h2>
</aside>
<section class="products centered-text">
<h2>Products</h2>
</section>
<div class="bonuses">
<div class="bonus-item centered-text">
<h3>Bonus1</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus2</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus3</h3>
</div>
<div class="bonus-item centered-text">
<h3>Bonus4</h3>
</div>
</div>
<div class="features">
<div class="feature-item centered-text">
<h3>Feature1</h3>
</div>
<div class="feature-item centered-text">
<h3>Feature2</h3>
</div>
</div>
<footer class="centered-text">
<h2>Footer</h2>
</footer>
</div>
I am trying to recreate a Mondrian painting.
.wrapper {
width: 600px;
height: 600px;
background: url(painting.png) no-repeat;
display: grid;
grid-gap: 40px 20px;
grid-template-rows: 178px 219px 61px 63px;
grid-template-columns: 128px 392px 44px;
}
div {
border: 1px solid black;
background-color: white;
opacity: 0.5;
}
.a {
grid-row: 1/2;
grid-column: 1/2;
}
.b {
grid-row: 2/3;
grid-column: 1/2;
}
.c {
grid-row: 1/3;
grid-column: 2/4;
}
.d {
grid-row: 3/5;
grid-column: 1/2;
}
.e {
grid-row: 3/5;
grid-column: 2/3;
}
.f {
grid-row: 3/4;
grid-column: 3/4;
}
<body>
<div class="wrapper">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
<div class="g">g</div>
</div>
</body>
I pretty much nailed it withe layout. The problem is that between the rows there are different values of gaps. So on one there is e.g. 24px and other 40px. Is there a way a can apply different values on gaps on different rows. Or should I be satisfied with this existing one.
Thank you!
You can't have multiple gap sizes in a single grid.
A workaround would be to use the lowest size of gap for the grid, and complement it with margins whenever needed:
.wrapper {
width: 600px;
height: 600px;
background: url(painting.png) no-repeat;
display: grid;
grid-gap: 20px 20px;
grid-template-rows: 178px 219px 61px 63px;
grid-template-columns: 128px 392px 44px;
}
div {
border: 1px solid black;
background-color: blue;
opacity: 0.5;
}
.a {
grid-row: 1/2;
grid-column: 1/2;
margin-bottom: 20px;
}
.b {
grid-row: 2/3;
grid-column: 1/2;
}
.c {
grid-row: 1/3;
grid-column: 2/4;
}
.d {
grid-row: 3/5;
grid-column: 1/2;
}
.e {
grid-row: 3/5;
grid-column: 2/3;
}
.f {
grid-row: 3/4;
grid-column: 3/4;
}
<body>
<div class="wrapper">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
<div class="d">d</div>
<div class="e">e</div>
<div class="f">f</div>
<div class="g">g</div>
</div>
</body>
I am trying to create four evenly spaced squares displayed in a square pattern (two on top, two on bottom), and centered on the page, much like this:
I have tried to do this in a css grid but when the grid fr get too big the divs stay on the right side of the fr and space the two columns farther apart, regardless of the browser width, like this:
I'd like to shift the Idaho and Nevada divs to the right side of the fr so all four divs are the same distance apart.
Here is my code so far:
Thank you!
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.idaho {
grid-column: 2/3;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.utah {
grid-column: 3/4;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.nevada {
grid-column: 2/3;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
.arizona {
grid-column: 3/4;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
<div class="grid">
<div class="idaho">
<h2>Idaho</h2>
</div>
<div class="utah">
<h2>Utah</h2>
</div>
<div class="nevada">
<h2>Nevada</h2>
</div>
<div class="arizona">
<h2>Arizona</h2>
</div>
</div>
grid-template-columns
Instead of this:
grid-template-columns: 1fr 1fr 1fr 1fr
Use this:
grid-template-columns: 1fr auto auto 1fr
.grid {
display: grid;
grid-template-columns: 1fr auto auto 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.idaho {
grid-column: 2/3;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.utah {
grid-column: 3/4;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.nevada {
grid-column: 2/3;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
.arizona {
grid-column: 3/4;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
<div class="grid">
<div class="idaho">
<h2>Idaho</h2>
</div>
<div class="utah">
<h2>Utah</h2>
</div>
<div class="nevada">
<h2>Nevada</h2>
</div>
<div class="arizona">
<h2>Arizona</h2>
</div>
</div>
When you set the four columns to 1fr, you are distributing container space equally among all columns. As you widen the screen, the columns will expand in equal proportion, creating wider columns than the size of the squares.
When you set the inner columns to auto, they are sized to the content width. Then you can use 1fr on the outer columns to consume all free space from opposite directions, pinning the inner columns to the center at all times.
justify-self: end
You can also keep the original grid-template-columns and add justify-self: end to the left-side squares to get them to shift right inside the column.
.grid {
display: grid;
grid-template-columns: 1fr auto auto 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.idaho {
grid-column: 2/3;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
justify-self: end; /* new */
}
.utah {
grid-column: 3/4;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.nevada {
grid-column: 2/3;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
justify-self: end; /* new */
}
.arizona {
grid-column: 3/4;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
<div class="grid">
<div class="idaho">
<h2>Idaho</h2>
</div>
<div class="utah">
<h2>Utah</h2>
</div>
<div class="nevada">
<h2>Nevada</h2>
</div>
<div class="arizona">
<h2>Arizona</h2>
</div>
</div>
For more about justify-self see:
The difference between justify-self, justify-items and justify-content in CSS Grid
use flexbox for this kind of thing. Makes it a lot easier.
.container{
display:flex;
justify-content:space-evenly;
height:100vh;
}
.left,.right{
display:flex;
flex-direction:column;
justify-content:space-evenly;
}
.box{
height:200px;
width:300px;
border:solid 1px black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example 2</title>
<link rel="stylesheet" type="text/css" href="styles/example2.css" />
</head>
<body>
<div class="container">
<div class='left'>
<div class="box">
<h2>Idaho</h2>
</div>
<div class="box">
<h2>Nevada</h2>
</div>
</div>
<div class='right'>
<div class="box">
<h2>Utah</h2>
</div>
<div class="box">
<h2>Arizona</h2>
</div>
</div>
</div>
</body>
</html>
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
}
.idaho {
grid-column: 2/3;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.utah {
grid-column: 3/4;
grid-row: 1/2;
height: 300px;
width: 300px;
background-color: gray;
}
.nevada {
grid-column: 2/3;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
.arizona {
grid-column: 3/4;
grid-row: 2/3;
height: 300px;
width: 300px;
background-color: gray;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example 2</title>
<link rel="stylesheet" type="text/css" href="styles/example2.css" />
</head>
<body>
<div class="grid">
<div class="idaho">
<h2>Idaho</h2>
</div>
<div class="utah">
<h2>Utah</h2>
</div>
<div class="nevada">
<h2>Nevada</h2>
</div>
<div class="arizona">
<h2>Arizona</h2>
</div>
</div>
</body>
</html>
I am using the grid rows and column. I am getting the issue at the last element. I need the second row with equal height and width. So I tried below code.
expected output is
I am getting the output
.content {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.content div {
background-color: #333;
padding: 30px;
color: #fff;
}
.one {
grid-column: 1/4;
grid-row: 1/3
}
.two {
grid-column: 4/6;
grid-row: 1/3;
}
.three {
grid-column: 1/3;
grid-row: 3/5
}
.four {
grid-column: 3/5;
grid-row: 3/5;
}
.five {
grid-column: 5/6;
grid-row: 3/5;
}
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
You used the number 5 which make it difficult to divide by 3. Use 15 for example and you can easily divide it by 3 and for the first row you will have 9 + 6 instead of 3 + 2
.content {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(15, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.content div {
background-color: #333;
padding: 30px;
color: #fff;
}
.one {
grid-column: 1/10;
grid-row: 1/3
}
.two {
grid-column: 10/16;
grid-row: 1/3;
}
.three {
grid-column: 1/6;
grid-row: 3/5
}
.four {
grid-column: 6/11;
grid-row: 3/5;
}
.five {
grid-column: 11/16;
grid-row: 3/5;
}
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>
UPDATE
As per the OP comments, this is the correct output needed:
.content {
display: grid;
margin: 0 auto;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(150px, auto);
grid-gap: 10px;
}
.content div {
background-color: #333;
padding: 30px;
color: #fff;
}
.one {
grid-column: 1/3;
grid-row: 1/3
}
.two {
grid-column: 3/4;
grid-row: 1/3;
}
.three {
grid-column: 1/2;
grid-row: 3/5
}
.four {
grid-column: 2/3;
grid-row: 3/5;
}
.five {
grid-column: 3/4;
grid-row: 3/5;
}
<div class="content">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
<div class="five">5</div>
</div>