CODEWITHSUNDEEP
htmlcss
shieldcy
shieldcy

Reputation: 602

CSS Spacing multiple divs within multiple lines

I have 3 divs per row. What I want to do is to just give a small space between the divs. So I added a margin-left. That affects all the first divs on each line.

Result:

[DIV1] -- [DIV2] -- [DIV3]
-- [DIV4] -- [DIV5] -- [DIV6]

What I want to get:

[DIV1] -- [DIV2] -- [DIV3]
[DIV4] -- [DIV5] -- [DIV6]


Css:

.grids_1{
    text-align:center;
    padding: 2% 0;
}
.grid_1{
    display: block;
    margin-left: 3%;
    float: left;
}
.grid_1.bg1{
    background: #505050;
}
.images_1 {
    width: 30.333%;
    position: relative;
    height:100%;
    margin-bottom: 2%;
}

All the information within the divs are retrieved from the database. So I use PHP and a while loop to show all the divs.

Is there any way to add space between them without affecting the first div of each line?

Upvotes: 2

Views: 181

Answers (2)

cari
cari

Reputation: 2300

try this in your css:

.grid_1:nth-child(3n){ 
       margin-left: 0 !important; 
    }

this will set the margin-left to 0 on .grid_1 for element 0,3,6...

Upvotes: 0

emmanuel
emmanuel

Reputation: 9615

If there is a known number of divs (3 in your example) you could remove margin for every fourth child with :nth-child().

.images_1:nth-child(4n) { 
    margin: 0;
}

Reference: :nth-child

Upvotes: 3

Related Questions