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

Automatic Hiding of Dropdown Menu in Twitter Bootstrap: A Quick Guide to Set a 2-Second Timer

Using AJAX to dynamically load an image by setting the image path as the source of the image tag

ng-Pattern in AngularJS

Left-align elements within a div container that is centered

Is there a way to showcase the present weather conditions using simpleweather.js in plain text format?

Upon returning to the website homepage from another page, the JavaScript animation ceases

Enhance iframe with hover effect

Images displayed using jQuery do not fade into view

Wordpress team exhibition

Invoke a function in Angular when the value of a textarea is altered using JavaScript

Replacing Material-UI dialog fonts

Issue with Ionic app on iPhone X not correctly detecting safe areas

The CSS transition timing seems to be malfunctioning as not all elements are smoothly transitioning, specifically the text within the li and anchor tags is not

Having trouble with the rendering of the Stripe Element Quickstart example

jQuery not refreshing properly

What are some tips for managing the hover effect using CSS3?

Internet Explorer 11 encountering a flaw with absolute positioning

Tips for positioning a 404 message at the center of a webpage

What is the best way to include an image link in an HTML page generated with golang?

The optimal method for selecting a button from a group of buttons on a calculator using pure JavaScript