0

I have a "table" which consists of wrapper element, which is styled as display:grid and elements which are styled to have border, but elements on the very edge of the table should not have border, creating this border styling pattern:


   |    |    |
---+----+----+----
   |    |    |    
---+----+----+----
   |    |    |

Like this: enter image description here

Grid has flexible number of columns

    display: grid;
    grid: none / repeat(auto-fill, minmax(auto, 312px))

and there are no explicit rows, so number of rows is also flexible. Flexible layout is important to have responsive design.

For the sake of simplicity, let's say that grid is comprised of div container and inner div elements with contents like so:

<div class="grid-container">
  <div class="element"><p>content</p></div>
  <div class="element"><p>content</p></div>
  <div class="element"><p>content</p></div>
  ...

</div>

How to style borders of this "table"? Do note that everything is flexible.

Every solution I found so far relies on known number of columns and rows, which is not the case here.

Lovor
  • 236
  • 2
  • 9
  • you can style the borders with `border: 2px solid red` for example if you want a 2px solid red border. You didn't provide more information on what exactly your problem is and why you can't just style it this way. – cloned Dec 27 '22 at 10:59
  • The problem is how to style borders, because borders on the edge should not exist. And number of columns and rows is flexible, so simple styling with border won't do. – Lovor Dec 27 '22 at 11:29
  • By "flexible" I mean on certain screen widths table will have one column, on others two, than three, etc. You can read this from grid css settings. – Lovor Dec 27 '22 at 11:32
  • [This question](https://stackoverflow.com/q/13792755/2518285) has the answers you need. Before asking a question, make sure you search Stack Overflow to see if someone has already asked the same question. – Brett Donald Dec 28 '22 at 01:46
  • Thanks for pointing that out, but it is not exactly the same question. I insist on using grid layout, accepted solution uses fixed grid cells widths and heights and there is one grid solution, but it works only when table is fully filled. When "orphan" elements exist in last row it shows large colored background elements. Plus, it is asked 10 years ago and css has improved since. – Lovor Dec 28 '22 at 08:42

0 Answers0