user3810900 user3810900 - 4 months ago 6
CSS Question

Way to reproduce this layout effect with css?

Short of creating a 7 column / 3 row table with a 1 pixel image that can be expanded to simulate the lines, how can this layout be reproduced using HTML and CSS without a table or an image for the "dividers"?

What I really like about it is how the lines don't intersect.

enter image description here



<!-- layout reproduced -->
<TABLE BORDER="0" CELLPADDING="3" CELLSPACING="0" WIDTH="100%">
<TR ALIGN="center">

<TD CLASS="boldedcolor4text">the first</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the second</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the third</TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="20"></TD>
<TD CLASS="boldedcolor4text">the fourth</TD>

</TR>
<TR ALIGN="center">
<TD COLSPAN="7"><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="520" HEIGHT="1"></TD>
</TR>
<TR ALIGN="center">

<TD><A CLASS="image" HREF="><IMG SRC="1.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="2.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="3.jpg" ALT="" BORDER="0"></A></TD>
<TD><IMG SRC="/gfx/Style1/color1.gif" ALT="" WIDTH="1" HEIGHT="135"></TD>
<TD><A CLASS="image" HREF="><IMG SRC="4.jpg" ALT="" BORDER="0"></A></TD>

</TR>
</TABLE>




Answer

You could try it like: https://jsfiddle.net/wh48rjvt/

SCSS:

$border: 1px solid grey;
.table-row {
  border-bottom: $border;
  &:last-child {
    border-bottom: 0;
  }
  .table-box {
    border-right: $border;
    margin: 0.75rem 0;
    &:last-child {
      border-right: 0;
    }
  }
}

HTML:

<div class="container">
  <div class="table-row row">
    <div class="table-box col-xs-3">1</div>
    <div class="table-box col-xs-3">2</div>
    <div class="table-box col-xs-3">3</div>
    <div class="table-box col-xs-3">4</div>
  </div>
  <div class="table-row row">
    <div class="table-box col-xs-3">5</div>
    <div class="table-box col-xs-3">6</div>
    <div class="table-box col-xs-3">7</div>
    <div class="table-box col-xs-3">8</div>
  </div>
  ...
</div>

And I used Bootstrap for the grid.