Css Responsive Grid - Horizontal Line Between Rows

August 21, 2024 Post a Comment

I have a responsive layout with a grid of content blocks. on desktop each row is 4 blocks on tablet each row is 3 blocks on phone each row is 2 blocks I want a horizontal line to r

Solution 1:

If old browser support is not an issue, you could put some :before or :after code insertion to insert stuff before the start of each row

e.g. something like

<!DOCTYPE html><html><head><title>Quick and dirty border demo</title><style>div {width: 47%; float:left; border: 1px solid #333; margin:1em5px}

div:nth-child(2n+1):before {
    content:'';
    border-bottom:1px solid green;
    position:absolute;
    display:block;
    width: 100%;
    margin-top: -1em;
}

</style></head><body><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div><div>a</div></body></html>

With different patterns (3n+1 etc) for each media query.

If you don't want a border above the first row, use (2n+3), (3n+4) ... (xn+(x+1))

Solution 2:

You can use some CSS media queries instead of javascript:

@media (max-width:768px) { /*Extra small devices - Phones (<768px)*//*css here to show only the horizontal line for this size*/
}

@media (min-width:768px) { /*Small devices - Tablets (≥768px)*//*css here to show only the horizontal line for this size*/
}

@media (min-width:992px) { /*Medium devices - Desktops (≥992px)*//*css here to show only the horizontal line for this size*/
}

@media (min-width:1200px) { /*Large devices - Desktops (≥1200px)*//*css here to show only the horizontal line for this size*/
}

JavaScript Guy

Css Responsive Grid - Horizontal Line Between Rows

Solution 1:

Solution 2:

Post a Comment for "Css Responsive Grid - Horizontal Line Between Rows"