Reputation: 9491
So that when I stretch or shrink the browser's width,
My markup:
<div class="parent">
<div class="child">...</div>
<div class="child">...</div>
...
</div>
CSS:
.parent{
margin-right: -2%; /* to compensate for the unwanted margin of what ends up being the right-most element */
}
.child{
display: inline-block;
width: 23% /* I want 4 columns, so it'll be a little less than 25%, right? */
margin-right: 2% /* So width + margin-right percent add up to 25% */
margin-bottom: ? /* Can't say 2% because it's NOT 2% of the parent container's width */
height: 100px; /* constant value */
}
If possible, I don't want to create extra markup or use JavaScript to fix achieve this.
Upvotes: 1
Views: 1272
Reputation: 38
If it's not necessary for you to have percentaged margins, you can try setting static margins (for example 20px) and calculated width (25% - 20px);
.parent{
margin-right: -20px;
}
.child{
display: inline-block;
vertical-align: top;
width: calc(25% - 20px);
margin-right: 20px;
margin-bottom: 20px;
height: 100px;
}
Upvotes: 2
Reputation: 3153
Flexbox & viewport height solution
.container {
display: flex;
margin-bottom: 10vh; //Margin bottom of 10% of viewport height applied to the container instead of the item
}
.item {
height: 100px;
margin-right: 20px; //Flexbox automatically handels that (may wanna switch off for the last child)
background-color: tomato;
flex: 1; //All items take equal width to fill the container
}
P.S. I didn't get what you meant by "equal horizontal & vertical margins", but if you meant that horizontal margin == vertical margin, then replace 10vh
with 20px.
Upvotes: 0