I want to create a grid layout with grid or flexbox like the images below, if the items are wrapped to new line, ones in the second line must be horizontally centered.
I tried something like this but it doesn't work.
.custom-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.content {
width: 90px;
height: 90px;
background: red;
margin: 20px;
}
<div class="custom-grid">
<div class="grid-item">
<div class="content">hello</div>
</div>
<div class="grid-item">
<div class="content">hello</div>
</div>
<div class="grid-item">
<div class="content">hello</div>
</div>
<div class="grid-item">
<div class="content">hello</div>
</div>
<div class="grid-item">
<div class="content">hello</div>
</div>
</div>
The trick is to use wrap and justify-content.
.wrapper {
display: flex;
background: green;
width: 150px;
flex-wrap: wrap;
justify-content: space-around;
}
.child {
width: 50px;
height: 50px;
background: red;
}
<div class="wrapper">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child">4</div>
<div class="child">5</div>
</div>
Here is a fiddle: https://jsfiddle.net/9qwa1r8u/1/
Hope that helps :-)
You can try a flex layout like below:
.grid {
display: flex;
flex-wrap:wrap;
justify-content:center;
}
.grid > div {
flex:0 1 calc(100%/3);
padding:10px;
box-sizing:border-box;
}
.content {
width: 90px;
height: 90px;
background:red;
margin:auto;
}
<div class="grid">
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
<div class="grid-item">
<div class="content"></div>
</div>
</div>
Related
I need to fix some elements always at the end of the first row on flex container (with flex-wrap: wrap).
Examples (pay attention on button "Expand" ):
I tried to use 'row-reverse' + 'order: -1', but in this case, elements moved to the new row from left to right (when I need from right to left).
Here is my snippet: https://jsbin.com/divavosafu/1/edit?html,css,output
Any ideas?
Just nest the numbered buttons in an element and make both it and the main container a flex container:
.container {
display: flex;
flex-flow: row nowrap;
align-items: flex-start;
resize: horizontal;
overflow: auto;
}
.numbers {
display: flex;
flex-flow: row wrap;
}
.expand {
flex: 1 1 auto;
}
.right {
flex: 0 0 auto;
}
.item {
display: inline-block;
margin: 4px;
padding: 8px;
border: 1px solid gray;
}
<div class="container">
<div class="numbers">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
<div class="expand">
<div class="item">Expand</div>
</div>
<div class="right">
<div class="item right1">Right 1</div>
<div class="item right2">Right 2</div>
</div>
</div>
Looks like I found something similar to solution, but button "Expand" should be in the left "container"
.container {
display: inline-block;
width: 100%;
}
.right {
float: right;
}
.item {
display: inline-flex;
padding: 8px;
border: 1px solid #CECECE;
}
.item:not(:last-child) {
margin-right: 8px;
margin-top: 8px;
}
<div class="container">
<div class="right">
<div class="item expand">Expand</div>
<div class="item ">Right 1</div>
<div class="item ">Right 2</div>
</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
</div>
So I have a structure pretty similar to the snippet below.
The issue I have is that I am trying to make it so that the divs such as child always take the same height relative to the container even if they are empty. So if there are two children they have to be 50% of the parent if there are three children 33.3% of the parent and ec.
Did a lot of digging, tried usingflex-grow and setting it on the children, adding an after content on the childContent class if it was empty but the empty children still collapse.
Is it even possible to achieve equal heights on the children without using js and fixed heights and if yes how?
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: auto;
}
.child {
height: 100%;
display: flex;
flex-direction: column;
}
.childHeader {
display: flex;
flex-direction: row;
}
.headerItem {
background-color: red;
}
.childContent {
background-color: white;
}
.childContent:empty:after {
content: '.';
visibility: hidden;
min-height: 300px;
}
.contentItem {
background-color: skyblue;
border: 3px solid black;
}
<div class="container">
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
<div class="contentItem">1</div>
<div class="contentItem">2</div>
<div class="contentItem">3</div>
<div class="contentItem">4</div>
<div class="contentItem">5</div>
<div class="contentItem">6</div>
<div class="contentItem">7</div>
</div>
</div>
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
</div>
</div>
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
</div>
</div>
</div>
Check this out, I'm not really sure if this is what you want to do.
I just added min-height: calc(100vh - 60px); in your .childContent
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: auto;
}
.child {
display: flex;
flex-direction: column;
}
.childHeader {
display: flex;
flex-direction: row;
}
.headerItem {
display:flex;
flex-basis:100%;
background-color: red;
}
.childContent {
background-color: grey;
position: relative;
display: block;
min-height: calc(80vh - 60px);
}
.childContent:empty::after {
content: '.';
visibility: hidden;
}
.contentItem {
background-color: skyblue;
border: 3px solid black;
}
<div class="container">
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
<div class="contentItem">1</div>
<div class="contentItem">2</div>
<div class="contentItem">3</div>
<div class="contentItem">4</div>
<div class="contentItem">5</div>
<div class="contentItem">6</div>
<div class="contentItem">7</div>
</div>
</div>
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
</div>
</div>
<div class="child">
<div class="childHeader">
<div class="headerItem">1</div>
<div class="headerItem">2</div>
<div class="headerItem">3</div>
<div class="headerItem">4</div>
<div class="headerItem">5</div>
<div class="headerItem">6</div>
<div class="headerItem">7</div>
</div>
<div class="childContent">
</div>
</div>
</div>
Check this one out https://developer.mozilla.org/en-US/docs/Web/CSS/calc
OK, I edited my question and code to easily show what I mean. I need to have:
"menu" - positioned-left, min-height=500px, width=250px - at all times.
"content" - positioned on the right side of "menu", dynamic width to take all remaining space.
Same height for "menu" and "content" at all times. No matter there will be 1 box or 100 inside "content".
"Boxes" should be lined up from left to right and if there are more, they should stretch height of "content" and "menu" should follow the same height.
<div class="header" style="height:150px; background-color:black;" >
</div>
<div class="navbar" style="height:40px; background-color:yellow;" >
</div>
<div class="menu" style="min-height:500px; width:250px; background-color:orange; float:left;" >
</div>
<div class="content" style="height:auto; background-color:blue; float: left; " >
<?php for ($col = 0; $col < 50; $col++)
{
?><div class="box" style="width:80px; height:80px; background-color:white; margin:10px;" ></div><?php
}
?>
</div>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
div {
border: 1px solid black
}
body {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: 150px 40px minmax(500px , 1fr)
}
.header, .navbar {
grid-column: 1 / -1
}
.content {
display: grid;
grid-gap: 20px;
padding: 20px;
grid-template-columns: repeat(auto-fill, 80px);
align-content: start;
justify-content: space-evenly;
}
.box {
width: 80px;
height: 80px;
}
<body>
<div class='header'>
Header
</div>
<div class='navbar'>
Navbar
</div>
<div class='menu'>
Menu
</div>
<div class='content'>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
<div class='box'>box</div>
</div>
</body>
Your goal is easier to achieve with flexbox, as shown in the solution below.
.header {
height: 150px;
background-color: black;
}
.navbar {
height: 40px;
background-color: yellow;
}
.container {
min-height: 500px;
display: flex;
align-items: flex-start;
}
.menu {
min-height: 500px;
height: 100%;
width: 250px;
background-color: orange;
}
.content {
min-height: 500px;
background-color: blue;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.box {
width: 80px;
height: 80px;
background-color: white;
margin: 10px;
}
<div class="header">
</div>
<div class="navbar">
</div>
<div class="container">
<div class="menu">
</div>
<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>
</div>
how can I have my grid container always stay centered but the elements with fixed width are still floating left, even on breaking? Just like in my example, but as shown, its not centered. Is there a need of js or is it fixable with css only? Thanks.
Here what I mean:
#wrap {
width: 100%;
background: #f8f8f8;
height: 300px;
}
#container {
width: 100%;
max-width: 400px;
background: #f1f1f1;
margin: auto;
}
#item {
background: white;
height: 50px;
width: 50px;
float: left;
padding: 5px;
}
#item1 {
width: 100%;
height: 100%;
background: red;
}
<div id="wrap">
<div id="container">
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
<div id="item">
<div id="item1"></div>
</div>
</div>
</div>
Note: Use class for multiple items instead of id. Same id should not be repeated in the code.
You can use Flexbox here. Use justify-content:center for align center of items.
Stack Snippet
#wrap {
width: 100%;
background: #f8f8f8;
height: 300px;
}
#container {
width: 100%;
max-width: 400px;
background: #f1f1f1;
margin: auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.item {
background: white;
height: 50px;
width: 50px;
padding: 5px;
box-sizing: border-box;
}
.item1 {
width: 100%;
height: 100%;
background: red;
}
<div id="wrap">
<div id="container">
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
<div class="item">
<div class="item1"></div>
</div>
</div>
</div>
How can I force flexbox items to have same height.
In examples I found online, people are using align-items: stretch css property, but my example is more complex.
Here is a codepen example:
.container {
background-color: red;
display: flex;
align-items: stretch;
}
.boxes {
background-color: yellow;
margin: 5px;
display: flex;
}
.boxes-column {
flex-direction: column;
}
.box {
background-color: green;
width: 100px;
margin: 5px;
}
.heading {
background-color: pink;
}
<body>
<div class="container">
<div class="boxes boxes-column">
<div class="heading">This is heading</div>
<div class="boxes">
<div class="box">Content content content content content content content</div>
<div class="box">Content content</div>
<div class="box">Content</div>
<div class="box">Contento contento</div>
<div class="box">Cc</div>
<div class="box">Contetno contento contento</div>
</div>
</div>
<div class="boxes boxes-column">
<div class="heading">This is heading 2</div>
<div class="boxes">
<div class="box">Content</div>
<div class="box">Contentno Contetn</div>
<div class="box">C</div>
</div>
</div>
</div>
</body>
Height of items items below 'Heading' and height of items below 'Heading 2' should be equal.
Used this css and now the boxes have the same height:
.container > .boxes > .boxes {
flex: 1;
}
Take a look at the below snippet:
.container {
background-color: red;
display: flex;
align-items: stretch;
}
.boxes {
background-color: yellow;
margin: 5px;
display: flex;
}
.boxes-column {
flex-direction: column;
}
.box {
background-color: green;
width: 100px;
margin: 5px;
}
.heading {
background-color: pink;
}
.container > .boxes > .boxes {
flex: 1;
}
<body>
<div class="container">
<div class="boxes boxes-column">
<div class="heading">This is heading</div>
<div class="boxes">
<div class="box">Content content content content content content content</div>
<div class="box">Content content</div>
<div class="box">Content</div>
<div class="box">Contento contento</div>
<div class="box">Cc</div>
<div class="box">Contetno contento contento</div>
</div>
</div>
<div class="boxes boxes-column">
<div class="heading">This is heading 2</div>
<div class="boxes">
<div class="box">Content</div>
<div class="box">Contentno Contetn</div>
<div class="box">C</div>
</div>
</div>
</div>
</body>