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>
Related
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>
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
I am trying to stack elements on top of each other. In my situation I have elements with different heights that leads to unwanted white space.
I am looking for 6 and 7 boxes to move up with all corresponding elements under them.
.blockParent {
text-align: center;
position: relative;
width: 90%;
left: 5%;
}
.block {
position: relative;
display: inline-block;
width: 500px;
background-color: red;
height: 200px;
margin: 5px;
}
.smaller {
height: 100px;
vertical-align: top;
}
<div class="blockParent">
<div class="block">
</div>
<div class="block">
</div>
<div class="block smaller">
</div>
<div class="block smaller">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block ">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
Results in this:
I think flexbox might be a solution but I have no experience with flexbox.
Any ideas? Thanks in advance!
Flexbox wasn't designed to solve that. You can use CSS multi-columns instead. Note, the display order changes from horizontal to vertical.
.blockParent {
column-count: 3;
}
.block {
display: inline-block;
vertical-align: top;
background-color: silver;
width: 100%;
height: 200px;
margin: 5px;
}
.smaller {
height: 100px;
}
<div class="blockParent">
<div class="block"></div>
<div class="block"></div>
<div class="block smaller"></div>
<div class="block smaller"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block "></div>
<div class="block"></div>
<div class="block"></div>
</div>
.blockParent {
text-align: center;
position: relative;
width: 90%;
/* left: 5%; */
margin: 0 auto;
}
.block {
position: relative;
display: inline-flex;
width: 500px;
background-color: red;
height: 200px;
margin: 5px;
}
<div class="blockParent">
<div class="block">
</div>
<div class="block">
</div>
<div class="block smaller">
</div>
<div class="block smaller">
</div>
<div class="block">
</div>
<div class="block">
</div>
<div class="block ">
</div>
<div class="block">
</div>
<div class="block">
</div>
</div>
https://s.codepen.io/fasiya656/debug/NOrNQN/XxkVwaPeaooM
I would like to produce the following template with div elements
The idea is that I would like a div element to have a specific position relative to another div element containing it that would be itself positioned relatively to another div element containing it.
I get the relation between two div elements by making one have a position:absolute and the container having a position:relative
But how to I make it all relative to the big container.
Here is an image explaining what i'm describing on top and what i'm trying to achieve.
I managed to do some code for you on JSFiddle. Here you go:
JSFiddle Demo
You can enlarge the output window's width and then set width etc according to your project.
body {
margin: 0;
padding: 0;
}
* {
webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.wrapper {
margin: 50px auto 0;
max-width: 600px;
}
.outer_div {
border: 3px solid green;
padding: 10px;
}
.inner_div {
padding: 10px;
}
.inner_div .box:nth-child(3n) {
margin: 0;
}
.inner_div .box {
border: 3px solid #03A9F4;
width: 172px;
float: left;
height: 200px;
margin: 0 auto 12px;
margin-right: 10px;
}
.inner_div {
padding: 10px;
border: 2px solid red;
display: block;
width: 98%;
margin: 10px auto 0;
overflow: auto;
}
.inner_div:last-child {
padding-bottom: 0;
}
<div class="wrapper">
<div class="outer_div">
<div class="inner_div">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
</div>
<div class="inner_div">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
<div class="box1">
</div>
</div>
</div>
</div>
You can do it like this :
HTML :
<div class="div1">
<div class="div2">
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
</div>
<div class="div2">
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
<div class="div3"></div>
</div>
</div>
CSS :
.div1 {
width:300px;
height:400px;
}
.div2 {
width:100%;
height:50%;
}
.div3 {
width:33.3%;
height:50%;
float:left;
}
Or you can simply use HTML Tables.
To explore another possibility, here is a flexbox example:
http://codepen.io/JKudla/pen/evPJPW
CSS:
main {
display: flex;
flex-direction: column;
}
section {
flex: 1;
display: flex;
flex-wrap: wrap;
}
article {
width: 33.3333%;
}
HTML:
<main>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
<section>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
<article></article>
</section>
</main>
Question: How can I get a border to stretch to the height of the parent and surround child cell. Given I am using flexbox and aligning to baseline.
Can this be done with all css?
More Details:
I am using flex box to align my items in each row to a certain baseline. It is centered on each cell under "center here" in the following picture:
When I hover currently on each item it hovers with a solid line with a 10px margin around each cell:
I want the on hover border to stretch to the top and bottom of the row on hover like this:
That way when I hover on each item, their hover border boxes would line up like this:
^ this is what I would like it to look like if I turn hover on, on each cell.
codepen
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
}
.flex-container {
overflow: hidden; position: relative;
display: -webkit-flex;
display: flex;
-webkit-align-items: baseline;
align-items: baseline;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>
Just a few rules that you'll need to adjust to your flex items:
.flex-item {
border: 1px solid lightblue;
transition: .7s;
display: flex;
align-items: flex-end;
}
.flex-container {
overflow: hidden;
position: relative;
display: -webkit-flex;
display: flex;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
justify-content: flex-start;
}
See code snippet below:
/* on hover i want this to be a box around the item, and to have the top and the bottom of the border be touching the top/bottom of the row it is on */
.flex-item:hover {
border: 1px solid darkred;
}
/* so item doesn't move when not hovering */
.flex-item {
border: 1px solid lightblue;
transition: .7s;
display: flex;
align-items: flex-end;
}
.flex-container {
overflow: hidden;
position: relative;
display: -webkit-flex;
display: flex;
width: 400px;
height: 350px;
background-color: lightblue;
flex-wrap: wrap;
padding: 10px;
justify-content: flex-start;
}
.inner-wrapper {
display: inline-block;
text-align: center;
width: 100px;
margin: 10px;
background-color: cornflowerblue;
}
.flex-body {
border-bottom: 1px solid #fff;
}
.flex-body-more {
float: left;
clear: left;
width: 100%;
}
.flex-img {
justify-content: center;
align-items: center;
}
<div class="flex-container">
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1 longer title</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x90/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text more text more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/90x40/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
<div class="flex-item">
<div class="inner-wrapper">
<div class="flex-title">flex title1</div>
<div class="flex-img">
<img src='http://dummyimage.com/40x50/000/ffffff&text=hi'>
</div>
<div class="flex-body">center here</div>
<div class="flex-body-more">more text</div>
</div>
</div>
</div>