It seems that bootstrap can only produce horizontal grid systems which is making it hard for me to try develop a project. Here's what I am trying to do:
My page is divided into 4 sections, the leftside height of each blocks are different to the height of the rightside blocks.
I want to make the leftside have the same equal height while the right side has a different height each width which I can do when the grid is a horizontal system.
I want box1 and box2 to be the same height (vh-50) and then box3 to have the equal height.
my desired grid layout:
I've tried doing it like this but it doesn't work and look horrible.
#infoBox {
height: 50vh;
width: 60vh;
}
#tracklistBox {
height: 60vh;
width: 40vh;
}
#playBox {
height: 50vh;
}
#episodesBox {
height: 40vh;
}
<body class="d-flex flex-column min-vh-100">
<div class="container-fluid">
<div class="row ">
<div id="infoBox" class="col border">
1 of 2
</div>
<div id="tracklistBox" class="col border">
2 of 2
</div>
</div>
<div class="row">
<div id="playBox" class="col border">
1 of 3
</div>
<div id="episodesBox" class="col border">
2 of 3
</div>
</div>
</div>
</body>
It's not bootstrap but you can use the grid system
.parent {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 {
grid-area: 1 / 1 / 3 / 3;
background-color: aqua;
}
.div2 {
grid-area: 3 / 1 / 5 / 3;
background-color: yellow;
}
.div3 {
grid-area: 1 / 3 / 4 / 4;
background-color: violet;
}
.div4 {
grid-area: 4 / 3 / 5 / 4;
background-color: greenyellow;
}
<div class="parent">
<div class="div1">Box 1</div>
<div class="div2">Box 2</div>
<div class="div3">Box 3</div>
<div class="div4">Box 4</div>
</div>
Related
I need the grid ad big as the page (it should touch the top the bottom and both sides) and I'd like it to be non-scrollable.
HTML:
<div class="wrapper">
<div class="prova">One</div>
<div class="prova"> </div>
<div class="prova">Three</div>
<div class="prova">Four</div>
<div class="prova"> five </div>
<div class="prova">Six</div>
<div class="prova">Seven</div>
<div class="prova">Eight</div>
<div class="prova">Nine</div>
<div class="prova">Ten</div>
<div class="prova">Eleven</div>
<div class="prova">Twelve</div>
</div>
CSS:
.wrapper {
padding-top: 10%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 100px;
}
.prova{
border: 1px solid;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
I've read multiple questions but I couldn't find any solution that works fine for me.
As you can see in the picture above the grid doesn't touch neither the top or the bottom!
Set gird-auto-rows to use a percentage of the viewport height. Equal amounts per expected row. So in your case 25vh. Then remove any padding or margin around the grid.
html, body {
margin: 0
}
.wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 25vh;
width: 100%;
}
.prova{
border: 1px solid;
}
.wrapper div:nth-child(2) {
grid-column: 3;
grid-row: 2 / 4;
}
.wrapper div:nth-child(5) {
grid-column: 1 / 3;
grid-row: 1 / 3;
}
<div class="wrapper">
<div class="prova">One</div>
<div class="prova"> </div>
<div class="prova">Three</div>
<div class="prova">Four</div>
<div class="prova"> five </div>
<div class="prova">Six</div>
<div class="prova">Seven</div>
<div class="prova">Eight</div>
<div class="prova">Nine</div>
<div class="prova">Ten</div>
<div class="prova">Eleven</div>
<div class="prova">Twelve</div>
</div>
If you want it to touches the top just remove the padding
And for other sides just set the width and height of the wrapper to 100vh and 100vw
I'm trying to recreate this 4 image structure in the way of the image below, however, I am doing this for an email template so the margin minus doesn't work.
generally, I tried to float left the images and replaced the margin minus with:
position: relative; top: -px;
, but that also doesn't work. am I even approaching this in the right way? or is there an easier way of doing this whole thing.
(the email template is done in SendGrid)
You can try with css grid and grid areas:
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
justify-content: center;
}
.item {
padding: 1em;
}
.div1 {
grid-area: 1 / 1 / 2 / 3;
border: 1px solid red;
}
.div2 {
grid-area: 2 / 1 / 4 / 2;
border: 1px solid purple;
}
.div3 {
grid-area: 1 / 3 / 3 / 4;
border: 1px solid green;
}
.div4 {
grid-area: 3 / 2 / 4 / 4;
border: 1px solid blue;
}
<div class="item">text</div>
<div class="container">
<div class="div1 item"> 1</div>
<div class="div2 item"> 2</div>
<div class="div3 item"> 3</div>
<div class="div4 item"> 4</div>
</div>
I've got a really simple grid set up in CSS, but when I look at the grid lines in the inspector there's a strange irregularity at the bottom. I can't understand why this exists when the rest of the grid lines are all regular.
There's no special styling on div-4, it's just the same as the rest. Is it something to do with the margins produced by the h3 tag?
HTML
<div class="left-sidebar-grid">
<div class="div1">
<h3>Div1</h3>
</div>
<div class="div2">
<h3>Div2</h3>
</div>
<div class="div3">
<h3>Div3</h3>
</div>
<div class="div4">
<h3>Div4</h3>
</div>
</div>
CSS
.left-sidebar-grid {
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: repeat(8, 1fr);
grid-gap: 16px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 4 / 2; }
.div3 { grid-area: 4 / 1 / 10 / 2; }
.div4 { grid-area: 10 / 1 / 11 / 2; }
You defined only 8 explicit rows and you have placed the div4 starting at line 10 which will create 2 extra rows so you will end up with 10 rows in total where only 8 are sized using the 1fr and 2 will have an auto size: the empty one you see and the one where you placed div4.
To avoid this use grid-auto-rows:1fr instead of your template in order to make sure all the rows are sized the same way:
.left-sidebar-grid {
height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
grid-gap: 16px;
}
.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 2 / 1 / 4 / 2; }
.div3 { grid-area: 4 / 1 / 10 / 2; }
.div4 { grid-area: 10 / 1 / 11 / 2; }
<div class="left-sidebar-grid">
<div class="div1">
<h3>Div1</h3>
</div>
<div class="div2">
<h3>Div2</h3>
</div>
<div class="div3">
<h3>Div3</h3>
</div>
<div class="div4">
<h3>Div4</h3>
</div>
</div>
You can also simplify your code like below:
.left-sidebar-grid {
display: grid;
grid-template-columns: 1fr;
grid-auto-rows: 1fr;
grid-gap: 16px;
}
.div1 {
grid-row:span 1;
}
.div2 {
grid-row:span 2;
}
.div3 {
grid-row:span 6;
}
.div4 {
grid-row:span 1;
}
<div class="left-sidebar-grid">
<div class="div1">
<h3>Div1</h3>
</div>
<div class="div2">
<h3>Div2</h3>
</div>
<div class="div3">
<h3>Div3</h3>
</div>
<div class="div4">
<h3>Div4</h3>
</div>
</div>
I have html div like
div A
div B
Div D
div c
Div E
i want structure like
div A Div C
div B div D
Div E
i did for
.c {
top: 0;
right: 220px;
position: absolute;
}
now div c is in top,Next i want Div D
.d {
top: 566px;
position: absolute;
right: 291px;
}
i can adjust this but problem is that when i extend content from Div c it will overlap to div D?How can i move Div D under Div C?please help
Here is my code
<div>
<ul>
<li>
<h3>Our Team</h3>
</li>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li style="top:20px; position:absolute; right:120px">e</li>
<li style="top:20px; position:absolute; right:120px">f</li>
</ul>
</div>
You Can use CSS Grid Instead:
Complete Grid Guide
First Define your Grid Template Areas:
grid-template-areas: "i1 i3" ". ." "i2 i4" "i5 .";
grid-template-rows: repeat(4,1fr);
grid-template-areas: Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property
each "" refer to row.
For example: first row have two columns:
1- i1 takes 1 of 2 from the first row.
2- i2 takes 1 of 2 from the first row.
grid-template-rows: repeat(4,1fr): will make sure that all rows have same height (even empty ones).
To apply this area to div:
1- Define the div in html:
<div class="item i1">Div A</div>
2- add to css:
.i1 { grid-area: i1}
and so on.
Working Demo:
.grid {
display: grid;
grid-template-areas: "i1 i3" ". ." "i2 i4" "i5 .";
grid-template-rows: repeat(4, 1fr);
grid-gap: 10px;
margin: 25px;
}
.i1 {
grid-area: i1
}
.i2 {
grid-area: i2
}
.i3 {
grid-area: i3
}
.i4 {
grid-area: i4
}
.i5 {
grid-area: i5
}
.item {
min-height: 50px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid black;
}
<div class="grid">
<div class="item i1">Div A</div>
<div class="item i2">Div B</div>
<div class="item i3">Div C</div>
<div class="item i4">Div D</div>
<div class="item i5">Div E</div>
</div>
You can use columns are rows to create that layout
Demo:
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
<div class="row">
<div class="column">
<div class="a">div a</div>
</div>
<div class="column">
<div class="c">div c</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="b">div b</div>
</div>
<div class="column">
<div class="d">div d</div>
</div>
</div>
<div class="row">
<div class="column">
<div class="e">div e</div>
</div>
</div>
You can use CSS Grids if you just want to adjust the content
[Updated]I was warned that you want a specific position so I made the changes that can solve the problem
main{max-width: 1170px; margin:0 auto; background:#f8f8f8; min-height:100vh;}
.grid-div div { border:1px solid #ccc; background: #f0f0f0; min-height:150px; }
.grid-div {
display:grid;
grid-template-columns: 1fr 1fr;
grid-gap:20px;
}
.a{grid-column: 1; grid-row: 1; }
.b{grid-column: 1; grid-row: 2; margin-top:60px; }
.c{grid-column: 2; grid-row: 1; }
.d{grid-column: 2; grid-row: 2; margin-top:60px; }
.e{grid-column: 1; grid-row: 3; }
.f{grid-column: 2; grid-row: 3; }
<DOCTYPE html>
<html>
<head>
<title>Grid Test</title>
</head>
<body>
<main>
<div class="grid-div">
<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>
</main>
</body>
<html>
if you want to check more options to use in grid see here https://www.w3schools.com/css/css_grid.asp
If I have a grid like this:
Is there a way to automatically push the grid item 3 up to take the space of grid item 1?
Structure:
<div id="1"></div>
<div id="2">Content</div>
<div id="3">Content</div>
For grid item 2 I do this:
grid-row: 1 / span 2;
But i cannot do that for grid item 3 because then if there is content in item 1, it overlaps it. And in my case I do not know if there is content or not
It's almost automatic. Set for div2 the column 2 and the rows 1-2. And let the other divs to occupy the remaining space freely:
.container {
display: grid;
grid-template-columns: auto auto;
border: solid 1px red;
margin: 10px;
}
#div2 {
grid-row: 1 / span 2;
grid-column: 2;
background-color: yellow;
}
<div class="container">
<div id="1"></div>
<div id="div2">Content</div>
<div id="3">Content</div>
</div>
<div class="container">
<div id="1">1</div>
<div id="div2">Content</div>
<div id="3">Content</div>
</div>