I'm using a flex box to display 8 items that will dynamically resize with my page. How do I force it to split the items into two rows? (4 per row)?
Here is a relevant snip:
(Or if you prefer jsfiddle - http://jsfiddle.net/vivmaha/oq6prk1p/2/)
.parent-wrapper {_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
border: 1px solid black;_x000D_
}_x000D_
.parent {_x000D_
display: flex;_x000D_
font-size: 0;_x000D_
flex-wrap: wrap;_x000D_
margin: -10px 0 0 -10px;_x000D_
}_x000D_
.child {_x000D_
display: inline-block;_x000D_
background: blue;_x000D_
margin: 10px 0 0 10px;_x000D_
flex-grow: 1;_x000D_
height: 100px;_x000D_
}<body>_x000D_
<div class="parent-wrapper">_x000D_
<div class="parent">_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
</div>_x000D_
</div>_x000D_
</body>Add a width to the .child elements. I personally would use percentages on the margin-left if you want to have it always 4 per row.
.child {
display: inline-block;
background: blue;
margin: 10px 0 0 2%;
flex-grow: 1;
height: 100px;
width: calc(100% * (1/4) - 10px - 1px);
}
Here's another way without using calc().
// 4 PER ROW
// 100 divided by 4 is 25. Let's use 21% for width, and the remainder 4% for left & right margins...
.child {
margin: 0 2% 0 2%;
width: 21%;
}
// 3 PER ROW
// 100 divided by 3 is 33.3333... Let's use 30% for width, and remaining 3.3333% for sides (hint: 3.3333 / 2 = 1.66666)
.child {
margin: 0 1.66666% 0 1.66666%;
width: 30%;
}
// and so on!
That's all there is to it. You can get fancy with the dimensions to get a more aesthetic sizes but this is the idea.
Hope it helps. for more detail you can follow this Link
.parent{
display: flex;
flex-wrap: wrap;
}
.parent .child{
flex: 1 1 25%;
/*Start Run Code Snippet output CSS*/
padding: 5px;
box-sizing: border-box;
text-align: center;
border: 1px solid #000;
/*End Run Code Snippet output CSS*/
}<div class="parent">
<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 class="child">6</div>
<div class="child">7</div>
<div class="child">8</div>
</div>.parent-wrapper {_x000D_
height: 100%;_x000D_
width: 100%;_x000D_
border: 1px solid black;_x000D_
}_x000D_
.parent {_x000D_
display: flex;_x000D_
font-size: 0;_x000D_
flex-wrap: wrap;_x000D_
margin-right: -10px;_x000D_
margin-bottom: -10px;_x000D_
}_x000D_
.child {_x000D_
background: blue;_x000D_
height: 100px;_x000D_
flex-grow: 1;_x000D_
flex-shrink: 0;_x000D_
flex-basis: calc(25% - 10px);_x000D_
}_x000D_
.child:nth-child(even) {_x000D_
margin: 0 10px 10px 10px;_x000D_
background-color: lime;_x000D_
}_x000D_
.child:nth-child(odd) {_x000D_
background-color: orange; _x000D_
}<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset="UTF-8">_x000D_
<title>Document</title>_x000D_
<style type="text/css">_x000D_
_x000D_
</style>_x000D_
</head>_x000D_
<body>_x000D_
<div class="parent-wrapper">_x000D_
<div class="parent">_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
</div>_x000D_
</div>_x000D_
</body>_x000D_
</html>;)
Here is another apporach.
You can accomplish it in this way too:
.parent{
display: flex;
flex-wrap: wrap;
}
.child{
width: 25%;
box-sizing: border-box;
}
Sample: https://codepen.io/capynet/pen/WOPBBm
And a more complete sample: https://codepen.io/capynet/pen/JyYaba
Why flex vs. display: inline-block?
Why negative margin?
Either you use SCSS or CSS-in-JS for the edge cases (i.e. first element in column), or you set a default margin and get rid of the outer margin later.
https://codepen.io/zurfyx/pen/BaBWpja
<div class="outerContainer">
<div class="container">
<div class="elementContainer">
<div class="element">
</div>
</div>
...
</div>
</div>
:root {
--columns: 2;
--betweenColumns: 20px; /* This value is doubled when no margin collapsing */
}
.outerContainer {
overflow: hidden; /* Hide the negative margin */
}
.container {
background-color: grey;
display: flex;
flex-wrap: wrap;
margin: calc(-1 * var(--betweenColumns));
}
.elementContainer {
display: flex; /* To prevent margin collapsing */
width: calc(1/var(--columns) * 100% - 2 * var(--betweenColumns));
margin: var(--betweenColumns);
}
.element {
display: flex;
border: 1px solid red;
background-color: yellow;
width: 100%;
height: 42px;
}
I believe this example is more barebones and easier to understand then @dowomenfart.
.child {
display: inline-block;
margin: 0 1em;
flex-grow: 1;
width: calc(25% - 2em);
}
This accomplishes the same width calculations while cutting straight to the meat. The math is way easier and em is the new standard due to its scalability and mobile-friendliness.
I would do it like this using negative margins and calc for the gutters:
.parent {
display: flex;
flex-wrap: wrap;
margin-top: -10px;
margin-left: -10px;
}
.child {
width: calc(25% - 10px);
margin-left: 10px;
margin-top: 10px;
}
Demo: https://jsfiddle.net/9j2rvom4/
.parent {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-column-gap: 10px;
grid-row-gap: 10px;
}
Source: Stackoverflow.com