CSS responsive grid - adding a horizontal separator between rows

Question

CSS responsive grid - adding a horizontal separator between rows

I currently have a responsive layout featuring a grid of content blocks.

For desktop view, each row consists of 4 blocks.

When viewed on a tablet, each row displays 3 blocks.

On mobile devices, each row showcases 2 blocks only.

I am looking to add a horizontal line between each row of blocks across all screen sizes. Currently, I'm using a border bottom on each block, but the line doesn't span the full width of the page in case there is empty space (for example, displaying 3 blocks on a 4 column grid).

The only workaround I can think of is wrapping each row in a container using JS and reloading that function every time the screen is resized.

Is there a CSS solution for achieving this effect?

For clarification, refer to this image showcasing what I aim to accomplish:

https://i.stack.imgur.com/Kf8vR.gif

javascript jquery html css responsive-design

Answer 1

Answer №1

In case old browser compatibility is not a concern, you have the option to incorporate code insertion with :before or :after to add content before the beginning of each row

For example:

<!DOCTYPE html>
<html>
<head>
<title>Simple border demonstration</title>
<style>

div {width: 47%; float:left; border: 1px solid #333; margin:1em 5px}

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>

Different patterns (3n+1, etc.) can be used for different media queries.

If you prefer not to have a border above the first row, you can use (2n+3), (3n+4)...(xn+(x+1))

Answer 2

In case old browser compatibility is not a concern, you have the option to incorporate code insertion with :before or :after to add content before the beginning of each row

For example:

<!DOCTYPE html>
<html>
<head>
<title>Simple border demonstration</title>
<style>

div {width: 47%; float:left; border: 1px solid #333; margin:1em 5px}

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>

Different patterns (3n+1, etc.) can be used for different media queries.

If you prefer not to have a border above the first row, you can use (2n+3), (3n+4)...(xn+(x+1))

Answer 3

Answer №2

To avoid using JavaScript, you can implement CSS media queries as follows:

@media (max-width:768px) { /*For extra small devices like phones (<768px)*/
    /*Add CSS to display only the horizontal line for this screen size*/
}

@media (min-width:768px) { /*For small devices such as tablets (≥768px)*/
    /*Include CSS to show only the horizontal line for this screen size*/
}

@media (min-width:992px) { /*For medium devices like desktops (≥992px)*/
    /*Implement CSS to display only the horizontal line for this screen size*/
}

@media (min-width:1200px) { /*For large devices like desktops (≥1200px)*/
    /*Use CSS to show only the horizontal line for this screen size*/
}

Answer 4

To avoid using JavaScript, you can implement CSS media queries as follows:

@media (max-width:768px) { /*For extra small devices like phones (<768px)*/
    /*Add CSS to display only the horizontal line for this screen size*/
}

@media (min-width:768px) { /*For small devices such as tablets (≥768px)*/
    /*Include CSS to show only the horizontal line for this screen size*/
}

@media (min-width:992px) { /*For medium devices like desktops (≥992px)*/
    /*Implement CSS to display only the horizontal line for this screen size*/
}

@media (min-width:1200px) { /*For large devices like desktops (≥1200px)*/
    /*Use CSS to show only the horizontal line for this screen size*/
}

CSS responsive grid - adding a horizontal separator between rows

Answer №1

Answer №2

Similar questions

Answer for background picture when reducing magnification

Res.render() is failing to display content

Utilizing JavaScript's Array.sort() method for sorting objects with varying properties

Having trouble retrieving the JSON output as a variable value in my JavaScript page using PHP

typescriptWhat is the syntax in TypeScript for creating a prototype of a multidimensional

Updating JSON data post XMLHttpRequest call

Updating an array in Vue.js without the need to reload all the data

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Issue with JQuery Ajax button functionality

The PHP on server could not be loaded by Ajax

Exploring the 3D Carousel Effect with jQuery

Using Roboto Typeface in Cascading Style Sheets

Using single and double quotes in combination with brackets in PHP: a guide

occupying half of the screen

Tips on expanding the row number column width in jqGrid

Main menu items failing to display sub menu options

TradingView widget chart embedded within a web page is failing to display when hosted on X

Retrieve a div element using two specific data attributes, while excluding certain other data attributes

I successfully made a GET request using Postman, but encountered an issue when trying to do the same request through a

Attempting to compare the HTML datetime with the current time in order to implement conditional formatting