CODEWITHSUNDEEP
htmlcsssass
Aditi Tripathi
Aditi Tripathi

Reputation: 1

Unequal distribution of space between two column

Here is the code for my grid consisting of four square grids. However, the difference between the two columns is unequal. How can I ensure equal spacing?

.industriesFeatureInner {
    h2 {
        margin-top: 6rem;
        font-size: 2rem;
        overflow-wrap: break-word;
    }

    .industriesFeatureList {
        flex-direction: row;
        gap: 2rem;
        overflow-wrap: break-word;

        .industriesFeatureListRow {
            flex-direction: column;
            gap: 2rem;
        }
    }
}

Here is the output of the above styling image for ref

Upvotes: 0

Views: 37

Answers (1)

Uttam Nath
Uttam Nath

Reputation: 672

Set width of grid item like

Width:calc((100% / 2 )- 2rem);

Width 100% / 2 = 50% - 2rem = real width

Edit 

.view{
   display: flex;
   flex-wrap: wrap;
   gap: 0.8rem; 
   justify-content: center;
   border: 1px solid #000;
}
.item{
   height:4rem;
   border: 1px solid #000;
   background:#000000;
   width: calc((100% / 2) - 0.8rem);
}
<div class="view">
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
    <div class="item">
    </div>
</div>

Upvotes: 1

Related Questions