CODEWITHSUNDEEP
htmlcsslayout
Mickael Caruso
Mickael Caruso

Reputation: 9491

How to achieve equal horizontal AND vertical margins, AND equal column width in CSS?

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

Answers (2)

Waren Inber
Waren Inber

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

knitevision
knitevision

Reputation: 3153

Flexbox & viewport height solution

Codepen link

.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

Related Questions