Responsive HTML grid with a distinct line separating each row

Question

Responsive HTML grid with a distinct line separating each row

My challenge is to create a layout that features a grid of floating divs with horizontal lines under intermediate rows. The catch is that there should not be a line under the last row, and if there is only one row of elements, no line should be displayed.

The issue I'm facing is that the size of the page varies, while my elements always remain the same size. This means that the number of columns can change depending on the screen size.

I understand how to achieve this when the number of columns is constant, but I'm struggling with implementing it for variable columns.

Here's a sketch to illustrate what I'm trying to achieve:

https://i.stack.imgur.com/LB3OV.png I am using bootstrap and wondering if that affects the solution...

If you have any suggestions, please share them. Thank you!

html css twitter-bootstrap grid-layout

Answer 1

Answer №1

If you find yourself without a background image, here is a possible solution: Simply add the line underneath the units within the flex container and insert an additional whitespace line to cover up the border of the lower elements.

In this scenario, the divs are essentially just placeholders. The padding and margin should be implemented on the elements contained within them. I have designated the units in grey and the bottom line in light pink for illustrative purposes, but ideally they should be transparent and white respectively.

.container {
  display: flex; 
  flex-flow: row wrap;
  overflow: hidden;
  position: relative;
}

.container div {
  display: inline-block;
  background-color: #eee;
  width: 140px;
  height: 120px;
  padding: 10px;
  
  border-bottom: 3px solid red;
}

.container::after {
  position: absolute;
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #FFF; /* Update this color to white. */
  
}

<div class="container">
<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><div>A</div><div>A</div><div>A</div>
</div>

Answer 2

If you find yourself without a background image, here is a possible solution: Simply add the line underneath the units within the flex container and insert an additional whitespace line to cover up the border of the lower elements.

In this scenario, the divs are essentially just placeholders. The padding and margin should be implemented on the elements contained within them. I have designated the units in grey and the bottom line in light pink for illustrative purposes, but ideally they should be transparent and white respectively.

.container {
  display: flex; 
  flex-flow: row wrap;
  overflow: hidden;
  position: relative;
}

.container div {
  display: inline-block;
  background-color: #eee;
  width: 140px;
  height: 120px;
  padding: 10px;
  
  border-bottom: 3px solid red;
}

.container::after {
  position: absolute;
  content: "";
  display: block;
  height: 3px;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #FFF; /* Update this color to white. */
  
}

<div class="container">
<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><div>A</div><div>A</div><div>A</div>
</div>

Answer 3

Answer №2

Give this a shot, using the "black" background-color that matches your body/container background shade.

https://jsfiddle.net/e125u41f/1/

Answer 4

Give this a shot, using the "black" background-color that matches your body/container background shade.

https://jsfiddle.net/e125u41f/1/

Responsive HTML grid with a distinct line separating each row

Answer №1

Answer №2

Similar questions

Creating a subtle vanishing popup dialog using only CSS (no reliance on jQuery)

Troubleshooting Browser Behavior: Back Button Not Loading Page - jQuery and HTML5

What is the best way to position an image in the bottom right corner of a fluid div container?

Is there a quicker method than using document.getElementById('element-id').innerHTML to retrieve content?

Dependency on the selection of items in the Bootstrap dropdown menu

Clicking on text triggers image display

Influencing various classes when :active is triggered

Tips for making a Bootstrap dropdown submenu appear as a 'dropup'

Left-aligned and centered - Bootstrap

Prioritize loading the JS function before initiating PHP validation

What is the best way to retrieve the values from the labels for two separate buttons?

css Sibling elements restricted within parent container

enhance the brilliance of elements at different intervals

Swap out the image for a div element if the image is not found

Using line breaks in JSX

Different "criteria" for CSS wildcard selectors using Selenium

Steps to remove a scrollbar from a fullscreen slider

Eliminating unnecessary gaps caused by CSS float properties

Displaying a spinner within Bootstrap tabs to indicate content is loading via ajax

Contrasting .queue() with jquery.queue()