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);
}
Related
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.
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'm trying to create this layout
I have this aurelia template
And this CSS rules
#containerPlanner {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(4, 1fr);
}
#cabecera {
display: flex;
grid-column: 1/4;
grid-row: 1;
grid-area: cabecera;
}
#resumen {
grid-column: 1;
grid-row: 2;
border: 2px solid black;
background-color: aqua;
grid-area: resumen;
}
#grafica {
grid-column: 2/4;
grid-row: 2;
border: 2px solid black;
background-color: yellow;
grid-area: grafica;
}
#opciones {
display: flex;
grid-column: 1/4;
grid-row: 3;
grid-area: opciones;
}
#datos {
grid-column: 1/4;
grid-row: 4;
grid-area: datos;
}
But the result is this
I don't understand why the resumen section occupies the entire width of the screen if it has grid-column:1.
And the same with grafica section
Any idea please?
Regards
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>
Is there any way that I can create a gallery like this
on bootstrap using an unordered list? I've accomplished that look with the column system but I really needed to use li items for this project.
So basically I want to create a list displayed as a grid. And it needs to be responsive as well. I want it turn into a one-column on mobile:
The reason why I want to use ul/li is because I'll be using wordpress and would like to use the wp_list_pages function.
This might be very easy but I just can't think of a solution that doesn't involve workarounds.
Thanks!
This is easier if use CSS Grids:
.gallary{
margin-top:50px;
width:80%;
height:100%;
display: grid;
grid-template-columns: 1fr 0.5fr 1fr;
grid-template-rows: 300px 200px;
}
.area1{
grid-column: 1/2;
grid-row: 1/2 ;
background-color: blue;
}
.area2{
grid-column: 2/4;
grid-row: 1/1;
background-color: yellow;
}
.area3{
grid-column: 1/2;
grid-row: 2/2;
background-color: green;
}
.area4{
grid-column: 2/3;
grid-row: 2/2;
background-color: orange;
}
.area5{
grid-column: 3/4;
grid-row: 2/2;
background-color: purple;
}
#media (max-width: 650px) {
.gallary{
margin-top:50px;
width:100%;
height:100%;
display: grid;
grid-template-columns: 100%;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
}
.area1{
grid-column: 1/-1;
grid-row: 1/2 ;
background-color: blue;
}
.area2{
grid-column: 1/-1;
grid-row: 2/3 ;
background-color: yellow;
}
.area3{
grid-column: 1/-1;
grid-row: 3/4 ;
background-color: green;
}
.area4{
grid-column: 1/-1;
grid-row: 4/5 ;
background-color: orange;
}
.area5{
grid-column: 1/-1;
grid-row: 5/6;
background-color: purple;
}
}
<div class="gallary">
<div class="area1">AAA</div>
<div class="area2">AAA</div>
<div class="area3">AAA</div>
<div class="area4">AAA</div>
<div class="area5">AAA</div>
</div>