I have created grids using divs. I have made divs to behave as tables.I have made 4 grids of width 50vh. I want height to adapt to these width.
Mostly resolutions will work fine with these codes but with mobile there will be huge difference in height. I want this grids to be equal!
#grids-container {
display: table;
}
#grids-row {
display: row;
}
#grid-1-1,
#grid-1-2,
#grid-1-3,
#grid-1-4 {
display: table-cell;
width: 50vh;
height: 50vh;
border: 1px solid black;
}
#grid-2-1,
#grid-2-2,
#grid-2-3,
#grid-2-4 {
display: table-cell;
width: 50vh;
height: 50vh;
border: 1px solid black;
}
<div id="grids-container">
<div class="grids-row">
<div id="grid-1-1">
dsfdsfds
</div>
<div id="grid-1-2">
dsfdsfds
</div>
<div id="grid-1-3">
dsfdsfds
</div>
<div id="grid-1-4">
dsfdsfds
</div>
</div>
<div class="grids-row">
<div id="grid-2-1">
dsfdsfds
</div>
<div id="grid-2-2">
dsfdsfds
</div>
<div id="grid-2-3">
dsfdsfds
</div>
<div id="grid-2-4">
dsfdsfds
</div>
</div>
</div>
Related
I am scaling several divs and have one that is larger than the others in width and height, the other divs that are after this one are too low, not aligned on the same line.
Note: execute the code below on full page, Follows the code:
body {
background-color: #2E5173;
}
div {
border-radius: 10px;
background-color: white;
margin: 10px;
width: 240px;
height: 250px;
display: inline-block;
box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
}
.big {
width: 508px;
height: 508px;
}
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class=""> </div>
<div class="big"> </div>
<div class="">this div is very low</div>
<div class="">this div is very low</div>
The code above looks like this:
I need it to look like this:
Can anyone help?
You can easily do this using CSS grid:
.container {
display:grid;
grid-template-columns:repeat(auto-fit,240px); /* The width */
grid-auto-rows:250px; /* The height */
grid-auto-flow:dense; /*This is the important property*/
/* The margin */
grid-gap:20px;
padding:10px;
}
.container div {
border-radius: 10px;
background-color: #2E5173;
}
.big {
grid-column:span 2; /* Take twice the width*/
grid-row:span 2; /* Take twice the height*/
}
<div class="container">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div class="big"> </div>
<div>this div is very low</div>
<div>this div is very low</div>
</div>
CSS Grid can provide you with great control of your layouts and is not super complicated. A few of the resources I've used in the last are listed below:
www.w3schools.com/css/css_grid.asp
learncssgrid.com
css-tricks.com/snippets/css/complete-guide-grid
CSS Grid also works well with media queries if you need the page to be responsive.
I have nested block table.
.cell_group,
.cell_group--root,
.cell_group--nested {
display: table;
border-collapse: collapse;
}
.cell_group__row {
display: table-row;
}
.cell_group__cell,
.cell_group__edge_cell {
display: table-cell;
height: 1px;
box-shadow: inset 0 0 0 1px #f00;
}
.cell_group__edge_cell {
padding: 5px;
}
.cell_group__wrapper {
width: 100%;
height: 100%;
}
.cell_group--nested {
height: 100%;
}
<div class="cell_group">
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
<div class="cell_group__cell">
<div class="cell_group--nested">
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
</div>
</div>
<div class="cell_group__cell">
<div class="cell_group--nested">
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
<div class="cell_group__row">
<div class="cell_group__edge_cell">test</div>
</div>
</div>
</div>
</div>
</div>
Everything works fine in all major browsers... but not in IE10. Central column doesn't fill the full height of the container and leaves space. How can I make central cells to equally distribute to full height of the column?
Demo
Html
When vertical scroll appears, also horizontal scroll appears and elements in div are still wider then div container. Screen
.scroll {
overflow-y: auto;
background: #CCC;
display: inline-block;
height: 150px;
}
.element {
background: #CD8115;
}
Css
<div class="scroll">
<div class="list">
<div class="element">111111111111111111111</div>
<div class="element">22</div>
...
</div>
</div>
Set the list css class with value display: inherit. This will make the child span then entire width.
.list{
display: inherit;
}
.scroll {
overflow-y: auto;
background: #CCC;
display: inline-block;
height: 150px;
}
.list{
display: inherit;
}
.element {
background: #CD8115;
}
<h2>With scroll</h2>
<div class="scroll">
<div class="list">
<div class="element">111111111111111111111</div>
<div class="element">22</div>
<div class="element">333333333</div>
<div class="element">4444</div>
<div class="element">5555555</div>
<div class="element">66</div>
<div class="element">777</div>
<div class="element">8888</div>
<div class="element">99999</div>
<div class="element">0</div>
</div>
</div>
<!-- Absolt same, exept height: auto-->
<h2>Without scroll</h2>
<div class="scroll" style="height: auto;">
<div class="list">
<div class="element">111111111111111111111</div>
<div class="element">22</div>
<div class="element">333333333</div>
<div class="element">4444</div>
<div class="element">5555555</div>
<div class="element">66</div>
<div class="element">777</div>
<div class="element">8888</div>
<div class="element">99999</div>
<div class="element">0</div>
</div>
</div>
Is it possible to fill an entire page with 16 divs but still have it responsive so it can be viewed on different devices. At the moment I have only used percentages but I am open to other solutions if there are any.
-How it is suppose to look.
The webpage has to contain 16 divs in total four spread across the top first quater of the webpage four spread across the second quarter of the page four spread across the third quarter of the page and four spread across the forth quarter of the page.
So overall it is suppose to look like a big cube or look like the 2408 game http://gabrielecirulli.github.io/2048/
-My code so far
***HTML***
<!doctype html>
<head>
<link rel="stylesheet" href="master.css">
</head>
<!-- ========================================================================================================================= -->
<div id="s1" class="divq"> </div> <div id="s2" class="divq"> </div> <div id="s3" class="divq"> </div> <div id="s4" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s5" class="divq"> </div> <div id="s6" class="divq"> </div> <div id="s7" class="divq"> </div> <div id="s8" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s9" class="divq"> </div> <div id="s10" class="divq"> </div> <div id="s11" class="divq"> </div> <div id="s12" class="divq"> </div>
<!-- ========================================================================================================================= -->
<div id="s13" class="divq"> </div> <div id="s14" class="divq"> </div> <div id="s15" class="divq"> </div> <div id="s16" class="divq"> </div>
<!-- ========================================================================================================================= -->
***CSS***
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
.divq {
height: 25%;
margin: 0px;
width: 25%;
}
#s1 {
background-color: rgb(100,100,100);
float: left;
}
#s2 {
background-color: rgb(120,100,100);
}
#s3 {
background-color: rgb(100,120,100);
}
#s4 {
background-color: rgb(100,100,120);
float: right;
}
#s5 {
background-color: rgb(140,100,100);
float: left;
}
#s6 {
background-color: rgb(100,140,100);
}
#s7 {
background-color: rgb(100,100,140);
}
#s8 {
background-color: rgb(160,100,100);
float: right;
}
#s9 {
background-color: rgb(100,160,100);
float: left;
}
#s10 {
background-color: rgb(100,100,160);
}
#s11 {
background-color: rgb(180,100,100);
}
#s12 {
background-color: rgb(100,180,100);
float: right;
}
#s13 {
background-color: rgb(100,100,180);
float: left;
}
#s14 {
background-color: rgb(200,100,100);
}
#s15 {
background-color: rgb(100,200,100);
}
#s16 {
background-color: rgb(100,100,200);
float: right;
}
Make them all float: left, and don't forget to add box-sizing: border-box to all elements (via .divq)
That way you can add margings and paddings without breakting your grid.
If you are fine with flexbox, you can span four rows inside a wrapper with display: flex and flex-direction: column, each including four columns.
Sample Fiddle:
http://fiddle.jshell.net/n50tnnka/2/
Maybe you could try using a Bootstrap grid? It's fairly easy to use!
Just give your div's the class col-md-3. That way, the div's will know they can take up 3/12th of the screen = 25% = 4 divs per row.
If you then contain all these divs in one parent div with fixed width and height, you should be fine.
<div id="cube">
<div class="col-md-3" id="s1"></div>
<div class="col-md-3" id="s2"></div>
<div class="col-md-3" id="s3"></div>
<div class="col-md-3" id="s4"></div>
<div class="col-md-3" id="s5"></div>
<div class="col-md-3" id="s6"></div>
<div class="col-md-3" id="s7"></div>
<div class="col-md-3" id="s8"></div>
<div class="col-md-3" id="s9"></div>
<div class="col-md-3" id="s10"></div>
<div class="col-md-3" id="s11"></div>
<div class="col-md-3" id="s12"></div>
<div class="col-md-3" id="s13"></div>
<div class="col-md-3" id="s14"></div>
<div class="col-md-3" id="s15"></div>
<div class="col-md-3" id="s16"></div>
</div>
By still using the id's you can give any square the color you like, but by using bootstrap you won't have to use float.
You can do this easily with Flexbox like this
DEMO
.content {
display: flex;
height: 100vh;
width: 100vw;
flex-wrap: wrap;
box-sizing: border-box;
}
.box {
flex: 25%;
border: 1px solid black;
padding: 5px;
box-sizing: border-box;
}
<div class="content">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
For better browser support (than flex) you can use display table-cell for your elements
But you will have to nest each "row" (four divs) in a parent element:
HTML:
<div class="row">
<div id="s1" class="divq"> </div>
<div id="s2" class="divq"></div>
<div id="s3" class="divq"> </div>
<div id="s4" class="divq"> </div>
</div>
CSS:
html {
height: 100%;
width: 100%;
margin: 0px;
}
body {
height: 100%;
width: 100%;
margin: 0px;
}
div {
box-sizing:border-box;
}
.row{
display: table;
table-layout: fixed;
border-spacing:0px;
width:100%;
height:25%;
}
.divq {
display:table-cell;
height: 25%;
width: 25%;
}
DEMO: https://jsfiddle.net/Nillervision/06z1L5tg/
I am using bootstrap and I have two container inside a bootstrap container. Like this:
<div class="container">
<div id="container-map">
aasdasd
</div>
<div id="container-buttons">
asdasda
</div>
</div>
What I am trying to do is center the two divs, #container-map and #container-buttons side by side, inside the main container.
This is my custom CSS for the two divs:
#container-map,
#container-buttons {
display: inline-block;
margin: 0 auto 0 auto;
width: 500px;
height: 500px;
}
Is there a reason you don't want to use the bootstraps built in gridsystem? Something like this?
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="container-map">
asdf
</div>
</div>
<div class="col-md-3">
<div class="container-buttons">
asdf
</div>
</div>
</div>
</div>
Just change your CSS to this
#container-map,
#container-buttons {
float: left;
margin-left: auto;
}
Both containers will be centered and side by side
You can try the code from this example (using text-align: center; on .container display:inline-block; for divs).
<style>
.container {
position:relative;
text-align:center;
}
#dv1, #dv2 {
display:inline-block;
width:100px;
margin:0 3px;
background:#33f;
}
</style>
<div class="container">
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>
</div>
you make both your divs to take equal height using flex. You can refer the link to find out the browsers which support it. Have a look at this:
.container {
display: flex;
width: 400px;
background: #eee;
}
.column {
flex: 1;
background: #fff;
border: 1px solid #ccc;
margin: 1px;
}
<div class="container">
<div class="column">
<p>aasdasd</p>
</div>
<div class="column">
<p>asdasda</p>
<p>asdasda</p>
</div>
</div>